Introduction MontageJS to

Ryan Paul MontageJS Dev Relations @segphault

The Web Evolving is

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

Filesystem assets images style node_modules digit montage ui main.reel welcome.reel index.html package.json

Filesystem assets 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"} } } HTML MJS

Serialization "number": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "number"} } } HTML MJS Prototype: path to the desired component

Serialization "number": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "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 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"} } } 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"} } } 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