Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Composing frontend Web applications with MontageJS

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

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
Tweet

More Decks by Ryan Paul

See All by Ryan Paul
Using Async Iterators in Node.js
Avatar for Ryan Paul segphault
0
1.1k
Introduction to Basejump
Avatar for Ryan Paul segphault
1
1.4k
Realtime data visualization with RethinkDB and Epoch
Avatar for Ryan Paul segphault
1
770
Realtime web apps with RethinkDB and full-stack Ruby
Avatar for Ryan Paul segphault
2
350
Jupyter and RethinkDB
Avatar for Ryan Paul segphault
1
760
Using RethinkDB with Tornado & EventMachine
Avatar for Ryan Paul segphault
0
730
RethinkDB Training Course
Avatar for Ryan Paul segphault
3
470
RethinkDB Cluster Monitoring
Avatar for Ryan Paul segphault
0
810
Intro to MontageJS
Avatar for Ryan Paul segphault
1
220

Other Decks in Programming

See All in Programming
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
Avatar for Takahito Yamatoya yamatoya
0
350
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
430
NOT A HOTEL - 建築や人と融合し、自由を創り出すソフトウェア
Avatar for Hokuto Shimokawa not_a_hokuts
2
460
Head of Engineeringが現場で回した生産性向上施策 2025→2026
Avatar for gessy0129 gessy0129
PRO
0
190
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
150
PostgreSQL を使った快適な go test 環境を求めて
Avatar for Kotaro Otaka otakakot
0
300
受け入れテスト駆動開発(ATDD)×AI駆動開発 AI時代のATDDの取り組み方を考える
Avatar for Takasaki Kazunari kztakasaki
2
430
Raku Raku Notion 20260128
Avatar for hareyaka hareyakayuruyaka
0
420
nilとは何か 〜interfaceの構造とnil!=nilから理解する〜 / Understanding nil in Go Interface Representation and Why nil != nil
Avatar for kuro kuro_kurorrr
2
1.1k
Ruby x Terminal
Avatar for Akira Matsuda a_matsuda
2
170
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
Avatar for tetutetu214 tetutetu214
2
130
Gemini for developers
Avatar for Mete Atamel meteatamel
0
120

Featured

See All Featured
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
75
5.1k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
270
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.9k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
36k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.5k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.9k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
110
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
920

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?