Transcript
Page 1: 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

Page 2: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

25th

ANNIVERSARY

World Wide Web

Page 3: JSConf UY Exceeding Expectations With MontageJS Draw Cycle
Page 4: JSConf UY Exceeding Expectations With MontageJS Draw Cycle
Page 5: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

“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

Page 6: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

35 Years of Engineering

Page 7: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

35 Years of Engineering

Page 8: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

Single Page Applications

SDKSDK

Cloud

DataDataData

Android HTML5 iOS

Page 9: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

Proven Patterns

Page 10: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

Proven Patterns

.reelHTML JS CSS

Templates Component Deferred Drawing

Page 11: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

DOM Read-Write Interleaving

Object Trashing

Unnecessary DOM Updates

CSS Rendering Cost

User Experience is Key

CHALLENGES

Page 12: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

.reelHTML JS CSS

Templates Component Deferred Drawing

Page 13: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

User Experience is Key

Page 14: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

User Experience is Key

Page 15: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

Component

Assigned one DOM Element

MVC

From Widget to App Structure

Template

Page 16: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

HTML5 Templates

Full HTML5 document

Resource Encapsulation

Object Serialization with CommonJS

Breakthrough JS / CSS Team Work

.reelHTML JS CSS

Page 17: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

Application Flow

RenderLogicInput

60 fps - 16.66 ms

Page 18: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

Application Flow

RenderLogicInput

You

Page 19: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

Deferred Drawing

Decouple Render Logic

Maximize Performance

Orchestrate DOM Changes

Third Party Components

Page 20: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

Draw Cycle

Component:

this.needsDraw = true;

Page 21: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

Draw Cycle

prepareForDraw()

1

Depth First

Page 22: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

Draw Cycle

willDraw()

1

Depth First

Page 24: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

Draw Cycle

didDraw()

3

Depth First

Page 25: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

Demos

Page 26: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

Exclusive Preview

Page 27: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

Interactive Authoring

Page 28: JSConf UY Exceeding Expectations With MontageJS Draw Cycle

montagestudio.com/reveal/

Page 29: 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


Top Related