Hybrid Mobile Web Apps with Sencha Touch 2

  • 1,733 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,733
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
320
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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