Open Web Camp 2015: Shave that handlebar mustache
-
Upload
benoit-marchant -
Category
Internet
-
view
163 -
download
6
Transcript of Open Web Camp 2015: Shave that handlebar mustache
![Page 1: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/1.jpg)
Shave that handlebar moustache For the elegance of Montage
Component-Oriented Templates
Benoit MarchantCEO & Founder
montagestudio.com@montagejs
✉!
![Page 2: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/2.jpg)
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.
![Page 3: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/3.jpg)
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.
![Page 4: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/4.jpg)
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
![Page 5: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/5.jpg)
Classic Server Applications
Browser Server
Templates
Data
{%}
HTML
HTTP
![Page 6: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/6.jpg)
![Page 7: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/7.jpg)
Important Template Attributes
High Performance, on Mobile 60fps
![Page 8: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/8.jpg)
Important Template Attributes
High Performance, on Mobile
Expressive: Repetition, Condition, Custom ?
![Page 9: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/9.jpg)
Important Template Attributes
High Performance, on Mobile
Expressive: Loop, Condition, Custom
Composability
![Page 10: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/10.jpg)
Important Template Attributes
High Performance, on Mobile
Expressive: Loop, Condition, Custom
Composability
Separation of Concerns
JSCSS HTML
![Page 11: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/11.jpg)
Ap
Important Template Attributes
High Performance, on Mobile
Expressive: Loop, Condition, Custom
Composability
Separation of Concerns
Efficient Team Workflow
![Page 12: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/12.jpg)
High Performance, on Mobile
Expressive: Loop, Condition, Custom
Composability
Separation of Concerns
Efficient Team Workflow
String Based Templates
![Page 13: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/13.jpg)
People of the Front-End
Webmaster
1990’s
HTML
![Page 14: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/14.jpg)
People of the Front-End
Design
JSCSS HTML
CSS Developers JavaScript Developers
Software Engineering
Now
![Page 15: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/15.jpg)
Don’t Reinvent, Steal The Wheel
EngineeringDesign
Integrates Design & Engineering
![Page 16: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/16.jpg)
Delivers Superior User Experience
Native App SDKs
HTML5 Standards
HTML5 Infused With Native DNA
![Page 17: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/17.jpg)
SDK
HTML5 iOS
HTML5 Infused With Native DNA
Delivers Superior User ExperienceDelivers Superior User Experience
![Page 18: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/18.jpg)
HTML5 iOSNeXTSTEP 35 Years
HTML5 Infused With Native DNA
Delivers Superior User ExperienceDelivers Superior User Experience
![Page 19: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/19.jpg)
HTML5 Infused With Native DNA
HTML5 Draw Loop
.reel
HTML JS CSS
Templates Components
Delivers Superior User Experience
![Page 20: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/20.jpg)
HTML5 Infused With Native DNA
Montage HTML5 Framework
Delivers Superior User Experience
![Page 21: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/21.jpg)
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
![Page 22: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/22.jpg)
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
![Page 23: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/23.jpg)
Component
Assigned one DOM Element
MVC
From Widget to App Structure
Template
![Page 24: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/24.jpg)
Component Structure
![Page 25: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/25.jpg)
Main Component Loads data from Web Service
Relies on sub-components for presentation
![Page 26: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/26.jpg)
moviestrip
categories
detail
![Page 27: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/27.jpg)
details
categories
Components API accepts data through ES5 properties or methods
Mainselection
Movie Categories
Selected Category
![Page 28: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/28.jpg)
Main
Selected Category
Movie Categories
selection
![Page 29: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/29.jpg)
Data Propagation
Composant moviestrip
Composant detail
movie
data binding
categoryContentController.selection.one()
![Page 30: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/30.jpg)
<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
![Page 31: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/31.jpg)
<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": {
![Page 32: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/32.jpg)
<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": {
![Page 33: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/33.jpg)
![Page 34: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/34.jpg)
![Page 35: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/35.jpg)
![Page 36: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/36.jpg)
<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)
![Page 37: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/37.jpg)
<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" } } },
![Page 38: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/38.jpg)
posters: { detailed: { }},
"image": { "prototype": "ui/image.reel", "properties": { "element": {"#": "image"} }, "bindings": { "src": { "<-": "@flow:iteration.object.posters.detailed" } } },
[ ]
![Page 39: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/39.jpg)
"image": { "prototype": "ui/image.reel", "properties": { "element": {"#": "image"} }, "bindings": { "src": { "<-": "@flow:iteration.object.posters.detailed" } } },
posters: { detailed: { }},[ ]
![Page 40: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/40.jpg)
details
![Page 41: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/41.jpg)
details
Title
Synopsis
Trailer Button
Release Date RuntimeAudience CriticsPopularity
![Page 42: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/42.jpg)
detailsTitle
Description
Release Date Runtime Audience
Critics
Trailer Button
movie.title
movie.date
actionEvent
movie.criticScore
movie.synopsis
movie.runtimemovie.audienceScore
![Page 43: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/43.jpg)
ON AIRON AIR
Hands On
![Page 44: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/44.jpg)
Sample Data in Main.reel/Main.js
![Page 45: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/45.jpg)
Component-Oriented Templates
Real time Update!
![Page 46: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/46.jpg)
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
![Page 47: Open Web Camp 2015: Shave that handlebar mustache](https://reader037.fdocuments.us/reader037/viewer/2022103021/55d2edd8bb61ebc5398b46c5/html5/thumbnails/47.jpg)
Shave that handlebar moustache For the elegance of Montage
Component-Oriented Templates
Benoit MarchantCEO & Founder
montagestudio.com@montagejs
✉!