Mobile web apps with sencha touch 2
-
Upload
bersoriano -
Category
Software
-
view
36 -
download
1
Transcript of Mobile web apps with sencha touch 2
![Page 1: Mobile web apps with sencha touch 2](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a939141a28ab490a8b481a/html5/thumbnails/1.jpg)
Mobile web apps with Sencha Touch 2
Javascript Monterrey
![Page 2: Mobile web apps with sencha touch 2](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a939141a28ab490a8b481a/html5/thumbnails/2.jpg)
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]
![Page 3: Mobile web apps with sencha touch 2](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a939141a28ab490a8b481a/html5/thumbnails/3.jpg)
• 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
![Page 4: Mobile web apps with sencha touch 2](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a939141a28ab490a8b481a/html5/thumbnails/4.jpg)
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 • …
![Page 5: Mobile web apps with sencha touch 2](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a939141a28ab490a8b481a/html5/thumbnails/5.jpg)
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
![Page 6: Mobile web apps with sencha touch 2](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a939141a28ab490a8b481a/html5/thumbnails/6.jpg)
What is Sencha Touch?
![Page 7: Mobile web apps with sencha touch 2](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a939141a28ab490a8b481a/html5/thumbnails/7.jpg)
Sencha Touch Components
• Carousel
• Charts
• Forms
• List
• Navigation view
• TabPanel
• Theming
![Page 8: Mobile web apps with sencha touch 2](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a939141a28ab490a8b481a/html5/thumbnails/8.jpg)
• 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
![Page 9: Mobile web apps with sencha touch 2](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a939141a28ab490a8b481a/html5/thumbnails/9.jpg)
• 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
![Page 10: Mobile web apps with sencha touch 2](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a939141a28ab490a8b481a/html5/thumbnails/10.jpg)
Application structure
![Page 11: Mobile web apps with sencha touch 2](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a939141a28ab490a8b481a/html5/thumbnails/11.jpg)
Let’s add some stuff…
Carousel component for the second page…
![Page 12: Mobile web apps with sencha touch 2](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a939141a28ab490a8b481a/html5/thumbnails/12.jpg)
Sencha MVC - Model
![Page 13: Mobile web apps with sencha touch 2](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a939141a28ab490a8b481a/html5/thumbnails/13.jpg)
Sencha MVC - View
![Page 14: Mobile web apps with sencha touch 2](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a939141a28ab490a8b481a/html5/thumbnails/14.jpg)
Sencha MVC - Controller
![Page 15: Mobile web apps with sencha touch 2](https://reader034.fdocuments.in/reader034/viewer/2022042701/55a939141a28ab490a8b481a/html5/thumbnails/15.jpg)
Other Mobile first FW
Mobile Angular UI