Composing frontend Web applications with MontageJS

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

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
570
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
880
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
510
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
2
260
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
340
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
0
350
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
3
340
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
0
280
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
160

Other Decks in Programming

See All in Programming
D8a3623b157508fecdae1f8e756f362f?s=48 cmota
1
120
68ba97b6be908d58de5294261a6d8638?s=48 ca_dp
0
290
5b8d20aa7d63c5d391b1c881e1764460?s=48 quasilyte
2
240
841002bf24bb562253de7eb3c17ceae6?s=48 kyomo
1
160
0fb2ce77513181750c384115cd0bc937?s=48 ksukenobe
2
270
9eed44f137609e6ce3b6f1e14f80b9e1?s=48 izumin5210
6
3k
6c6b60f0440e030040a9141cab781ed0?s=48 hiboma
0
440
0ed10d1154c696886ca483fe827cb299?s=48 thatjeffsmith
0
870
3cfad86677c5966ecfe9b81955fa3489?s=48 youkan2002
0
180
26e1ba9a02729b2d6013604135221aae?s=48 yhara
0
160
6139fd48daa26e786794598c4a6b546a?s=48 ninjinkun
2
320
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
0
100

Featured

See All Featured
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
15
520
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
24
1.7k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
193
15k
11c84dff30266b907714802088852677?s=48 jasonvnalue
80
7.9k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
71
3.5k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
583
200k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
87
3.2k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
4k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
5
370
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
10
630
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.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?