Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Composing frontend Web applications with MontageJS

Ba70f10866cbab0bc6b9b1d547ef8015?s=47 Ryan Paul
May 28, 2014
Programming
4
860

Composing frontend Web applications with MontageJS

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

Ba70f10866cbab0bc6b9b1d547ef8015?s=128

Ryan Paul

May 28, 2014
Tweet

More Decks by Ryan Paul

See All by Ryan Paul
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
0
650
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
970
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
550
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
2
260
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
400
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
0
410
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
3
350
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
0
350
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
170

Other Decks in Programming

See All in Programming
119659c28d16f22d01eb48a6f3ee1391?s=48 iwatatomoya
0
3.5k
0f8842fabcd31a6c9007ddcd648247db?s=48 kkagurazaka
1
120
652359244199b2b5108a5e09c027e0da?s=48 ykanazawa
0
360
0c2ae3d2aa77423465e1e533ff0d030a?s=48 mski_iksm
5
1.9k
D8d2a64ab596942470b77d42c0c904db?s=48 ysakai
0
290
C90bac78c0fb61105cfd8239767f903d?s=48 o0h
PRO
3
480
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
3
440
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
0
130
F21d69109b1c03921abf7d12f0fb6654?s=48 dscs
0
130
Ae7a5166a7b7776ffdd5676c2d6ab42f?s=48 aseiide
1
250
E41c91eb3efe7a796b8ae20c51a07f06?s=48 takoba
1
220
D8ca2261592f73dc422829e1e20feea0?s=48 tawamura1224
2
1k

Featured

See All Featured
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
210
11k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
260
24k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
171
7.7k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
263
11k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
56
3k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
55
4.8k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
107
6.6k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
129
22k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
415
58k
78b475797a14c84799063c7cd073962f?s=48 holman
464
280k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
331
36k

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?