Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Composing frontend Web applications with MontageJS

Avatar for Ryan Paul Ryan Paul
May 28, 2014
Programming
1.5k
4

Composing frontend Web applications with MontageJS

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

Avatar for Ryan Paul

Ryan Paul

May 28, 2014

More Decks by Ryan Paul

See All by Ryan Paul
Using Async Iterators in Node.js
Avatar for Ryan Paul segphault
0
1.2k
Introduction to Basejump
Avatar for Ryan Paul segphault
1
1.5k
Realtime data visualization with RethinkDB and Epoch
Avatar for Ryan Paul segphault
1
810
Realtime web apps with RethinkDB and full-stack Ruby
Avatar for Ryan Paul segphault
2
370
Jupyter and RethinkDB
Avatar for Ryan Paul segphault
1
800
Using RethinkDB with Tornado & EventMachine
Avatar for Ryan Paul segphault
0
780
RethinkDB Training Course
Avatar for Ryan Paul segphault
3
490
RethinkDB Cluster Monitoring
Avatar for Ryan Paul segphault
0
840
Intro to MontageJS
Avatar for Ryan Paul segphault
1
240

Other Decks in Programming

See All in Programming
Java 27新機能 / Java 27 new features
Avatar for Naoki Kishida kishida
2
150
技術的負債の返済は、AI時代の複利で効く投資 — 経営としての意思決定とその遂行
Avatar for curekoshimizu curekoshimizu
0
1.5k
[GoCon2026] When Goroutines Are Not Enough: Runtime Locality in High-Throughput Go
Avatar for Takeru Hayasaka takehaya
6
2.3k
XHTMLが残したもの
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
2
810
JPUG勉強会 OSSデータベースの内部構造を理解しよう(第２回)
Avatar for Atsushi Ogawa oga5
0
260
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
Avatar for Kensuke Taguchi ken_tunc
0
290
AGENTS.md Is Not Enough: Build Skills, Don't Download Them
Avatar for Alex T lx_t
0
120
AHC070解法紹介
Avatar for eijirou eijirou
0
120
【高い買い物LT会】初任給で話題の国産フィジカルAIを買った話
Avatar for 赤神青空 akagami
PRO
0
160
{ Android | Kotlin } Gradle Plugin in 2026
Avatar for RyuNen344 ryunen344
1
320
AIは賢い。でも実行環境は？ CLIおじさんがAI時代に伝えたいこと ~ CLIおじさんがAI時代に伝えたいこと ~
Avatar for curekoshimizu curekoshimizu
1
250
大喜利で理解するLLM as a Judge / Understanding LLM-as-a-Judge through Ogiri
Avatar for rockname rockname
0
140

Featured

See All Featured
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
410
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.6k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
760
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
3
1.4k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.6k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
380

Transcript

  1. Composing frontend Web applications with MontageJS montagestudio.com @montagejs ✉ [email protected]

    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": {"<->": "([email protected] - 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": {"<->": "([email protected] - 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": {"<->": "([email protected] - 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": {"<->": "([email protected] - 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": {"<->": "([email protected] - 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?