Sencha Touch 2 application development introduction from the SmartDevCon conference in Katowice, Poland

1. 4Developers (Poznan, Poland) / April 18th 2012
Martin de Keijzer
Building mobile web applications
with Sencha Touch 2
woensdag 18 april 12

2. About me
Martin de Keijzer
Dutch web developer
2
@Martin1982
PHPBenelux Board Member
Working for Ibuildings
http://www.martindekeijzer.nl
woensdag 18 april 12

3. Why mobile?
3
woensdag 18 april 12

4. Apps
Languages
Apple: Objective-C
Android: Java
Windows Phone: C# / Visual Basic
4
Distribution Methods
Apple: AppStore
Android: Market
Windows Phone: Microsoft Market Place
woensdag 18 april 12

5. Web Apps
Available through the web
Platform independent
Can be transformed to an App-like experience
Can be wrapped as native apps
5
woensdag 18 april 12

6. woensdag 18 april 12

7. 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
7
woensdag 18 april 12

8. Getting started
8
woensdag 18 april 12

9. Quick start: Sencha Command
9
sencha generate app <name> <path>
woensdag 18 april 12

10. Quick start: Sencha Command
10
•App
•Resources
•SDK (DO NOT TOUCH!)
•app.js
•.json files
•index.html
woensdag 18 april 12

11. Quick Start: Sencha Command
11
Webkit
woensdag 18 april 12

12. User interface
Abstraction of various app-interface ui elements:
containers
panels
tabpanels
carousels
lists
forms
toolbars
12
woensdag 18 april 12

13. Creating views
13
app/view/Pictures.js
woensdag 18 april 12

14. Creating views
14
woensdag 18 april 12

15. Creating views
15
/app.js
woensdag 18 april 12

16. Creating views
16
app/view/Main.js
woensdag 18 april 12

17. Creating views
17
woensdag 18 april 12

18. Creating views
17
woensdag 18 april 12

19. Taking control
18
woensdag 18 april 12

20. Bootstrapping and Controllers
19
/app.js
Final point of bootstrapping,
controllers & profiles go first
woensdag 18 april 12

21. Bootstrapping and Controllers
20
woensdag 18 april 12

22. Events
21
Make the component selectable
Create a new controller
woensdag 18 april 12

23. Events
22
app/controller/PictureBox.js
woensdag 18 april 12

24. Events
23
app/controller/PictureBox.js
woensdag 18 april 12

25. Events
24
Querying
Predefined events
woensdag 18 april 12

26. Events
25
woensdag 18 april 12

27. Data Communication
26
woensdag 18 april 12

28. Data communication
27
woensdag 18 april 12

29. Model
28
Model
Field
Association Validation
woensdag 18 april 12

30. Model
29
app/model/Talk.js
woensdag 18 april 12

31. Store
30
Store
Model
Filter Grouper Sorter
woensdag 18 april 12

32. Store
31
app/store/Schedule.js
app.js
woensdag 18 april 12

33. Proxy
32
Proxy
Reader Writer
Store Model
woensdag 18 april 12

34. Proxy
33
app/model/Talk.js
woensdag 18 april 12

35. Create a list
34
app/view/Schedule.js
woensdag 18 april 12

36. Create a list
35
app.js
woensdag 18 april 12

37. Create a list
36
app/view/Main.js
woensdag 18 april 12

38. Data in action!
37
woensdag 18 april 12

39. Device profiles
38
woensdag 18 april 12

40. Device profiles
Different devices require different options.
Tablet has more screen real estate and can provide more
user interaction than a phone.
Sencha Touch 2 provides profiles to build concrete
implementations of the device functionalities.
39
woensdag 18 april 12

41. Profile setup
40
woensdag 18 april 12

42. Profile overriding
41
app/controller/phone/PictureBox.js
app/controller/tablet/PictureBox.js
woensdag 18 april 12

43. Profile overriding
42
app/profile/Phone.js
woensdag 18 april 12

44. Profile overriding
43
Desktop
woensdag 18 april 12

45. Profile overriding
44
Phone
woensdag 18 april 12

46. Profile overriding
45
Tablet
woensdag 18 april 12

47. Theme editing
46
woensdag 18 april 12

48. woensdag 18 april 12

49. Installing Compass
48
gem install compass
woensdag 18 april 12

50. The scss file
49
compass compile
compass watch
Extension: .scss
woensdag 18 april 12

51. The scss file
50
woensdag 18 april 12

52. Compass Variables
51
sdk/resources/themes/
stylesheets/sencha-touch/
default/_variables.scss
woensdag 18 april 12

53. Compass Mixins
52
woensdag 18 april 12

54. Tips and conclusions
53
woensdag 18 april 12

55. Quick Tips
•Well documented on http://docs.sencha.com
•Sencha Command
•Sencha Designer 2 Beta
•Keep your views clean, use controllers!
•Mobile devices have limited hardware
54
woensdag 18 april 12

56. Need another look?
55
http://www.github.com/
Martin1982/4Developers
woensdag 18 april 12

57. Hungry for more?????
56
June 7 - 8 - 9, 2012
Amsterdam RAI (The Netherlands)
http://mobileconference.nl
Dutch PHP Conference visitors can attend the mobile conference and vice versa!
woensdag 18 april 12

58. Questions ?
57
woensdag 18 april 12

59. Thank you!
Contact details:
Twitter: @Martin1982
mdkeijzer@ibuildings.nl
woensdag 18 april 12

60. Debugging explained
59
Bonus!
woensdag 18 april 12