Uploaded bySebastian Pederiva
Sencha Touch
This document provides an overview and agenda for a Sencha Touch developer practice from June 29 - July 3, 2014. Sencha Touch is an HTML5 framework for building rich mobile web apps that provides over 50 reusable components and allows writing code once that runs on any device. It uses the native capabilities of devices while avoiding having to learn new SDKs. The agenda covers the benefits of Sencha Touch, its class system, touch events, common components, layouts, and getting started with a demo. It also mentions integrating with PhoneGap and using Sencha Architect for visual design.
Sencha Touch
- 1. © Copyright SELAsoftware & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com SELA DEVELOPER PRACTICE JUNE 29 – JULY 3, 2014 Sebastian Pederiva Senior Consultant sebastianp@sela.co.il @spederiva tiny.cc/SebastianBlog Sencha Touch
- 2. Agenda The Native Challenge Whatis Sencha Touch Why use Sencha Touch Application Pattern Concepts Getting Started
- 3. The Native Challenge Writeonce, run anywhere Programmers already know HTML/CSS/JavaScript Short term investment – No new SDK Native Events? Device capabilities/access
- 4. What is SenchaTouch Build Mobile Web Apps with HTML5 High-performance mobile application framework Rich UI application Over 50 built-in components Since 2010 Cousin of ExtJs
- 5.
- 6. Why Sencha Touch Totalsolution Cross platform support – Mobile, Tablets Best documentation Open Source and Commercial Versions Easy PhoneGap integration
- 7.
- 8. MVC and ManagingDependencies
- 9. Getting Started withSencha Touch Sencha Touch SDK http://www.sencha.com/products/touch/download Sencha Cmd http://www.sencha.com/products/sencha-cmd/download http://sass-lang.com/download.html http://compass-style.org/install
- 10.
- 11. Basic Concepts The ClassSystem Touch Events Components Containers Layouts
- 12. The Class System Makeour JavaScript life easy create new classes provide inheritance dependency loading mixins powerful configuration options Automatically generated getter and setters Developed for Ext JS 4
- 13. Touch Events Built onnative events Best performance More events Tap Double Tap Tap and Hold Swipe
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. Summary Sencha provides thebest framework to develop web for mobile Native integration with PhoneGap Theming
- 21. Bonus – SenchaArchitect
- 22.
- 23.
Editor's Notes
- #4 Challenge = אתגר Native Events? – Use PhoneGap TripCase Hockey Community Twitter LinkedIn
- #5 Best framework for html5 mobile applications Sencha Touch, a high-performance HTML5 mobile application framework, is the cornerstone of the Sencha HTML5 platform. Ext JS 2.0 since 2007 In 2010, ExtJS merged with jQTouch (jquery touch plugin) and Raphaël (library - Vector graphics)
- #6 Over 50% of the Fortune 100 are Sencha customers
- #7 Cross platform support – Mobile, Tablets, Etc. *** Touch Events *** Easy – write HTML, CSS, JavaScript Affordable – use open source technologies to build Short term investment – no need to learn a new SDK, programming language, app submission process, OS updates Fragmentation – of the mobile app market has led to mobile web development Users don’t care if the app is native or web as long as it’s fast and responsive Best documentation
- #8 Kendo UI mobile is a paid Sencha has more than 50 components Sencha is far more extensive than its competitors Sencha is also the only Web framework with built-in support for objects that stay put (like a toolbar) while others scroll (like a list). Documentation and Community Graphing Styling & Theming
- #9 There are two main places that dependencies can be defined in a Sencha Touch app - on the application itself or inside the application classes. This guide gives some advice on how and where to declare dependencies in your app.
- #10 An app is a collection of Models, Views, Controllers, Stores, and Profiles, plus additional metadata for app-related entities, such as application icons and launch screen images.
- #13 Components: SubClasses of Ext.Component Containers: Contains child components Specify Layouts
- #14 MasterClass