Under the hood of Sencha Touch Scheduler

Slides from London Sencha Touch User Group - Nov 5th 2012

Transcript

1. Under the hood - Sencha Touch Scheduler (C) 2012 Mats Bryntse www.bryntum.com Tuesday, November 6, 12
2. Agenda Our journey towards Sencha Touch Sharing code between Ext JS and ST Structuring a big ST Component Challenges we faced Some Tips & tricks Tuesday, November 6, 12
3. About me Mats Bryntse Helsingborg, Sweden Background in ASP.NET Sencha enthusiast since 2007 Founded Bryntum 2009 (Gantt/Scheduler/Siesta) @bryntum facebook.com/bryntum Tuesday, November 6, 12
4. Some background 2009: Ext Scheduler 0.9 2010: Sencha Touch 1.0 2011: Ext JS 4 2011: Ext Scheduler 2.0 2012: Sencha Touch 2.0 2012: ST Scheduler 1.0 Tuesday, November 6, 12
5. 2009: Our setup Y Y Tuesday, November 6, 12
6. 2011: Our setup Y Y Y Y 2x code size Tuesday, November 6, 12
7. 2011: Client requests Lots of requests for a Touch enabled scheduler 1 small problem - no ST grid Fall 2011, work began on UberGrid Tuesday, November 6, 12
8. Our goal Y Y Y Y 2.0 3x code size Tuesday, November 6, 12
9. Our revised goal Y Y Y Y 2.0 2.5x code size Core Tuesday, November 6, 12
10. What can be shared? View classes - No Data classes - Yes Core DOM classes - Yes Tuesday, November 6, 12
11. st-sch-all-debug.js 12k lines in total 4k for underlying grid 7k shared with Ext JS version Tuesday, November 6, 12
12. st-sch-all-debug.js 12 - 4 - 7 = only 1000 lines of ST scheduler code Sounds fantastic, right? Tuesday, November 6, 12
13. Tuesday, November 6, 12
14. Tradeoff + Minimum amount of ST specific code + Less duplication, DRY - Maintainability (Cannot use full Ext JS API) - Extra normalization code required - Extra comments + careful testing required Tuesday, November 6, 12
15. Shared code package if (Ext.versions.touch) { store.on({ addrecords : me.onEventAdd, updaterecord : me.onEventUpdate, removerecords : me.onEventRemove }); } else { store.on({ add : me.onEventAdd, update : me.onEventUpdate, remove : me.onEventRemove }); } Tuesday, November 6, 12
16. Shared code package var clickEventName = isTouch ? 'tap' : 'click'; Tuesday, November 6, 12
17. ! Sharing code: Gotchas In ST, Ext.get uses ‘smart’ caching Component.element vs Component.el ST Config system, not in Ext JS (yet) Store event names ‘render’ vs ‘painted’ component events No AbstractPlugin class in ST Tuesday, November 6, 12
18. Structuring a big component Tuesday, November 6, 12
19. Scheduler features Zone plugin Drag drop & pinch feature “Tap to create” feature “Side pull” feature Date Line plugin “Pinch-zoom” feature Tuesday, November 6, 12
20. Strategies Same concepts as when building an application Avoid huge monolithic classes Isolate features into managable classes (e.g. drag drop) Mixins Plugins Separate Model from View classes (=> testability) Tuesday, November 6, 12
21. Consuming plugins plugins : [ new Sch.plugin.Zones({ innerTpl : '<span class="zone-type">{Type}</span>', store : zoneStore }), new Sch.plugin.Lines({ store : lineStore }) ], Tuesday, November 6, 12
22. Inside our touch SDK Tuesday, November 6, 12
23. Don’t forget configurability if (this.enableEventDragDrop) { var config = Ext.apply({ scheduler : this, view : this.getSchedulingView() }, this.eventDragDropConfig); this.dragDrop = new Sch.feature.DragDrop(config); } Tuesday, November 6, 12
24. Challenges Tuesday, November 6, 12
25. Drag drop challenge #1 First version used ‘longpress’ as trigger Users struggled to drag an event bar => no good Tuesday, November 6, 12
26. ‘longpress’ is just toooo long (1 sec). Option #1: Redefine ‘longpress’ globally (HACK) Option #2: Create our own Recognizer We went with #2, ‘semilongpress’ (400ms) Drag drop challenge #1 Tuesday, November 6, 12
27. Drag drop challenge #2 Keeping finger perfectly still for 400ms is hard Had to provide a move tolerance Tuesday, November 6, 12
28. Ext.define('Sch.recognizer.SemiLongPress', { extend: 'Ext.event.recognizer.SingleTouch', moveTolerance : 5, onTouchMove: function(e) { if (movedX > this.moveTolerance || movedY > this.moveTolerance) { return this.fail(this.self.TOUCH_MOVED); } } }); Drag drop challenge #2 Tuesday, November 6, 12
29. Drag drop challenge #3 Saw lots of flickering (DOM reflow) during drag drop Solution, set: position:absolute; on the parent element of draggable. Tuesday, November 6, 12
30. Avoiding DOM bloat Use buffered rendering of views & lists Our underlying grid supports col locking + buffering Ext.select(‘*’).getCount() Tuesday, November 6, 12
31. Performance Opacity < 1 Images (resolution, sprites) -webkit-gradient text-shadow box-shadow Tuesday, November 6, 12
32. Memory Ext.get vs Ext.fly Event delegation Script minification Tuesday, November 6, 12
33. Ext.Element.cache delete Ext.Element.cache[ id ]; Tuesday, November 6, 12
34. Tips & tricks Tuesday, November 6, 12
35. Tips & tricks Ok to use raw DOM, raw JS. (Windows Phone?) CSS3 at your disposal, but remember perf Newer ECMA features seal/freeze Beware of opacity < 1, can be slow translate3d (consumes memory) Tuesday, November 6, 12
36. Thanks for listening! Questions? Tuesday, November 6, 12