JSConf UY Exceeding Expectations With MontageJS Draw Cycle

JSConfUY Exceeding Expectations

TM

Benoît Marchant CEO / Co-Founder

montagestudio.com @montagejs [email protected]✉

!

With MontageJS Draw Cycle

25th

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 Inventor of the World Wide Web

6X Faster

35 Years of Engineering

35 Years of Engineering

Single Page Applications

SDKSDK

Cloud

DataDataData

Android HTML5 iOS

Proven Patterns

Proven Patterns

.reelHTML JS CSS

Templates Component Deferred Drawing

DOM Read-Write Interleaving

Object Trashing

Unnecessary DOM Updates

CSS Rendering Cost

User Experience is Key

CHALLENGES

.reelHTML 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 Work

.reelHTML JS CSS

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 [email protected]✉

!

With MontageJS Draw Cycle