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.

1. Building mobile web applications
with Sencha Touch 2
Martin de Keijzer
iOSOnRailsConf 2013 13-14 April, Alushta Ukraine
Sunday, 14 April 13

2. Introduction
2
Sunday, 14 April 13

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. The mobile web
4
Sunday, 14 April 13

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. Web Apps
Available through the web
6
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
Can be wrapped as native apps 9
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. Sencha Cmd
Rapidly starting
12
Sunday, 14 April 13

13. Quick start: Sencha Cmd
sencha generate app <name> <path>
13
Sunday, 14 April 13

14. Quick start: Sencha Cmd
•App
•Resources
•app.js
•.json files
•index.html
•touch (DO NOT TOUCH!) 14
Sunday, 14 April 13

15. Changing the SDK is bad! Extending is ok.
15
Sunday, 14 April 13

16. Testing
Webkit 16
Sunday, 14 April 13

17. Interface design
Setting up views
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
app/view/Technologies.js 19
Sunday, 14 April 13

20. Creating views
http://docs.sencha.com
20
Sunday, 14 April 13

21. Creating views
/app.js
21
Sunday, 14 April 13

22. Creating views
app/view/Main.js 22
Sunday, 14 April 13

23. Creating views
23
Sunday, 14 April 13

24. Taking control
Bootstrapping & Controllers
24
Sunday, 14 April 13

25. Bootstrapping and Controllers
/app.js
Final point of bootstrapping,
controllers & profiles go first
25
Sunday, 14 April 13

26. Bootstrapping and Controllers
26
Sunday, 14 April 13

27. Events
sencha generate controller <name>
Create a new controller 27
Sunday, 14 April 13

28. Events
Make the component selectable
28
Sunday, 14 April 13

29. Events
app/controller/TechnologiesTab.js 29
Sunday, 14 April 13

30. Events
app/controller/TechnologiesTab.js
30
Sunday, 14 April 13

31. Events
Querying
Predefined events 31
Sunday, 14 April 13

32. Events
app/controller/TechnologiesTab.js 32
Sunday, 14 April 13

33. Events
33
Sunday, 14 April 13

34. Data binding
and communication
34
Sunday, 14 April 13

35. Data communication
35
Sunday, 14 April 13

36. Model
Model
Field
Association Validation
36
Sunday, 14 April 13

37. Model
sencha generate model <name>
<property:type,[property:type]...>
37
Sunday, 14 April 13

38. Model
app/model/Technologies.js 38
Sunday, 14 April 13

39. Store
Store
Model
Filter Grouper Sorter
39
Sunday, 14 April 13

40. Store
app/store/Technologies.js
app.js 40
Sunday, 14 April 13

41. Proxy
Store Proxy Model
Reader Writer
41
Sunday, 14 April 13

42. Proxy
app/model/Technologies.js
42
Sunday, 14 April 13

43. Create a list
app/view/Technologies.js 43
Sunday, 14 April 13

44. Data in action!
44
Sunday, 14 April 13

45. Device profiles
When an OS doesn’t play well with your app
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
sencha generate profile <name>
49
Sunday, 14 April 13

50. Profile overriding
app/view/Desktop/Main.js
50
Sunday, 14 April 13

51. Profile overriding
app/view/Tablet/Main.js
51
Sunday, 14 April 13

52. Profile overriding
app/view/Phone/Main.js
52
Sunday, 14 April 13

53. Profile overriding
app/profile/Tablet.js
53
Sunday, 14 April 13

54. Profile overriding
Desktop
54
Sunday, 14 April 13

55. Profile overriding
Phone
55
Sunday, 14 April 13

56. Profile overriding
Tablet
56
Sunday, 14 April 13

57. Your app’s got style!
Styling an app
57
Sunday, 14 April 13

58. Sunday, 14 April 13

59. Installing Compass
gem install compass
59
Sunday, 14 April 13

60. The scss file
Extension: .scss
compass compile
compass watch
60
Sunday, 14 April 13

61. The scss file
resources/sass/app.scss 61
Sunday, 14 April 13

62. Compass Variables
touch/resources/
themes/
stylesheets/
sencha-touch/
default/
_variables.scss
62
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?
http://www.github.com/
Martin1982/
iOSOnRailsConf
65
Sunday, 14 April 13

66. Sencha Touch by Sencha
66
Sunday, 14 April 13

67. Sencha Touch by Sencha
66
Sunday, 14 April 13

68. Tomorrow’s mini Workshop
Prepare to tag along:
Sencha Cmd
Sencha Touch 2.1.1 GPL
67
Sunday, 14 April 13

69. QUESTIONS
68
Sunday, 14 April 13

70. Thank you for listening
mdkeijzer@ibuildings.nl
@Martin1982
Sunday, 14 April 13