Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Hybrid Mobile Web Apps with Sencha Touch 2 Slide 1 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 2 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 3 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 4 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 5 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 6 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 7 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 8 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 9 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 10 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 11 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 12 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 13 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 14 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 15 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 16 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 17 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 18 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 19 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 20 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 21 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 22 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 23 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 24 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 25 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 26 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 27 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 28 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 29 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 30 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 31 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 32 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 33 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 34 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 35 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 36 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 37 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 38 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 39 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 40 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 41 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 42 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 43 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 44 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 45 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 46 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 47 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 48 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 49 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 50 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 51 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 52 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 53 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 54 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 55 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 56 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 57 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 58 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 59 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 60 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 61 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 62 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 63 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 64 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 65 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 66 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 67 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 68 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 69 Hybrid Mobile Web Apps with Sencha Touch 2 Slide 70
Upcoming SlideShare
Een introductie voor Phpunit
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

Hybrid Mobile Web Apps with Sencha Touch 2

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Hybrid Mobile Web Apps with Sencha Touch 2

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

    Mar. 13, 2014

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.

Views

Total views

3,170

On Slideshare

0

From embeds

0

Number of embeds

98

Actions

Downloads

98

Shares

0

Comments

0

Likes

1

×