SenchaCon preso, Sencha Touch Custom Components with Jay Garcia, CTO & Co-Founder, Modus Create.

1. Jay Garcia, CTO & Co-Founder, Modus Create
@ModusJesus
jay@moduscreate.com
Sencha Touch
Custom Components
Monday, July 22, 13

2. Agenda
• Discuss the creation of custom Touch components
• Explore some of the tricks of the trade
• Look at some code that enables custom UI
Monday, July 22, 13

3. About Me
• CTO & Co-Founder Modus Create
• Started with Touch in 2009
• Author of
- Ext JS in Action (3.0 & 4.0)
- Sencha Touch in Action
• Sencha Community supporter
since 2006
Monday, July 22, 13

4. Composite
vs
Custom
Monday, July 22, 13

5. Why create custom
Touch components?
Monday, July 22, 13

6. Custom Functionality!
• Requires us to put our thinking caps on
- Write our own DOM renderers
- Custom styles created
- DOM listeners must be applied
- Interactions must be hand-coded
- House cleaning is up to you!
Monday, July 22, 13

7. Swipe a list item to reveal actions underneath
Monday, July 22, 13

8. Custom carousel with dynamic image loader
Monday, July 22, 13

9. Custom audio FFT data renderer
Monday, July 22, 13

10. What do I need to know
to create custom
components?
Monday, July 22, 13

11. What you need to know
• HTML5 semantics
• CSS3
• SASS, Compass
• Touch component lifecycle basics
• Touch Class System
- Config system
- Extending
- Overriding
- Build process
Monday, July 22, 13

12. Choosing which
component to extend
Monday, July 22, 13

13. Extend Ext.Component
Monday, July 22, 13

14. Custom carousel with dynamic image loader
Monday, July 22, 13

15. Two extensions required for this one!
Monday, July 22, 13

16. The anatomy of a
custom component
Monday, July 22, 13

17. Let’s destruct this one component
Monday, July 22, 13

18. Anatomy of a custom component
Monday, July 22, 13

19. Anatomy of a custom component
Class Name
Monday, July 22, 13

20. Anatomy of a custom component
Monday, July 22, 13

21. Anatomy of a custom component
Superclass
Monday, July 22, 13

22. Anatomy of a custom component
Monday, July 22, 13

23. Anatomy of a custom component
XType
Monday, July 22, 13

24. Anatomy of a custom component
Monday, July 22, 13

25. Anatomy of a custom component
Classes to
require
Monday, July 22, 13

26. Anatomy of a custom component
Monday, July 22, 13

27. Anatomy of a custom component
Config block
Monday, July 22, 13

28. Anatomy of a custom component
Monday, July 22, 13

29. Anatomy of a custom component
Applier
function
Monday, July 22, 13

30. Anatomy of a custom component
Monday, July 22, 13

31. Anatomy of a custom component
Initialize
function
Monday, July 22, 13

32. Anatomy of a custom component
Monday, July 22, 13

33. Anatomy of a custom component
Event
handlers
Monday, July 22, 13

34. Anatomy of a custom component
Monday, July 22, 13

35. Anatomy of a custom component
Utility
methods
Monday, July 22, 13

36. Anatomy of a custom component
Monday, July 22, 13

37. Constructing a custom
Component
Monday, July 22, 13

38. Custom DOM
Monday, July 22, 13

39. Custom DOM
JiT instance
of XTemplate
Monday, July 22, 13

40. Custom DOM
Monday, July 22, 13

41. Custom DOM
Light DOM
Monday, July 22, 13

42. Custom DOM
Monday, July 22, 13

43. Register event listeners
Monday, July 22, 13

44. Register event listeners
Register drag
events
Monday, July 22, 13

45. Register event listeners
Monday, July 22, 13

46. Custom animations
Monday, July 22, 13

47. Custom animations
Animate
elements
Monday, July 22, 13

48. Custom animations
Monday, July 22, 13

49. Cleanup
Monday, July 22, 13

50. Cleanup
Create post-
transition
event handler
Monday, July 22, 13

51. Cleanup
Monday, July 22, 13

52. Cleanup
Register
event handler
Monday, July 22, 13

53. Cleanup
Monday, July 22, 13

54. Cleanup
Invoke reset
animation
Monday, July 22, 13

55. Cleanup
Monday, July 22, 13

56. Cleanup
Initiate
cleanup
Monday, July 22, 13

57. Cleanup
Monday, July 22, 13

58. Cleanup part 2
Monday, July 22, 13

59. Cleanup part 2
Destroy
element
Monday, July 22, 13

60. Cleanup part 2
Monday, July 22, 13

61. Custom component
tasks
Monday, July 22, 13

62. Custom carousel with dynamic image loader
Monday, July 22, 13

63. App details
• Mashup of Rotten Tomatoes &
YouTube APIs
- Uses a custom proxy for data
retention
- Silk JS & Redis
• Recreates the feel of the Netflix
mobile application
Monday, July 22, 13

64. Problem
• All trailer images download at the
same time
• SLOW on 3G!
- Could incur data usage for users
unnecessarily
• How do we fix this?
Monday, July 22, 13

65. Solution
• Custom extension to Container
• Listens to scroller scroll event
- Loads images when they need to be
Monday, July 22, 13

66. Configure custom DOM
Monday, July 22, 13

67. Register event listeners
Monday, July 22, 13

68. Register event listeners
Scroll event
listener
Monday, July 22, 13

69. Register event listeners
Monday, July 22, 13

70. Load images on demand
Monday, July 22, 13

71. Load images on demand
Load
image
Monday, July 22, 13

72. Load images on demand
Monday, July 22, 13

73. DEMO
Monday, July 22, 13

74. Custom audio FFT data renderer
Monday, July 22, 13

75. App details
• Amiga Mod music Player
• Touch 2.2.1 UI
• Driven by custom PhoneGap plugin
- C++ Library wrapped with ObjC
• Renders FFT audio data
• Custom Canvas component
- Three different modes
• Really fast!!
- 20ms return cycle
Monday, July 22, 13

76. DEMO
Monday, July 22, 13

77. How this app works
LibBass
C++
LibBass
C++
Cordova Plugin
ObjectiveC
Cordova
Sencha Touch
Monday, July 22, 13

78. How this app works
LibBass
C++
LibBass
C++
Cordova Plugin
ObjectiveC
Cordova
Sencha Touch
• Directory contents
• Load a song
• Play a song
• Get song FFT data
Monday, July 22, 13

79. How this app works
LibBass
C++
LibBass
C++
Cordova Plugin
ObjectiveC
Cordova
Sencha Touch
• Directory contents
• Load a song
• Play a song
• Get song FFT data
20ms
Monday, July 22, 13

80. Poll Cordova for data
Monday, July 22, 13

81. Poll Cordova for data
Update data
on View
Monday, July 22, 13

82. Poll Cordova for data
Monday, July 22, 13

83. Render data
Monday, July 22, 13

84. Render data
Monday, July 22, 13

85. Render data
Clear canvas
Monday, July 22, 13

86. Render data
Monday, July 22, 13

87. Render data
Update
canvas
Monday, July 22, 13

88. Render data
Monday, July 22, 13

89. Resources
Monday, July 22, 13

90. Resources
Monday, July 22, 13

91. More about custom components
Friday 11:30AM
Room E2
Monday, July 22, 13

92. Wrapping up
• Think speed
• Light DOM
• Optimized JavaScript
• Write your own event handlers
• Clean up after yourself!
• Remove unnecessary event handlers
• Remove DOM when not needed
Monday, July 22, 13

93. Take the Survey!
• Session Survey
- Available on the SenchaCon
mobile app
- http://app.senchacon.com
• Be Social!
- @SenchaCon
- #SenchaCon
- @ModusJesus
- @ModusCreate
Monday, July 22, 13