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
790

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
610
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
920
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
540
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
2
260
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
370
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
0
370
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
3
340
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
0
310
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
170

Other Decks in Programming

See All in Programming
5b3338b3676d4f7091a575e584f3a4f4?s=48 coe401_
3
160
A8ca33aaa087bf3b664e8a0cab415455?s=48 matyo91
1
150
13f3313ae1ec1d9b3ed76ccbd746291b?s=48 takuyaa
4
480
E83cdc415df47ab3eae30957ae7e2d33?s=48 ykpythemind
0
140
7f408bc67dc9ae3b288ee92d16d3c4c2?s=48 deepu105
0
230
B793da271a45d149b52f507bca9f137c?s=48 77web
2
2.3k
75baf8a56acce7086013da05fd125af5?s=48 dhmegane
0
210
Ebc0665c43d158c6e6450c7bd2de2fe0?s=48 ottijp
0
180
8834a79ab8e0412b2130131817be73d9?s=48 gtongy
0
450
1d1580fb0945b0ffadff18e28bead3c5?s=48 adarapata
1
460
8ec2b967e38f000eb63ae345cd7c58e6?s=48 minodriven
37
28k
14d83dc17e2c893d7564b609ff8da4ca?s=48 techharmony
0
110

Featured

See All Featured
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
81
3.4k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
340
16k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
104
6.3k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.4k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
16k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
24
3k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
370
42k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
3
660
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
776
200k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
245cee81a9c424266e5e401d844ea881?s=48 lara
16
2.9k
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.7k

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?