Beginners Guide to Sencha Touch Joshua Morony
Contents Contents 1 Preface.......................... 4 1 Why Sencha Touch? 8 2 Know Your Options 21 3 How Sencha Touch Actually Works 22 4 Setting up Your Work Environment 23 5 Creating a New Project 24 6 Installing the Example Application 25 7 Learning the Framework 26 1
8 Using Sencha Cmd Commands 27 9 Testing Your Application 28 10 What Sencha Touch is Capable Of 29 11 What is PhoneGap? 30 12 What is PhoneGap Build? 31 13 Styling & Theming Your Application 32 14 Extending the Functionality 33 15 Integrating Facebook 34 16 Building for ios 35 17 Building for Android 36 18 Submitting to the Apple App Store 37 19 Submitting to Google Play 38 20 Submitting to the Amazon App Store 39 2014 Joshua Morony - www.joshmorony.com 2
21 Final Thoughts 40 2014 Joshua Morony - www.joshmorony.com 3
Preface This is not intended to be a typical textbook; it does not attempt to explain all the features and concepts of the Sencha Touch framework. This book is very much what the title suggest, a guide for beginners. It contains everything I desperately wish I had known about Sencha Touch when I was beginning to learn, as well as what the experts I have interviewed for this book wish they had known. It follows a narrative of the path I took to publishing an application and each chapter focuses on a particularly confusing, but necessary, obstacle or roadblock I faced. These are things I may have spent hours or even days researching before finding an answer, or in some cases the answer did not come until much later. In some cases it was just a conceptual misunderstanding which, once explained, was really quite simple. In other cases, the answer was much more complex. We will focus on all the stuff you need to do around the frame- 2014 Joshua Morony - www.joshmorony.com 4
work, not just learning how to use the framework itself. These are things like how to set up your application, debugging and testing, adding plugins and components, PhoneGap, integrating Facebook and most importantly building and distributing your application on ios and Android. The goal of this book is to tell you all the things you need to know right now to get stuff done and to get your application out there. As such, this book is perfect for beginners or people who are relatively new to the framework. This was created with Windows users in mind, who want to create ios and Android applications, but most of the advice is easily adaptable for Mac users. To help reinforce some of the concepts of this book, a sample application has been created that you can view and reference as you read along. I ll talk you through what you need to do to get this application up and running in Chapter 6 after we ve discussed how to set up your work environment. By the time you finish this book you re probably not going to be a Sencha Touch guru, releasing killer applications every 2014 Joshua Morony - www.joshmorony.com 5
week that takes time and practice (and Sencha Touch will take you far if you want it too). You will however have most time consuming obstacles you would be likely to run into early on answered and no longer standing in your way leaving you more time to just learn the language and make apps, instead of scouring the Internet for days looking for an answer that just does not seem to be out there. This book is for you if you want to: Have a good understanding of the big picture and how Sencha Touch and the environment surrounding it works Learn the Sencha Touch framework. This guide will point you to the most useful resources for learning and discuss best practices to get you off to the best start. Run a Sencha Touch application on an ios device (without a Mac or XCode!) Run a Touch application on an Android Device 2014 Joshua Morony - www.joshmorony.com 6
Use & understand how PhoneGap and PhoneGap Build work with Sencha Touch Submit a production application ready for distribution to ios and Android app stores Learn from interviews with experts Get off to the best start you can in learning Sencha Touch In short, this book will be suitable for you if you recently began learning Sencha Touch, are interested in learning Sencha Touch or want to develop a mobile application but have no idea where to start. 2014 Joshua Morony - www.joshmorony.com 7
Chapter 1 Why Sencha Touch? Why is it that I choose to use Sencha Touch and write blog posts and books about it? In this chapter I want to give you the big picture, a broad overview of what you can achieve with Sencha Touch and then a more in depth look at why one might use Sencha Touch. The Big Picture With Sencha Touch you can: 8
Create applications that run through a web browser Create applications that will run on smart phone browsers Create applications that can be installed natively on ios, with or without a Mac and XCode Create applications that can be installed natively on Android (as well as others) Distribute your applications through the Apple and Google app stores Integrate with popular services like Facebook Utilise device hardware features like GPS, vibration and the camera Do almost anything a native application can do, with some limitations Throughout this book you will find various interviews with Sencha Touch experts. In some of these interviews I asked why it was that they decided to use Sencha Touch, perhaps 2014 Joshua Morony - www.joshmorony.com 9
over other options that were available. Here s what they had to say: Sencha Touch is our primary choice for mobile web and Phonegap based applications. We used few other libraries like jquery Mobile, Kendo Mobile etc. too but we always preferred Sencha Touch for developing and theming mobile apps. We like Sencha because it provides smoother user experience and easy theming mechanism; it has rich UI set and it is highly customizable. Swarnendu De I have spent some time with some competitors to Sencha Touch to compare the strengths and weaknesses of each solution as Sencha Touch may not always be the right tool for the job. Overall I find Sencha Touch handles more use cases more elegantly. Sure Sencha Touch doesn t do some things 2014 Joshua Morony - www.joshmorony.com 10
as well or at all than some other frameworks but since I have spent countless hours with Sencha Touch I know that I can usually create a solution to fill the gap. Sencha Touch does a great job allowing you to extend it, the class system and config object is very powerful and flexible. Mitchel Simoens The library is really amazing. It gives developers great tools to build a diverse range of applications. With the Sencha Touch class system developers also have a lot flexibility to modify classes to suit their purposes. I think it s clearly a far more feature rich mobile JS framework than anything else currently available. The tools built around the library (CMD, Architect) are a huge advantage as well. Phil Merrell I come from a web design background, and looked for similar technologies that could provide me with a cross platform approach to app development. 2014 Joshua Morony - www.joshmorony.com 11
I started with JQTouch but, frustrated with the limitations of a website-like approach to application development, nearly gave up on the web technologies approach until I found Sencha Touch. The kind of applications I develop need to handle and display sports data - the way Sencha Touch handles data is perfect for this, and being able to develop quickly, and then deploy to both ios and Android, is invaluable. I looked at other cross-platform development tools such as Xamarin and Titanium and even used both for simple app prototypes. I simply found with Sencha Touch that I could achieve what I wanted to and much more quickly than with those other platforms. I ve always thought development is best done solo or in large teams, and not needing to communicate with a designer due to the ease of use of CSS/SASS 2014 Joshua Morony - www.joshmorony.com 12
is another bonus. Simon Shepherd As well as the comments from everybody above (who we will hear a lot more from later in the book), I went into a little more detail with Phil Merrell about the Sencha and mobile web approach in general and how it stacks up to native development: Currently HTML5 apps are generally seen as being second class to natively coded applications, will this always be the case? I think we ll start to see more applications migrate away from native code to the web as mobile devices and browsers become more capable. Similar to how many desktop applications started off as native apps (e.g., email and documents applications), I think eventually the majority of apps will live on the web rather than on clients with native code. For this to become a reality we will also need platforms to treat web apps as a first class citizen similar to native apps, i.e., equal access to the home 2014 Joshua Morony - www.joshmorony.com 13
screen as an icon, more native device APIs, and easy fullscreen, browser-less viewing options. ios has always flirted with this, but clearly prioritizes the consumption of apps through their app store. There will always be a place for native applications, of course, but there will be less of a need for the low level processing power that s currently an advantage when developing apps natively. Why did you start using Sencha Touch over developing natively or other cross-platform approaches like Xamarin? I ve never used Xamarin but it looks interesting. Personally I m betting on the web being the dominant platform in the long run not just for mobile apps, but for smart TVs, cars, and the further evolution to the Internet of things. Xamarin is a cross platform development tool for publishing native apps to app stores. I can envision a 2014 Joshua Morony - www.joshmorony.com 14
future where app stores still exist, but our reliance on them is deemphasized, and the web using web technologies is the dominant platform for all apps. Xamarin also does does a good job of skinning apps for their respective platform, and you can certainly accomplish this with Sencha Touch, but I hope we can evolve to not need apps that look different in all platforms. I think it s a sign of immaturity and analogous to the days where web sites proudly (and visually) proclaimed they were best viewed in Netscape Navigator or Internet Explorer. I hope apps can evolve past needing radical differences in UI for each platform. I look forward to the day where developers no longer have to style differently for every platform but rather there is just one app for every platform with consistent and beautiful UI. The web can help make this a reality. What do you think are the most pressing limitations 2014 Joshua Morony - www.joshmorony.com 15
of Sencha Touch or of HTML5 apps in general? Do you see these being overcome in the near future? The speed of DOM interactions and inconsistent browser implementation of JavaScript are a consistent pain point for web developers. Web standards evolve slower, which in the long run is probably a good thing, but it causes problems when trying to develop cutting edge web applications. For HTML5 development in general I think Mike Mullany (Sencha CEO) was spot on when he said you run into problems when you take a web site building mentality to build mobile apps. Web apps are much more capable when applying traditional software developing techniques. The Sencha Touch Library and tools like Sencha Architect help developers benefit from these techniques. As far as overcoming the current limitations of the web, I m comforted and inspired by Sencha s Fast- 2014 Joshua Morony - www.joshmorony.com 16
book application. If the lessons learned in building that application are fully implemented into the Sencha Touch library, then the future of web apps and web performance is very bright. Also if browser performance on the desktop is any indication of what s to come with browser performance on mobile devices, then I think soon performance will no longer be a criticism. We really only need web apps to be fast enough and we re almost there. What did you struggle with most when trying to learn Sencha Touch? If you could go back in time what would you tell the you that s just starting to learn? Being self taught and coming from a more traditional web site design/developer background a la PHP and JQuery, I feel like the most challenging parts of learning Sencha Touch for me were actually lessons in sound developer practices. When 2014 Joshua Morony - www.joshmorony.com 17
learning Sencha Touch, initially I felt like I was trying to grasp a lot of new concepts all at once like MVC and single page application architecture in addition to the library itself. If you re used to developing web sites, then building web applications is a departure from what you re familiar with. For those first learning, I think Sencha Architect is a huge advantage for learning the Sencha Touch library. Everything is visually laid out in front of you and allows you to explore all the tools at your disposal every component is represented in the toolbox and each component has all its possible attributes listed in the config pane. It s much more revelatory than learning with a blank page in your IDE of choice. Sencha Touch really started to make sense to me in the context of Sencha Architect, so I would definitely like to go back in time and tell myself to use it to start. 2014 Joshua Morony - www.joshmorony.com 18
It s impossible to choose one clear winner overall as it is far too subjective and everyone will have their biases. However Sencha Touch is one of the most popular and is always considered among the best. Some of the main reasons I continue to use Sencha Touch are that it: Takes advantage of hardware acceleration and is one of the fastest frameworks Provides really nice UI elements and has great theming support Includes Sencha Cmd which provides great support for building and minimising production applications Heavily supports PhoneGap Uses an MVC architecture Is being actively developed and supported, and has a large, passionate following As well as these points, I believe in the future of the web for mobile apps and think that Sencha Touch will remain at the 2014 Joshua Morony - www.joshmorony.com 19
forefront of this. I feel that if you do decide to go with Sencha Touch, it is certainly not going to be a decision you regret. I hope you enjoyed the sample content. Over the next few pages I ve listed all of the chapters you will receive if you purchase the rest of this guide. As well as this, you will also receive the full source code to the example application and the interviews with all five experts in their entirety. To purchase, please go to: 2014 Joshua Morony - www.joshmorony.com 20
Chapter 2 Know Your Options Please purchase this guide at: to unlock this content. 21
Chapter 3 How Sencha Touch Actually Works Please purchase this guide at: to unlock this content. 22
Chapter 4 Setting up Your Work Environment Please purchase this guide at: to unlock this content. 23
Chapter 5 Creating a New Project Please purchase this guide at: to unlock this content. 24
Chapter 6 Installing the Example Application Please purchase this guide at: to unlock this content. 25
Chapter 7 Learning the Framework Please purchase this guide at: to unlock this content. 26
Chapter 8 Using Sencha Cmd Commands Please purchase this guide at: to unlock this content. 27
Chapter 9 Testing Your Application Please purchase this guide at: to unlock this content. 28
Chapter 10 What Sencha Touch is Capable Of Please purchase this guide at: to unlock this content. 29
Chapter 11 What is PhoneGap? Please purchase this guide at: to unlock this content. 30
Chapter 12 What is PhoneGap Build? Please purchase this guide at: to unlock this content. 31
Chapter 13 Styling & Theming Your Application Please purchase this guide at: to unlock this content. 32
Chapter 14 Extending the Functionality Please purchase this guide at: to unlock this content. 33
Chapter 15 Integrating Facebook Please purchase this guide at: to unlock this content. 34
Chapter 16 Building for ios Please purchase this guide at: to unlock this content. 35
Chapter 17 Building for Android Please purchase this guide at: to unlock this content. 36
Chapter 18 Submitting to the Apple App Store Please purchase this guide at: to unlock this content. 37
Chapter 19 Submitting to Google Play Please purchase this guide at: to unlock this content. 38
Chapter 20 Submitting to the Amazon App Store Please purchase this guide at: to unlock this content. 39
Chapter 21 Final Thoughts Please purchase this guide at: to unlock this content. 40