![• Execute from the unzipped Sencha files you’ve
downloaded: $sencha generate app [AppName]
[path/to/app]
• For watching the default project you’ve just created
you can start sencha server by typing: $sencha
web start
• You can generate distribution builds by typing:
$sencha app build -e production
Creating your first app](https://image.slidesharecdn.com/senchajsmonterrey-150329154158-conversion-gate01/85/Mobile-web-apps-with-sencha-touch-2-9-320.jpg)
Mobile web apps with sencha touch 2
- 1. Mobile web apps with Sencha Touch 2 Javascript Monterrey
- 2. Hi there! I’m Bernardo Soriano, Front end & Mobile web developer. FE Dev Accenture Interactive, ex IBM Interactive, digital marketing agencies… 4 years working in FE, hybrid mobile apps & Interactive development. Twitter @bersoriano Email [email protected]
- 3. • What is Sencha Touch and when should I use it? • Creating your first app. • Sencha Touch widgets. • Application architecture. • Comparing Sencha Touch with other frameworks. Agenda
- 4. What is Sencha Touch? Sencha Touch is… • UI components library (widgets) • Layouts and navigation (SPAs) • UI data chart presentation • Handles UI Touch events • Library of javascript global functions • MVC architecture • …
- 5. Should I use it? The good • Fast UI development • Cross device optimization • Maturity of the framework • Integrated build scripts for production distribution • Data management JSON->Model Obj • Graphing (SVG) • Large developer community The bad • Hard to customize UI components, transitions and interaction • Debugging errors in the UI • Some errors in the documentation between different version • Hard to extend widgets functionality The ugly • Poor theming options • Limited number of components • Old fashioned transitions and UI design • Sharp learning curve for designers
- 6. What is Sencha Touch?
- 7. Sencha Touch Components • Carousel • Charts • Forms • List • Navigation view • TabPanel • Theming
- 8. • Download Sencha Touch • Download and install the Sencha CMD • Download and install Ruby (Sencha UI uses SASS) • Download and install the JDK (Sencha CMD use it) • Verify the installation by typing in the terminal: $sencha $ruby --version $java -version Preparing the ingredients
- 9. • Execute from the unzipped Sencha files you’ve downloaded: $sencha generate app [AppName] [path/to/app] • For watching the default project you’ve just created you can start sencha server by typing: $sencha web start • You can generate distribution builds by typing: $sencha app build -e production Creating your first app
- 11. Let’s add some stuff… Carousel component for the second page…
- 12. Sencha MVC - Model
- 13. Sencha MVC - View
- 14. Sencha MVC - Controller
- 15. Other Mobile first FW Mobile Angular UI