Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Composing frontend Web applications with MontageJS
Search
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.
Ryan Paul
May 28, 2014
Tweet
Share
More Decks by Ryan Paul
See All by Ryan Paul
Using Async Iterators in Node.js
segphault
0
1.1k
Introduction to Basejump
segphault
1
1.4k
Realtime data visualization with RethinkDB and Epoch
segphault
1
740
Realtime web apps with RethinkDB and full-stack Ruby
segphault
2
320
Jupyter and RethinkDB
segphault
1
730
Using RethinkDB with Tornado & EventMachine
segphault
0
700
RethinkDB Training Course
segphault
3
440
RethinkDB Cluster Monitoring
segphault
0
780
Intro to MontageJS
segphault
1
200
Other Decks in Programming
See All in Programming
Deep Dive into Kotlin Flow
jmatsu
1
360
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
160
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
530
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
330
Featured
See All Featured
Visualization
eitanlees
148
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
GraphQLとの向き合い方2022年版
quramy
49
14k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Rails Girls Zürich Keynote
gr2m
95
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cult of Friendly URLs
andyhume
79
6.6k
The Invisible Side of Design
smashingmag
301
51k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Transcript
Composing frontend Web applications with MontageJS montagestudio.com @montagejs ✉
[email protected]
Ryan Paul Dev Relations @segphault
Ryan Paul @segphault Montage Studio Dev Relations
Interchangeable Parts
while -- $1" -* 0: c h return x l
r t * ! Software Components
ASSEMBLE APPLICATIONS by COMPOSING COMPONENTS
Framework for frontend web development Ideal for building single-page applications
Best suited for modern browsers Open source, under BSD license What is MontageJS?
CONTENT </> HTML CODE JS JAVASCRIPT DECLARATION {} JSON COMPONENT.REEL
</> HTML COMPONENT.REEL ! ! <!DOCTYPE html> <html> <head>
</head> <body> <div data-montage-id="owner" class=“Main”> ... </div> </body> </html> !
{} JSON COMPONENT.REEL Declarative description of a component’s contents
Instantiates objects nested inside component Attach components to the page DOM Populate component properties
{} 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
{} 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
{} 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
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
{} 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
{} 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
</> {} 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
DEMO
"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
HOMOICONICITY A MontageJS component declaration is data that you can
manipulate programmatically.
Application Authoring You are already using tools, are they the
right ones? ! WYSIWYG HTML authoring has not worked ! Visual authoring that exploits MontageJS homoiconicity
NO CODE GENERATION
DEMO
DEMO
montagestudio.com/c/jsconfus JOIN THE BETA
QUESTIONS?