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
980

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
Using Async Iterators in Node.js
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
0
700
Introduction to Basejump
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
1k
Realtime data visualization with RethinkDB and Epoch
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
580
Realtime web apps with RethinkDB and full-stack Ruby
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
2
270
Jupyter and RethinkDB
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
450
Using RethinkDB with Tornado & EventMachine
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
0
450
RethinkDB Training Course
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
3
360
RethinkDB Cluster Monitoring
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
0
400
Intro to MontageJS
Ba70f10866cbab0bc6b9b1d547ef8015?s=48 segphault
1
170

Other Decks in Programming

See All in Programming
JGS594 Lecture 23
B546a9b97d993392e4b22b74b99b91fe?s=48 javiergs
PRO
0
400
Micro Frontend Routing – Solutions for mature applications - iJS 04/2022
Ff15019ea188e36922681430d710eb2c?s=48 michaelzikes
0
150
ゼロから作る Protocol Buffer のパーサーとレキサー / Writing Protocol Buffer Parser/Lexer in Go from scratch
6914735c2aaaa9fa1d7e5c8ddde6de4c?s=48 yoheimuta
1
150
型パラメータが使えるようになったのでLINQを実装してみた
99b72ba4c7dd4da957edb3e619a6d71f?s=48 makki_d
2
500
SRE NEXT 2022: Sensible Incident Management for Software Startups
C431886a52f7545f1b122b0c221e7bcd?s=48 takanabe
1
190
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
De266761b955b2636e454a1bc7a99ed4?s=48 masayaaoyama
0
260
About Type Syntax Proposal
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
1
700
Android入門
180bbdf8267422d5814fd498ecea043a?s=48 hn410
0
300
質とスピード（2022春版、質疑応答用資料付き） / Quality and Speed 2022 Spring Edition
9f3a83db74bee75a64b5e6ed106a775c?s=48 twada
PRO
27
17k
Node.js 最新動向 TFCon 2022
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
5
2.3k
microCMS × Shopifyで、ECサイトがリニューアル後急成長した話
1f1d874ed952074278d27fad3fb870b8?s=48 microcms
0
440
Jetpack DataStore
Ac5b39a4b12e8ca2d6e25b9e7cc142ae?s=48 djain2405
1
170

Featured

See All Featured
Bash Introduction
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
596
210k
Intergalactic Javascript Robots from Outer Space
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
261
25k
Testing 201, or: Great Expectations
A9704266587836f7e784235e5073b93e?s=48 jmmastey
21
5.4k
Building a Scalable Design System with Sketch
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
447
30k
Raft: Consensus for Rubyists
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
126
5.4k
Robots, Beer and Maslow
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7.1k
Atom: Resistance is Futile
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k
The Most Common Mistakes in Cover Letters
1ce0eb06fd6a9e9566a0cb310cfee635?s=48 jrick
PRO
4
24k
Agile that works and the tools we love
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
319
19k
Building Applications with DynamoDB
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
83
4.6k
Building Your Own Lightsaber
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
94
4.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
900

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?