Composing frontend Web applications with MontageJS

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

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
550
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
860
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
500
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
2
250
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
330
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
0
340
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
3
330
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
0
260
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
160

Other Decks in Programming

See All in Programming
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
0
110
9af444e4e7110845f0b3319efb1ca252?s=48 920oj
1
670
0aa238a274c2397214b20d6eed58939b?s=48 moomooya
0
290
D83b3739651001461f48763639b90b50?s=48 mazipan
4
930
E24ebbedcae292dc8e4b56186e082220?s=48 iganari
1
280
B3a78cfbf06ca9ee860536c6d1de5e7f?s=48 ykanoh
0
190
9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=48 uzimaru0000
0
240
F9e11bea0c22333596791dd0696f5d4f?s=48 daiksy
0
1.1k
110cd4dcaed019b3bd9809e541afdeb6?s=48 okuramasafumi
0
200
770ede26fb450c104128e35ac37711fd?s=48 musaprg
0
700
8f1fde48dea93c5c3dd6c68c8b8cee92?s=48 kazutaka333
0
260
0fb2ce77513181750c384115cd0bc937?s=48 ksukenobe
0
120

Featured

See All Featured
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
240
20k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
105
9.4k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
274
31k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
55
5.3k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
15k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
652
54k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
407
57k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
70
7k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
340
25k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
60
2.4k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
87
3.2k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
40
4.3k

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?