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

Hybrid Mobile Web Apps with Sencha Touch 2

2,007

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,007
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
325
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hybrid Mobile Web Apps with Sencha Touch 2

  1. 1. with Sencha Touch 2 Martin de Keijzer iOSOnRailsConf 2013 13-14 April, Alushta Ukraine Building mobile web applications Sunday, 14 April 13
  2. 2. Introduction 2 Sunday, 14 April 13
  3. 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. 4. The mobile web 4 Sunday, 14 April 13
  5. 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. 6. Web Apps 6 Available through the web 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 9 Can be wrapped as native apps 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. Rapidly starting Sencha Cmd 12 Sunday, 14 April 13
  13. 13. Quick start: Sencha Cmd 13 sencha generate app <name> <path> Sunday, 14 April 13
  14. 14. Quick start: Sencha Cmd 14 •App •Resources •app.js •.json files •index.html •touch (DO NOT TOUCH!) Sunday, 14 April 13
  15. 15. Changing the SDK is bad! Extending is ok. 15 Sunday, 14 April 13
  16. 16. Testing 16 Webkit Sunday, 14 April 13
  17. 17. Setting up views Interface design 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 19app/view/Technologies.js Sunday, 14 April 13
  20. 20. Creating views 20 http://docs.sencha.com Sunday, 14 April 13
  21. 21. Creating views 21 /app.js Sunday, 14 April 13
  22. 22. Creating views 22app/view/Main.js Sunday, 14 April 13
  23. 23. Creating views 23 Sunday, 14 April 13
  24. 24. Bootstrapping & Controllers Taking control 24 Sunday, 14 April 13
  25. 25. Bootstrapping and Controllers 25 /app.js Final point of bootstrapping, controllers & profiles go first Sunday, 14 April 13
  26. 26. Bootstrapping and Controllers 26 Sunday, 14 April 13
  27. 27. Events 27 Create a new controller sencha generate controller <name> Sunday, 14 April 13
  28. 28. Events 28 Make the component selectable Sunday, 14 April 13
  29. 29. Events 29app/controller/TechnologiesTab.js Sunday, 14 April 13
  30. 30. Events 30 app/controller/TechnologiesTab.js Sunday, 14 April 13
  31. 31. Events 31 Querying Predefined events Sunday, 14 April 13
  32. 32. Events 32app/controller/TechnologiesTab.js Sunday, 14 April 13
  33. 33. Events 33 Sunday, 14 April 13
  34. 34. and communication Data binding 34 Sunday, 14 April 13
  35. 35. Data communication 35 Sunday, 14 April 13
  36. 36. Model 36 Model Field Association Validation Sunday, 14 April 13
  37. 37. Model 37 sencha generate model <name> <property:type,[property:type]...> Sunday, 14 April 13
  38. 38. Model 38app/model/Technologies.js Sunday, 14 April 13
  39. 39. Store 39 Store Model Filter Grouper Sorter Sunday, 14 April 13
  40. 40. Store 40 app/store/Technologies.js app.js Sunday, 14 April 13
  41. 41. Proxy 41 Proxy Reader Writer Store Model Sunday, 14 April 13
  42. 42. Proxy 42 app/model/Technologies.js Sunday, 14 April 13
  43. 43. Create a list 43app/view/Technologies.js Sunday, 14 April 13
  44. 44. Data in action! 44 Sunday, 14 April 13
  45. 45. When an OS doesn’t play well with your app Device profiles 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 49 sencha generate profile <name> Sunday, 14 April 13
  50. 50. Profile overriding 50 app/view/Desktop/Main.js Sunday, 14 April 13
  51. 51. Profile overriding 51 app/view/Tablet/Main.js Sunday, 14 April 13
  52. 52. Profile overriding 52 app/view/Phone/Main.js Sunday, 14 April 13
  53. 53. Profile overriding 53 app/profile/Tablet.js Sunday, 14 April 13
  54. 54. Profile overriding 54 Desktop Sunday, 14 April 13
  55. 55. Profile overriding 55 Phone Sunday, 14 April 13
  56. 56. Profile overriding 56 Tablet Sunday, 14 April 13
  57. 57. Styling an app Your app’s got style! 57 Sunday, 14 April 13
  58. 58. Sunday, 14 April 13
  59. 59. Installing Compass 59 gem install compass Sunday, 14 April 13
  60. 60. The scss file 60 compass compile compass watch Extension: .scss Sunday, 14 April 13
  61. 61. The scss file 61resources/sass/app.scss Sunday, 14 April 13
  62. 62. Compass Variables 62 touch/resources/ themes/ stylesheets/ sencha-touch/ default/ _variables.scss 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? 65 http://www.github.com/ Martin1982/ iOSOnRailsConf Sunday, 14 April 13
  66. 66. 66 Sencha Touch by Sencha Sunday, 14 April 13
  67. 67. 66 Sencha Touch by Sencha Sunday, 14 April 13
  68. 68. Tomorrow’s mini Workshop 67 Prepare to tag along: Sencha Cmd Sencha Touch 2.1.1 GPL Sunday, 14 April 13
  69. 69. QUESTIONS 68 Sunday, 14 April 13
  70. 70. mdkeijzer@ibuildings.nl @Martin1982 Thank you for listening Sunday, 14 April 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×