Modular applications with montage components

Modular Applications
with Montage Components

Benoît Marchant

benoit@montagejs.org montagejs.org

TEAM CSS
data-binding
property change

HTML5
workflow

template
serialization

reusable simplify listener

component
separation of concerns encapsulated event

MVC
declarative

framework

BSD CommonJS
composition
deferred drawing textfield loader substitution

widgets
toggle flow repetition condition

modules
promises radio button
slider
applications
video
progress text
checkbox slot

mobile
audio list input

ECMAScript 5
package write once cpu gpu battery

cross-platform

HTML5 vs Native

Janky User Experience

HTML5 vs Native


Longer Development Time

HTML5 vs Native



Higher Development Cost

HTML5 vs Native



Higher Development Cost

Harder to Iterate

Montage Application

Refactor

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
HTML JS CSS
Resource Encapsulation

.reel Object Serialization
Great JS / CSS Team Work
Automatic Dependencies Load

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

Movie Categories

Main Navigation
Event to change CategoryId

Selected CategoryId

Components Movie Content
establish their own
API to accept data
through properties
or methods

Movie Categories

Main
Event to change CategoryId

Selected CategoryId

Movie Content

Flow Component

Movie Detail Component

Movie Content moviesController

Flow Component

selectedMovie

Movie Detail Component

Main.reel/Main.html
<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>

Markup
</div>
</div>

Object Serialization
<script type="text/montage-serialization">
{
"owner": {
"properties": {
"element": {"#": "facade-flow"}
}
},

...

</div>
</div>

<script type="text/montage-serialization">
{
"owner": {
"properties": {
"element": {"#": "facade-flow"}
}
},

...

</div>
</div>

"flow": {
"prototype": "montage/ui/flow.reel", Module Id
"properties": {
"element": {"#": "flow"},
"cameraFov": 36.99,
"cameraTargetPoint": [0, 0, 0],
"stride": 1
},
"bindings": {
"contentController": {"<-": "@owner.moviesController"}
}
},

</div>
</div>

"flow": {
"prototype": "montage/ui/flow.reel",
"properties": {
"cameraFov": 36.99, Setting
"stride": 1
Property Values
},
"bindings": {
}
},

</div>
</div>

"flow": {
"prototype": "montage/ui/flow.reel",
"properties": {
"cameraFov": 36.99, data binding
"stride": 1
},
"bindings": {
}
},

</div>
</div>

"details": {
"prototype": "ui/details.reel",
"properties": {
"element": {"#": "details"}
},
"bindings": {
"data": {"<-": "@owner.selectedMovie" }
}
},

Movie Detail

Title
Release Date Runtime Audience Critics

Trailer Button

Synopsis Rent Button

Movie Detail Components

DynamicText
DynamicText DynamicText Dynamic Text Dynamic Text

Button

DynamicText Button

Movie Detail
Title
data.title

data.criticScore
data.date
Critics
data.runtime
data.audienceScore actionEvent
Date Runtime Audience
Trailer Button
data.synopsis

actionEvent

Description Rent Button

<button data-montage-id="trailer-button">Trailer</button>

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

<button data-montage-id="trailer-button">Trailer</button>

"trailerButton": {
"properties": {
},
"listeners": [
{
"type": "action",
"listener": {"@": "owner"}
Object
} Reference
]
},

"trailerButton": {
"properties": {
},
"listeners": [
{
"type": "action",
"listener": {"@": "owner"}
}
]
},

handleTrailerButtonAction: {
Owner value: function(event) {
...
EventHandling }
Method }
handleAction
Precedence
handleEvent

Modular Applications

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

Fo
rk
me
on
Gi
tH
ub
A modern HTML5 framework

benoit@montagejs.org Benoît Marchant montagejs.org

Modular applications with montage components

More Related Content

What's hot

Viewers also liked

Similar to Modular applications with montage components

Recently uploaded

Modular applications with montage components