Open Web Camp 2015: Shave that handlebar mustache

Shave that handlebar moustache For the elegance of Montage

Component-Oriented Templates

Benoit MarchantCEO & Founder

montagestudio.com@montagejs

✉!

[email protected]

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.


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.


2. Computing: a preset format for a document or file, 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 Mobile 60fps


High Performance, on Mobile

Expressive: Repetition, Condition, Custom ?



Expressive: Loop, Condition, Custom

Composability




Composability

Separation of Concerns

JSCSS HTML

Ap




Composability


Efficient Team Workflow



Composability


Efficient Team Workflow

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

EngineeringDesign

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

Component Structure

Main Component Loads data from Web Service

Relies on sub-components for presentation

moviestrip

categories

detail

details

categories

Components API accepts data through ES5 properties or methods

Mainselection

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="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>

Markup

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

... "flow": {

<div data-montage-id="owner" class="MovieStrip"> <div data-montage-id ="overlay"></div> <div data-montage-id="flow" class="Moviestrip-flow"> <div data-montage-id="poster" class="Moviestrip-image"></div> </div> <div class="film"></div> </div>

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

... "flow": {

<div data-montage-id="facade-flow" class="facade-flow"> <div data-montage-id =“overlay”></div> <div data-montage-id="flow" class="Moviestrip-flow"> <div data-montage-id="poster" class="Moviestrip-image"></div> </div> <div class="film"></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 data-montage-id="flow" class="Moviestrip-flow"> <div data-montage-id="poster" class="Moviestrip-image"></div> </div> <div class="film"></div> </div>

"poster": { "prototype": "ui/image.reel", "properties": { "element": {"#": "poster"} }, "bindings": { "src": { "<-": "@flow:iteration.object.posters.detailed" } } },

posters: { detailed: { }},

"image": { "prototype": "ui/image.reel", "properties": { "element": {"#": "image"} }, "bindings": { "src": { "<-": "@flow:iteration.object.posters.detailed" } } },

[ ]

"image": { "prototype": "ui/image.reel", "properties": { "element": {"#": "image"} }, "bindings": { "src": { "<-": "@flow:iteration.object.posters.detailed" } } },

posters: { detailed: { }},[ ]

details

details

Title

Synopsis

Trailer Button

Release Date RuntimeAudience CriticsPopularity

detailsTitle

Description

Release Date Runtime Audience

Critics

Trailer Button

movie.title

movie.date

actionEvent

movie.criticScore

movie.synopsis

movie.runtimemovie.audienceScore

ON AIRON AIR

Hands On

Sample Data in Main.reel/Main.js


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 the elegance of Montage


Benoit MarchantCEO & Founder

montagestudio.com@montagejs

✉!

[email protected]

Internet

Open Web Camp 2015: Shave that handlebar mustache