• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Hybrid Mobile Web Apps with Sencha Touch 2
 

Hybrid Mobile Web Apps with Sencha Touch 2

on

  • 2,202 views

Creating apps usually is a very time consuming process when it comes to development. You need to write your code for all different platforms like iOS, Android, Blackberry, Windows Phone. Sencha Touch ...

Creating apps usually is a very time consuming process when it comes to development. You need to write your code for all different platforms like iOS, Android, Blackberry, Windows Phone. Sencha Touch solves this problem by giving you a framework for the langauge we as web developers all know and love; Javascript! In this session we will see how Sencha Touch makes it easy to create apps. We will talk about the pro’s and cons of using HTML5 and Javascript. After that I will take you on a tour on how to create a simple tab-based application with an external data source. We will have a look at theming, and look into some performance optimizations.

Statistics

Views

Total Views
2,202
Views on SlideShare
2,169
Embed Views
33

Actions

Likes
1
Downloads
76
Comments
0

2 Embeds 33

http://eventifier.co 30
http://lanyrd.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Hybrid Mobile Web Apps with Sencha Touch 2 Hybrid Mobile Web Apps with Sencha Touch 2 Presentation Transcript

    • Building mobile web applications with Sencha Touch 2 Martin de Keijzer iOSOnRailsConf 2013 13-14 April, Alushta UkraineSunday, 14 April 13
    • Introduction 2Sunday, 14 April 13
    • About me Martin de Keijzer Dutch web developer Working for Ibuildings PHPBenelux Board Member @Martin1982 http://www.martindekeijzer.nl 3Sunday, 14 April 13
    • The mobile web 4Sunday, 14 April 13
    • Apps Languages ‣ Apple: Objective-C ‣ Android: Java ‣ Windows Phone: C# / Visual Basic Distribution Methods Apple: AppStore Android: Market Windows Phone: Microsoft Market Place 5Sunday, 14 April 13
    • Web Apps Available through the web 6Sunday, 14 April 13
    • Web Apps Platform independent 7Sunday, 14 April 13
    • Web Apps Can be transformed to an App-like experience 8Sunday, 14 April 13
    • Web Apps Can be wrapped as native apps 9Sunday, 14 April 13
    • Sunday, 14 April 13
    • The Sencha Touch way ‣ Building applications, not websites ‣ Pure JavaScript ‣ Touch framework ‣ MV(S)C Paradigm ‣ Based on ExtJS 4 Downloadable from http://www.sencha.com 11Sunday, 14 April 13
    • Sencha Cmd Rapidly starting 12Sunday, 14 April 13
    • Quick start: Sencha Cmd sencha generate app <name> <path> 13Sunday, 14 April 13
    • Quick start: Sencha Cmd •App •Resources •app.js •.json files •index.html •touch (DO NOT TOUCH!) 14Sunday, 14 April 13
    • Changing the SDK is bad! Extending is ok. 15Sunday, 14 April 13
    • Testing Webkit 16Sunday, 14 April 13
    • Interface design Setting up views 17Sunday, 14 April 13
    • User interface Abstraction of various app ui elements: ‣ containers ‣ panels ‣ tab panels ‣ carousels ‣ lists ‣ forms ‣ toolbars 18Sunday, 14 April 13
    • Creating views app/view/Technologies.js 19Sunday, 14 April 13
    • Creating views http://docs.sencha.com 20Sunday, 14 April 13
    • Creating views /app.js 21Sunday, 14 April 13
    • Creating views app/view/Main.js 22Sunday, 14 April 13
    • Creating views 23Sunday, 14 April 13
    • Taking control Bootstrapping & Controllers 24Sunday, 14 April 13
    • Bootstrapping and Controllers /app.js Final point of bootstrapping, controllers & profiles go first 25Sunday, 14 April 13
    • Bootstrapping and Controllers 26Sunday, 14 April 13
    • Events sencha generate controller <name> Create a new controller 27Sunday, 14 April 13
    • Events Make the component selectable 28Sunday, 14 April 13
    • Events app/controller/TechnologiesTab.js 29Sunday, 14 April 13
    • Events app/controller/TechnologiesTab.js 30Sunday, 14 April 13
    • Events Querying Predefined events 31Sunday, 14 April 13
    • Events app/controller/TechnologiesTab.js 32Sunday, 14 April 13
    • Events 33Sunday, 14 April 13
    • Data binding and communication 34Sunday, 14 April 13
    • Data communication 35Sunday, 14 April 13
    • Model Model Field Association Validation 36Sunday, 14 April 13
    • Model sencha generate model <name> <property:type,[property:type]...> 37Sunday, 14 April 13
    • Model app/model/Technologies.js 38Sunday, 14 April 13
    • Store Store Model Filter Grouper Sorter 39Sunday, 14 April 13
    • Store app/store/Technologies.js app.js 40Sunday, 14 April 13
    • Proxy Store Proxy Model Reader Writer 41Sunday, 14 April 13
    • Proxy app/model/Technologies.js 42Sunday, 14 April 13
    • Create a list app/view/Technologies.js 43Sunday, 14 April 13
    • Data in action! 44Sunday, 14 April 13
    • Device profiles When an OS doesn’t play well with your app 45Sunday, 14 April 13
    • Device profiles Different devices can require different options. 46Sunday, 14 April 13
    • Device Profiles Tablet has more screen real estate and can provide more user interaction than a phone. 47Sunday, 14 April 13
    • Device Profiles Device profiles provide a solution! 48Sunday, 14 April 13
    • Profile setup sencha generate profile <name> 49Sunday, 14 April 13
    • Profile overriding app/view/Desktop/Main.js 50Sunday, 14 April 13
    • Profile overriding app/view/Tablet/Main.js 51Sunday, 14 April 13
    • Profile overriding app/view/Phone/Main.js 52Sunday, 14 April 13
    • Profile overriding app/profile/Tablet.js 53Sunday, 14 April 13
    • Profile overriding Desktop 54Sunday, 14 April 13
    • Profile overriding Phone 55Sunday, 14 April 13
    • Profile overriding Tablet 56Sunday, 14 April 13
    • Your app’s got style! Styling an app 57Sunday, 14 April 13
    • Sunday, 14 April 13
    • Installing Compass gem install compass 59Sunday, 14 April 13
    • The scss file Extension: .scss compass compile compass watch 60Sunday, 14 April 13
    • The scss file resources/sass/app.scss 61Sunday, 14 April 13
    • Compass Variables touch/resources/ themes/ stylesheets/ sencha-touch/ default/ _variables.scss 62Sunday, 14 April 13
    • Compass Mixins 63Sunday, 14 April 13
    • Quick Tips •Well documented on http://docs.sencha.com •Sencha Command •Sencha Architect 2 •Keep your views clean, use controllers! •Mobile devices have limited hardware 64Sunday, 14 April 13
    • Need another look? http://www.github.com/ Martin1982/ iOSOnRailsConf 65Sunday, 14 April 13
    • Sencha Touch by Sencha 66Sunday, 14 April 13
    • Sencha Touch by Sencha 66Sunday, 14 April 13
    • Tomorrow’s mini Workshop Prepare to tag along: Sencha Cmd Sencha Touch 2.1.1 GPL 67Sunday, 14 April 13
    • QUESTIONS 68Sunday, 14 April 13
    • Thank you for listening mdkeijzer@ibuildings.nl @Martin1982Sunday, 14 April 13