JSConfUY
Exceeding Expectations
TM
Benoît Marchant
CEO / Co-Founder
montagestudio.com
@montagejs
benoit@montagestudio.com✉...
25
th
ANNIVERSARY
World Wide Web
“I could do in a couple of months on the
NeXT what would take more like a year
on other platforms”
Tim Berners-Lee
Invento...
35 Years of Engineering
35 Years of Engineering
Single Page Applications
SDKSDK
Cloud
DataData
Data
Android HTML5 iOS
Proven Patterns
Proven Patterns
.reel
HTML JS CSS
Templates Component Deferred Drawing
DOM Read-Write Interleaving
Object Trashing
Unnecessary DOM Updates
CSS Rendering Cost
User Experience is Key
CHALLENGES
.reel
HTML JS CSS
Templates Component Deferred Drawing
User Experience is Key
User Experience is Key
Component
Assigned one DOM Element
MVC
From Widget to App Structure
Template
HTML5 Templates
Full HTML5 document
Resource Encapsulation
Object Serialization with CommonJS
Breakthrough JS / CSS Team W...
Application Flow
RenderLogicInput
60 fps - 16.66 ms
Application Flow
RenderLogicInput
You
Deferred Drawing
Decouple Render Logic
Maximize Performance
Orchestrate DOM Changes
Third Party Components
Draw Cycle
Component:
this.needsDraw = true;
Draw Cycle
prepareForDraw()
1
Depth First
Draw Cycle
willDraw()
1
Depth First
Draw Cycle
draw()
2
Depth First
Draw Cycle
didDraw()
3
Depth First
Demos
Exclusive Preview
Interactive Authoring
montagestudio.com/reveal/
JSConfUY
Exceeding Expectations
TM
Benoît Marchant
CEO / Co-Founder
montagestudio.com
@montagejs
benoit@montagestudio.com✉...
JSConf UY Exceeding Expectations With MontageJS Draw Cycle
JSConf UY Exceeding Expectations With MontageJS Draw Cycle
Upcoming SlideShare
Loading in …5
×

JSConf UY Exceeding Expectations With MontageJS Draw Cycle

974 views

Published on

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.

Published in: Engineering, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
974
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JSConf UY Exceeding Expectations With MontageJS Draw Cycle

  1. 1. JSConfUY Exceeding Expectations TM Benoît Marchant CEO / Co-Founder montagestudio.com @montagejs benoit@montagestudio.com✉ ! With MontageJS Draw Cycle
  2. 2. 25 th ANNIVERSARY World Wide Web
  3. 3. “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 6XFaster
  4. 4. 35 Years of Engineering
  5. 5. 35 Years of Engineering
  6. 6. Single Page Applications SDKSDK Cloud DataData Data Android HTML5 iOS
  7. 7. Proven Patterns
  8. 8. Proven Patterns .reel HTML JS CSS Templates Component Deferred Drawing
  9. 9. DOM Read-Write Interleaving Object Trashing Unnecessary DOM Updates CSS Rendering Cost User Experience is Key CHALLENGES
  10. 10. .reel HTML JS CSS Templates Component Deferred Drawing
  11. 11. User Experience is Key
  12. 12. User Experience is Key
  13. 13. Component Assigned one DOM Element MVC From Widget to App Structure Template
  14. 14. HTML5 Templates Full HTML5 document Resource Encapsulation Object Serialization with CommonJS Breakthrough JS / CSS Team Work .reel HTML JS CSS
  15. 15. Application Flow RenderLogicInput 60 fps - 16.66 ms
  16. 16. Application Flow RenderLogicInput You
  17. 17. Deferred Drawing Decouple Render Logic Maximize Performance Orchestrate DOM Changes Third Party Components
  18. 18. Draw Cycle Component: this.needsDraw = true;
  19. 19. Draw Cycle prepareForDraw() 1 Depth First
  20. 20. Draw Cycle willDraw() 1 Depth First
  21. 21. Draw Cycle draw() 2 Depth First
  22. 22. Draw Cycle didDraw() 3 Depth First
  23. 23. Demos
  24. 24. Exclusive Preview
  25. 25. Interactive Authoring
  26. 26. montagestudio.com/reveal/
  27. 27. JSConfUY Exceeding Expectations TM Benoît Marchant CEO / Co-Founder montagestudio.com @montagejs benoit@montagestudio.com✉ ! With MontageJS Draw Cycle

×