Composing frontend Web applications with MontageJS

An introduction to MontageJS and Montage Studio, presented at JSConf US in 2014.

Transcript

1. Composing frontend Web applications with MontageJS montagestudio.com @montagejs ✉ ryan@montagestudio.com Ryan Paul Dev Relations @segphault
2. Ryan Paul @segphault Montage Studio Dev Relations
3. Interchangeable Parts
4. while -- $1" -* 0: c h return x l r t * ! Software Components
5. ASSEMBLE APPLICATIONS by COMPOSING COMPONENTS
6. Framework for frontend web development Ideal for building single-page applications Best suited for modern browsers Open source, under BSD license What is MontageJS?
7. CONTENT </> HTML CODE JS JAVASCRIPT DECLARATION {} JSON COMPONENT.REEL 
8. </> HTML COMPONENT.REEL  ! ! <!DOCTYPE html> <html> <head> </head> <body> <div data-montage-id="owner" class=“Main”> ... </div> </body> </html> !
9. {} JSON COMPONENT.REEL  Declarative description of a component’s contents Instantiates objects nested inside component Attach components to the page DOM Populate component properties
10. {} 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 
11. {} 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 Prototype: reference to a module ID
12. {} 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 Element: Montage ID of DOM element
13. 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
14. {} 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="celcius" /> <input data-montage-id="fahrenheit" /> HTML JSON <-> signifies a 2-way binding
15. {} 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="celcius" /> <input data-montage-id="fahrenheit" /> HTML JSON @ references an existing object
16. </> {} No procedural flow 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
17. DEMO
18. "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
19. HOMOICONICITY A MontageJS component declaration is data that you can manipulate programmatically.
20. Application Authoring You are already using tools, are they the right ones? ! WYSIWYG HTML authoring has not worked ! Visual authoring that exploits MontageJS homoiconicity
21. NO CODE GENERATION
22. DEMO
23. DEMO
24. montagestudio.com/c/jsconfus JOIN THE BETA
25. QUESTIONS?