Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Composing frontend Web applications with MontageJS
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.
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
700
Introduction to Basejump
segphault
1
1k
Realtime data visualization with RethinkDB and Epoch
segphault
1
580
Realtime web apps with RethinkDB and full-stack Ruby
segphault
2
270
Jupyter and RethinkDB
segphault
1
450
Using RethinkDB with Tornado & EventMachine
segphault
0
450
RethinkDB Training Course
segphault
3
360
RethinkDB Cluster Monitoring
segphault
0
400
Intro to MontageJS
segphault
1
170
Other Decks in Programming
See All in Programming
JGS594 Lecture 23
javiergs
PRO
0
400
Micro Frontend Routing – Solutions for mature applications - iJS 04/2022
michaelzikes
0
150
ゼロから作る Protocol Buffer のパーサーとレキサー / Writing Protocol Buffer Parser/Lexer in Go from scratch
yoheimuta
1
150
型パラメータが使えるようになったのでLINQを実装してみた
makki_d
2
500
SRE NEXT 2022: Sensible Incident Management for Software Startups
takanabe
1
190
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
masayaaoyama
0
260
About Type Syntax Proposal
quramy
1
700
Android入門
hn410
0
300
質とスピード(2022春版、質疑応答用資料付き) / Quality and Speed 2022 Spring Edition
twada
PRO
27
17k
Node.js 最新動向 TFCon 2022
yosuke_furukawa
PRO
5
2.3k
microCMS × Shopifyで、ECサイトがリニューアル後急成長した話
microcms
0
440
Jetpack DataStore
djain2405
1
170
Featured
See All Featured
Bash Introduction
62gerente
596
210k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
Raft: Consensus for Rubyists
vanstee
126
5.4k
Robots, Beer and Maslow
schacon
152
7.1k
Atom: Resistance is Futile
akmur
255
20k
The Most Common Mistakes in Cover Letters
jrick
PRO
4
24k
Agile that works and the tools we love
rasmusluckow
319
19k
Building Applications with DynamoDB
mza
83
4.6k
Building Your Own Lightsaber
phodgson
94
4.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
900
Transcript
Composing frontend Web applications with MontageJS montagestudio.com @montagejs ✉ ryan@montagestudio.com
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": {"<->": "(+@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
{} 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
{} 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
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": {"<->": "(+@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
{} 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
</> {} 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?