intro to montagejs
DESCRIPTION
An introductory overview of MontageJS, a modern framework for frontend Web development.TRANSCRIPT
Introduction
MontageJSto
Ryan Paul
MontageJS Dev Relations
@segphault
The Web
Evolvingis
Hypertext Document
Medium
from
to
Interactive Application
Platform
WE NEED A FRAMEWORK
BRIDGE THE GAP
to
• Framework for frontend web development
• Ideal for building single-page applications
• Best suited for projects that target modern browsers
• Open source, under BSD license
What is MontageJS?
• Component System
• Deferred Drawing
• Functional Reactive Bindings
Key Features
• Component System
• Deferred Drawing
• Functional Reactive Bindings
Key Features
FRB
• Component System
• Deferred Drawing
• Functional Reactive Bindings
Key Features
FRB
Components
HTML Content
CSS Styling
FRB Bindings
JS Code
component.reel
Install MontageJS
$ sudo npm install -gq minit@latest
Create Project
$ minit create:app -n app-name
Create Component
$ minit create:component -n compname
Filesystemassets
images style
node_modules digit montage
ui main.reel welcome.reel
index.html package.json
Filesystemassets
images style
node_modules digit montage
ui main.reel welcome.reel
index.html package.json
!
main.reel
main.html
main.css
main.js
Serialization
• Instantiate components
• Attach components to the page DOM
• Populate component properties — static values or bindings
FRB
Bindings
• Propagate changes between object properties
• Can be 1-way or 2-way
• Bind to other components or regular JS objects
Serialization"number": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "number"} } }
<input data-montage-id="number" /> HTML
MJS
Serialization"number": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "number"} } }
<input data-montage-id="number" /> HTML
MJS
Prototype: path to the desired component
Serialization"number": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "number"} } }
<input data-montage-id="number" /> HTML
MJS
Element: Montage ID of DOM element
"number": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "number"} } }, "slider": { "prototype": "digit/ui/slider.reel", "properties": { "element": {"#": "slider"} }, "bindings": { "value": {"<->": "@number.value"} } }
Adding a 2nd component
<input data-montage-id="number" /> <input data-montage-id="slider" type="range" />
HTML
MJS
"number": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "number"} } }, "slider": { "prototype": "digit/ui/slider.reel", "properties": { "element": {"#": "slider"} }, "bindings": { "value": {"<->": "@number.value"} } }
<input data-montage-id="number" /> <input data-montage-id="slider" type="range" />
HTML
MJS
<-> signifies a 2-way binding
"number": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "number"} } }, "slider": { "prototype": "digit/ui/slider.reel", "properties": { "element": {"#": "slider"} }, "bindings": { "value": {"<->": "@number.value"} } }
<input data-montage-id="number" /> <input data-montage-id="slider" type="range" />
HTML
MJS
@ references an existing component
"celsiusNumber": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "celsius"} }, "bindings": { "value": {"<->": "([email protected] - 32) / 1.8"} } }
MJS
Complex FRB Expressions
!"sorted": {"<-": “numbers.sorted{}”} !"evens": {"<-": “numbers.filter{!(%2)}”} !"low": {"<-": “numbers.filter{this <= ^maxNumber}”} !"allChecked": {"<-": “options.every{checked}”} !"payroll": {"<-": “departments.map{employees.sum{salary}}.sum()”} !"index": {"<-": “folks.group{id}.sorted{.0}.map{.1.last()}”}
MJS
Fun with FRB
• Command line tool that optimizes apps for production deployment
• Consolidates code into bundles to reduce number of requests
• Minifies code to reduce total download size
MontageJS Optimizer
MontageJS Optimizer
$ sudo npm install -g mop
$ mop
Thank You!
MontageJS.org @MontageJS