intro to montagejs

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": {"<->": "(+@number.value - 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