Composing frontend Web applications with MontageJS montagestudio.com @montagejs ✉ [email protected] Ryan Paul Dev Relations @segphault

Ryan Paul @segphault Montage Studio Dev Relations

Interchangeable Parts

while -- $1" -* 0: c h return x l r t * ! Software Components

ASSEMBLE APPLICATIONS by COMPOSING COMPONENTS

Framework for frontend web development Ideal for building single-page applications Best suited for modern browsers Open source, under BSD license What is MontageJS?

CONTENT > HTML CODE JS JAVASCRIPT DECLARATION {} JSON COMPONENT.REEL 

> HTML COMPONENT.REEL  ! ! !

{} JSON COMPONENT.REEL  Declarative description of a component’s contents Instantiates objects nested inside component Attach components to the page DOM Populate component properties

{} JSON "celsiusNumberfield": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "celsius"} }, "bindings": { "value": {"<->": "([email protected] - 32) / 1.8"} } }, "fahrenheitNumberfield": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "fahrenheit"}, "value": "32" } }, HTML JSON COMPONENT.REEL 

{} JSON "celsiusNumberfield": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "celsius"} }, "bindings": { "value": {"<->": "([email protected] - 32) / 1.8"} } }, "fahrenheitNumberfield": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "fahrenheit"}, "value": "32" } }, HTML JSON Prototype: reference to a module ID

{} JSON "celsiusNumberfield": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "celsius"} }, "bindings": { "value": {"<->": "([email protected] - 32) / 1.8"} } }, "fahrenheitNumberfield": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "fahrenheit"}, "value": "32" } }, HTML JSON Element: Montage ID of DOM element

Bindings • Functional Reactive Bindings (FRB) • Propagate changes between object properties • Can be 1-way or 2-way • Bind to other components or regular JavaScript objects FRB FRB

{} JSON "celsiusNumberfield": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "celsius"} }, "bindings": { "value": {"<->": "([email protected] - 32) / 1.8"} } }, "fahrenheitNumberfield": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "fahrenheit"}, "value": "32" } }, HTML JSON <-> signifies a 2-way binding

{} JSON "celsiusNumberfield": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "celsius"} }, "bindings": { "value": {"<->": "([email protected] - 32) / 1.8"} } }, "fahrenheitNumberfield": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "fahrenheit"}, "value": "32" } }, HTML JSON @ references an existing object

> {} No procedural flow control statements in the HTML

• Vote

+  Clean, Semantic Markup

DEMO

"paths": [ { "knots": [ { "previousHandlerPosition": [], "nextDensity": 10, "previousDensity": 10, "knotPosition": [ -761.874, -270, 691.324], "rotateX": 0, "rotateY": 0, "rotateZ": 0, "opacity": 1, "nextHandlerPosition": [ 738.125, -270, -328.675] }, { "knotPosition": [ 1937.09, -270, -1316.049], "nextHandlerPosition": [ 3207.825, -270, -1461.849], "previousHandlerPosition": [ 666.374, -270, -1170.25], "nextDensity": 10, "previousDensity": 10, "rotateX": 0, "rotateY": 0, "rotateZ": 0, "opacity": 1 } ], Flow Declaration

HOMOICONICITY A MontageJS component declaration is data that you can manipulate programmatically.

Application Authoring You are already using tools, are they the right ones? ! WYSIWYG HTML authoring has not worked ! Visual authoring that exploits MontageJS homoiconicity

NO CODE GENERATION

DEMO

DEMO

montagestudio.com/c/jsconfus JOIN THE BETA

QUESTIONS?