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

Composing frontend Web applications with MontageJS

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
800
Realtime web apps with RethinkDB and full-stack Ruby
Avatar for Ryan Paul segphault
2
360
Jupyter and RethinkDB
Avatar for Ryan Paul segphault
1
780
Using RethinkDB with Tornado & EventMachine
Avatar for Ryan Paul segphault
0
740
RethinkDB Training Course
Avatar for Ryan Paul segphault
3
480
RethinkDB Cluster Monitoring
Avatar for Ryan Paul segphault
0
830
Intro to MontageJS
Avatar for Ryan Paul segphault
1
230

Other Decks in Programming

See All in Programming
inferと仲良くなる10分間
Avatar for ryokatsuse ryokatsuse
1
360
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
Avatar for geeawa gawa
12
3.4k
Oxlintのカスタムルールの現況
Avatar for syumai syumai
5
980
ビジネスモデルから紐解く、AI+型駆動開発
Avatar for Hiroki Omote hirokiomote
2
5.2k
dRuby over BLE
Avatar for makicamel makicamel
2
300
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
Avatar for nrs nrslib
13
3.3k
Spec-Driven Development with AI-Agents: From High-Level Requirements to Working Software
Avatar for Anton Arhipov antonarhipov
2
440
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
Avatar for minako-ph minako__ph
4
1.3k
Migrations : C'est une question d'hygiène !
Avatar for Vincent Amstoutz vinceamstoutz
0
3.2k
TypeScriptだけでAIエージェントを作る フロント・エージェント・インフラのフルスタック実践
Avatar for Har1101 har1101
6
1.3k
AI 時代のソフトウェア設計の学び方
Avatar for 増田 亨 masuda220
PRO
29
12k
Old Dog, New Tricks: The Java 25 Reinvention - JNation
Avatar for A N M Bazlur Rahman bazlur_rahman
0
140

Featured

See All Featured
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
34k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
300
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.4k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.2k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
240
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
22k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
320
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
220
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k

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?