Shave that handlebar moustache for elegance with Montage templates

Shave that handlebar moustache
For the elegance of Montage
Component-Oriented Templates
Benoit Marchant

CEO & Founder
montagestudio.com
@montagejs
✉ benoit@montagestudio.com

tem·plate
/ˈ templət /
noun
1. A shaped piece of metal, wood, card,
plastic, or other material used as a pattern
for processes such as painting, cutting out,
shaping, or drilling.

tem·plate
/ˈ templət /
noun
2. Computing: a preset format for a
document or ﬁle, used so that the format
does not have to be recreated each time it
is used. DRY

Classic Server Applications
Browser Server
Templates
Data
{%}
HTML
HTTP

Important Template Attributes
High Performance, on Mobile60fps

High Performance, on Mobile
Expressive: Repetition, Condition, Custom
?

Expressive: Loop, Condition, Custom
Composability

Composability
Separation of Concerns
JSCSS HTML

Ap
Composability
Efficient Team Workﬂow

Composability
Efficient Team Workﬂow
String Based Templates

People of the Front-End
Webmaster
1990’s
HTML

People of the Front-End
Design
JSCSS HTML
CSS Developers JavaScript Developers
Software Engineering
Now

Don’t Reinvent,
Steal The Wheel
Engineering
Design
Integrates Design & Engineering

Delivers Superior User Experience
Native
App SDKs
HTML5
Standards
HTML5 Infused With Native DNA

SDK
HTML5 iOS
Delivers Superior User ExperienceDelivers Superior User Experience

HTML5 iOSNeXTSTEP
35 Years
Delivers Superior User ExperienceDelivers Superior User Experience

HTML5 Draw Loop
.reel
HTML JS CSS
Templates Components

Montage HTML5 Framework

Montage Templates
Full HTML5 document
Component-Oriented
Object Serialization with CommonJS
Breakthrough JS / CSS Team Work
Separation of concerns between logic/presentation
Writing CSS for Reuse
CSSJSHTML
.reel

CSS
Modular CSS For Reuse
No ID Attribute
CSS Will Be In A Shared Space
Convention:
JSHTML
package-Component
package-Component-childElement
package-Component--variation
.digit-Progress
.digit-Progress-bar
.digit-Progress—-small
.reel

Component
Assigned one DOM Element
MVC
From Widget to App Structure
Template

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

details
categories
Components API
accepts data through ES5 properties or methods
Main selection
Movie Categories
Selected Category

Main
Selected Category
Movie Categories
selection

Data Propagation
Composant moviestrip
Composant detail
movie
data binding
categoryContentController.selection.one()

<html>
...
<body>
<div data-montage-id="owner" class="MovieStrip">
<div data-montage-id ="overlay"></div>
<div data-montage-id="movieFlow" class="Moviestrip-flow">
<div data-montage-id="poster" class="Moviestrip-image"></div>
</div>
<div class="film"></div>
</div>
</body>
</html>
moviestrip.reel/moviestrip.html

<div data-montage-id="movieFlow" class="Moviestrip-flow">
</div>
</div>
Markup
Object Serialization
<script type="text/montage-serialization">
{
"owner": {
"properties": {
"element": {"#": "owner"}
}
},
...

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

<div data-montage-id="facade-flow" class="facade-flow">
<div data-montage-id =“overlay”></div>
</div>
</div>
A Flow Component repeats its Inner Template
(You can repeat whatever you want)

<div data-montage-id="facade-flow" class="facade-flow">
<div data-montage-id =“overlay”></div>
</div>
</div>
"poster": {
"prototype": "ui/image.reel",
"properties": {
"element": {"#": "poster"}
},
"bindings": {
"src": {
"<-": "@flow:iteration.object.posters.detailed"
}
}
},

posters: {
detailed: { }},
"image": {
"properties": {
"element": {"#": "image"}
},
"bindings": {
"src": {
}
}
},
[ ]

"image": {
"properties": {
"element": {"#": "image"}
},
"bindings": {
"src": {
}
}
},
posters: {
detailed: { }},[ ]

details
Title
Synopsis
Trailer
Button
Release Date RuntimeAudience CriticsPopularity

details
Title
Description
Release Date Runtime Audience
Critics
Trailer Button
movie.title
movie.date
actionEvent
movie.criticScore
movie.synopsis
movie.runtime
movie.audienceScore

Sample Data in Main.reel/Main.js

Component-Oriented Templates
Real time
Update!

CSS
Montage Templates
Component-Oriented
Full HTML5 document
Declarative, Clean Separation of Concerns
Works with today’s standards
Breakthrough JS / CSS Team Work
Increased Productivity
JSHTML
.reel

Shave that handlebar moustache for elegance with Montage templates

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Shave that handlebar moustache for elegance with Montage templates

Ähnlich wie Shave that handlebar moustache for elegance with Montage templates (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Shave that handlebar moustache for elegance with Montage templates