Composing frontend Web applications with MontageJS

Composing frontend Web applications with MontageJS montagestudio.com @montagejs ✉ ryan@montagestudio.com
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  ! ! <!DOCTYPE html> <html> <head>
</head> <body> <div data-montage-id="owner" class=“Main”> ... </div> </body> </html> !

{} 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": {"<->": "(+@fahrenheitNumberfield.value - 32) / 1.8"} } }, "fahrenheitNumberfield": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "fahrenheit"}, "value": "32" } }, <input data-montage-id="celsius" /> <input data-montage-id="fahrenheit" /> HTML JSON COMPONENT.REEL 

"celsius"} }, "bindings": { "value": {"<->": "(+@fahrenheitNumberfield.value - 32) / 1.8"} } }, "fahrenheitNumberfield": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "fahrenheit"}, "value": "32" } }, <input data-montage-id="celsius" /> <input data-montage-id="fahrenheit" /> HTML JSON Prototype: reference to a module ID

"celsius"} }, "bindings": { "value": {"<->": "(+@fahrenheitNumberfield.value - 32) / 1.8"} } }, "fahrenheitNumberfield": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "fahrenheit"}, "value": "32" } }, <input data-montage-id="celsius" /> <input data-montage-id="fahrenheit" /> 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

"celsius"} }, "bindings": { "value": {"<->": "(+@fahrenheitNumberfield.value - 32) / 1.8"} } }, "fahrenheitNumberfield": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "fahrenheit"}, "value": "32" } }, <input data-montage-id="celcius" /> <input data-montage-id="fahrenheit" /> HTML JSON <-> signiﬁes a 2-way binding

"celsius"} }, "bindings": { "value": {"<->": "(+@fahrenheitNumberfield.value - 32) / 1.8"} } }, "fahrenheitNumberfield": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "fahrenheit"}, "value": "32" } }, <input data-montage-id="celcius" /> <input data-montage-id="fahrenheit" /> HTML JSON @ references an existing object

</> {} No procedural ﬂow control statements in the HTML
<ul data-montage-id="listPlaces"> <li data-montage-id="place"> <div data-montage-id="voteCount"></div> <button data-montage-id="buttonVote">Vote</button> </li> </ul> +  Clean, Semantic Markup

"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

montagestudio.com/c/jsconfus JOIN THE BETA

QUESTIONS?

Composing frontend Web applications with MontageJS

Composing frontend Web applications with MontageJS

Ryan Paul

More Decks by Ryan Paul

Other Decks in Programming

Featured

Transcript