This document discusses MontageJS, a JavaScript framework for building high performance single page applications. It highlights features of MontageJS like deferred drawing, draw cycles, templates, and component-based architecture. The document also promotes an upcoming presentation on MontageJS at JSConfUY and provides contact information for the company's CEO and co-founder.

1. JSConfUY
Exceeding Expectations
TM
Benoît Marchant
CEO / Co-Founder
montagestudio.com
@montagejs
benoit@montagestudio.com✉
!
With MontageJS Draw Cycle

2. 25
th
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
6XFaster

6. 35 Years of Engineering

7. 35 Years of Engineering

8. Single Page Applications
SDKSDK
Cloud
DataData
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
RenderLogicInput
60 fps - 16.66 ms

18. Application Flow
RenderLogicInput
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