Exceeding expectations: how the MontageJS Draw cycle helps HTML5 apps rival the native experience

Delivering complex mobile experiences with HTML5 that match consumers high expectations is still very challenging. This talk explains how the Draw Cycle in the MontageJS open source HTML5 Framework minimizes expensive layout reflows to provide high quality user experience, particularly on mobile devices.

Transcript

1. JSConfUY Exceeding Expectations TM Benoît Marchant CEO / Co-Founder montagestudio.com @montagejs benoit@montagestudio.com ✉ ! With MontageJS Draw Cycle
2. 25th ANNIVERSARY World Wide Web
5. “I could do in a couple of months on the NeXT what would take more like a year on other platforms” Tim Berners-Lee Inventor of the World Wide Web 6X Faster
6. 35 Years of Engineering
7. 35 Years of Engineering
8. Single Page Applications SDK SDK Cloud Data Data Data Android HTML5 iOS
9. Proven Patterns
10. Proven Patterns .reel HTML JS CSS Templates Component Deferred Drawing
11. DOM Read-Write Interleaving Object Trashing Unnecessary DOM Updates CSS Rendering Cost User Experience is Key CHALLENGES
12. .reel HTML JS CSS Templates Component Deferred Drawing
13. User Experience is Key
14. User Experience is Key
15. Component Assigned one DOM Element MVC From Widget to App Structure Template
16. HTML5 Templates Full HTML5 document Resource Encapsulation Object Serialization with CommonJS Breakthrough JS / CSS Team Work .reel HTML JS CSS
17. Application Flow Render Logic Input 60 fps - 16.66 ms
18. Application Flow Render Logic Input You
19. Deferred Drawing Decouple Render Logic Maximize Performance Orchestrate DOM Changes Third Party Components
20. Draw Cycle Component: this.needsDraw = true;
21. Draw Cycle prepareForDraw() 1 Depth First
22. Draw Cycle willDraw() 1 Depth First
23. Draw Cycle draw() 2 Depth First
24. Draw Cycle didDraw() 3 Depth First
25. Demos
26. Exclusive Preview
27. Interactive Authoring
28. montagestudio.com/reveal/
29. JSConfUY Exceeding Expectations TM Benoît Marchant CEO / Co-Founder montagestudio.com @montagejs benoit@montagestudio.com ✉ ! With MontageJS Draw Cycle