Hybrid Mobile Web Apps with Sencha Touch 2

2,954 views

Published on

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.

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,954
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
98
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×