View
162
Download
6
Category
Tags:
Preview:
Citation preview
Shave that handlebar moustache For the elegance of Montage
Component-Oriented Templates
Benoit MarchantCEO & 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
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 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
Important Template Attributes
High Performance, on Mobile
Expressive: Repetition, Condition, Custom ?
Important Template Attributes
High Performance, on Mobile
Expressive: Loop, Condition, Custom
Composability
Important Template Attributes
High Performance, on Mobile
Expressive: Loop, Condition, Custom
Composability
Separation of Concerns
JSCSS HTML
Ap
Important Template Attributes
High Performance, on Mobile
Expressive: Loop, Condition, Custom
Composability
Separation of Concerns
Efficient Team Workflow
High Performance, on Mobile
Expressive: Loop, Condition, Custom
Composability
Separation of Concerns
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
HTML5 Infused With Native DNA
Delivers Superior User ExperienceDelivers Superior User Experience
HTML5 iOSNeXTSTEP 35 Years
HTML5 Infused With Native DNA
Delivers Superior User ExperienceDelivers Superior User Experience
HTML5 Infused With Native DNA
HTML5 Draw Loop
.reel
HTML JS CSS
Templates Components
Delivers Superior User Experience
HTML5 Infused With Native DNA
Montage HTML5 Framework
Delivers Superior User Experience
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
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 the elegance of Montage
Component-Oriented Templates
Benoit MarchantCEO & Founder
montagestudio.com@montagejs
✉!
benoit@montagestudio.com
Recommended