Modular applications with Montage Components

montagejs.org Benoît Marchant [email protected] with Montage Components Modular Applications

modules template mobile component HTML5 encapsulated MVC data-binding promises CommonJS
declarative BSD serialization package separation of concerns reusable ECMAScript 5 composition TEAM workflow simplify write once battery gpu cpu applications property change listener CSS framework widgets flow repetition condition substitution text button loader list progress slider input audio slot video checkbox radio toggle textfield event cross-platform deferred drawing

Mobile Applications

HTML5 vs Native

HTML5 vs Native Janky User Experience

HTML5 vs Native Janky User Experience Longer Development Time

HTML5 vs Native Janky User Experience Longer Development Time Higher
Development Cost

HTML5 vs Native Janky User Experience Longer Development Time Higher
Development Cost Harder to Iterate

Modular Applications

Simple Application

Large Application

Montage Application Refactor

Refactor Montage Application

Popcorn Demo montagejs.org/apps/popcorn/

Component Assigned one DOM Element MVC Structure From Widget to
App Speciﬁc Deferred Drawing Template

Deferred Drawing Maximize Performance Orchestrate DOM Changes Third Party Components
Degrade Gracefully willDraw() / draw() / didDraw()

Template Full HTML5 document Resource Encapsulation Object Serialization Great JS
/ CSS Team Work Automatic Dependencies Load .reel HTML JS CSS

Identify Components

Main Component Loads data from Web Service Relies on sub-components
for presentation

Movie Content Navigation

Movie Content Navigation Components establish their own API to accept
data through properties or methods Main Movie Categories Event to change CategoryId Selected CategoryId

Main Movie Categories Event to change CategoryId Selected CategoryId

Movie Content

Movie Content Flow Component Movie Detail Component

Movie Detail Component Flow Component Movie Content moviesController selectedMovie

<html> ... <body> <div data-montage-id="facade-flow" class="facade-flow"> <div data-montage-id="flow" class="flow flow-fade-out">
<div data-montage-id="image" class="Image"></div> </div> <div class="film"></div> <div data-montage-id="details"></div> </div> </body> </html> Main.reel/Main.html

<div data-montage-id="facade-flow" class="facade-flow"> <div data-montage-id="flow" class="flow flow-fade-out"> <div data-montage-id="image" class="Image"></div>
</div> <div class="film"></div> <div data-montage-id="details"></div> </div> Markup Object Serialization <script type="text/montage-serialization"> { "owner": { "properties": { "element": {"#": "facade-flow"} } }, ...

</div> <div class="film"></div> <div data-montage-id="details"></div> </div> <script type="text/montage-serialization"> { "owner": { "properties": { "element": {"#": "facade-flow"} } }, ...

"flow": { "prototype": "montage/ui/flow.reel", "properties": { "element": {"#": "flow"}, "cameraFov":
36.99, "cameraTargetPoint": [0, 0, 0], "stride": 1 }, "bindings": { "contentController": {"<-": "@owner.moviesController"} } }, <div data-montage-id="facade-flow" class="facade-flow"> <div data-montage-id="flow" class="flow flow-fade-out"> <div data-montage-id="image" class="Image"></div> </div> <div class="film"></div> <div data-montage-id="details"></div> </div> Module Id

36.99, "cameraTargetPoint": [0, 0, 0], "stride": 1 }, "bindings": { "contentController": {"<-": "@owner.moviesController"} } }, <div data-montage-id="facade-flow" class="facade-flow"> <div data-montage-id="flow" class="flow flow-fade-out"> <div data-montage-id="image" class="Image"></div> </div> <div class="film"></div> <div data-montage-id="details"></div> </div> Setting Property Values

36.99, "cameraTargetPoint": [0, 0, 0], "stride": 1 }, "bindings": { "contentController": {"<-": "@owner.moviesController"} } }, <div data-montage-id="facade-flow" class="facade-flow"> <div data-montage-id="flow" class="flow flow-fade-out"> <div data-montage-id="image" class="Image"></div> </div> <div class="film"></div> <div data-montage-id="details"></div> </div> data binding

</div> <div class="film"></div> <div data-montage-id="details"></div> </div> "details": { "prototype": "ui/details.reel", "properties": { "element": {"#": "details"} }, "bindings": { "data": {"<-": "@owner.selectedMovie" } } },

Movie Detail

Movie Detail Title Synopsis Trailer Button Rent Button Release Date
Runtime Audience Critics

Movie Detail Components DynamicText DynamicText DynamicText DynamicText Dynamic Text Dynamic
Text Button Button

Movie Detail Title Description Date Runtime Audience Critics Trailer Button
Rent Button data.title data.date actionEvent actionEvent data.criticScore data.synopsis data.runtime data.audienceScore

Trailer Button action event

"trailerButton": { "prototype": "montage/ui/button.reel", "properties": { "element": {"#": "trailer-button"} },
"listeners": [ { "type": "action", "listener": {"@": "owner"} } ] }, <button data-montage-id="trailer-button">Trailer</button> Listeners

"listeners": [ { "type": "action", "listener": {"@": "owner"} } ] }, <button data-montage-id="trailer-button">Trailer</button> Object Reference

"listeners": [ { "type": "action", "listener": {"@": "owner"} } ] }, handleTrailerButtonAction: { value: function(event) { ... } } handleAction handleEvent Owner EventHandling Method Precedence

Mop it!

Modular Applications Encapsulated Components HTML5 Templates Scale Larger Team/Projects Shorter
Development Time Easier to Refactor

A modern HTML5 framework montagejs.org Benoît Marchant [email protected] Fork me
on GitHub

Modular applications with Montage Components

Modular applications with Montage Components

More Decks by Benoit Marchant

Other Decks in Programming

Featured

Transcript