WHY 

MONTAGEJS?


LUIS CAL

@_luisalbertocal
JSConfUY Co-Organizer
Globant - Frontend Dev




WHY 

MONTAGEJS?


etc.


&yet 


None of them are 

oriented to mobile devices




MontageJS is a

front-end FULL-STACK framework

OPTIMIZED for MOBILE devices






MontageJS takes advantage of the HTML5 API

Quick Overview


Reusable Components

High Performance





Logicless, Declarative 



Functional Reactive
Bindings (FRB)
HTML5 templates




Reusable Components



  • Assigned 1 DOM element
  • MVC Structure
  • Deferred Drawing
  • Template 

               Basically, everything in MontageJS is a Component

Template




  • Full HTML5 Document
  • Resource encapsulation
  • Object serialization
  • Automatic dependencies loaded

FRB




  • Propagate changes between object properties
  • Can be 1-way (<-) or 2-way (<->)
  • Bind to other components or regular JS objects

High performance



" MontageJS supports implicit event delegation and a managed draw cycle. This minimizes expensive layout reflows to provide a better user experience, particularly on hardware-limited mobile devices. "


Draw cycle

Draw cycles are scheduled automatically using the 
requestAnimationFrame() method if supported or, 
as a fallback, setTimeout().

2 Phases:

(Component.needsDraw = true)

  1. Request draw phase
  2. Draw phase

Montagejs draw manager




it ensures that read/write 

operations to the DOM are not interleaved while keeping 

components unaware of each other.

draw cycle - phase 1



Building the Draw List

Looks-up the component's tree and adds to the 
list those whose property "needsDraw" is set to True. 

If a component in the draw list is participating in a draw cycle 
for the first time, the prepareForDraw() event callback 
method is invoked at the very beginning of the draw cycle

DRAW CYCLE - PHASE 2



Executing the Draw List

 Invokes the draw() method on every 
component in the list. 

If the components need to read the final state of a draw cycle, 
after all draw() functions have been performed,
didDraw() is called on each component in the draw list



Each component has these callbacks methods, 
which are involved in the Draw Cycle

  • prepareForDraw()
  • willDraw()
  • draw() - DOM manipulation
  • didDraw()

object serialization



Each component's template has 2 parts:


  1. Object serialization
  2. Complete and valid HTML document





montagejs app architecture



DEMO



questions?



thanks!



Q&A

LINKS

Why MontageJS?

By Luis Cal

Made with Slides.com

Why MontageJS?

  • 1,727

More from Luis Cal