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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
790
Realtime web apps with RethinkDB and full-stack Ruby
segphault
2
350
Jupyter and RethinkDB
segphault
1
760
Using RethinkDB with Tornado & EventMachine
segphault
0
730
RethinkDB Training Course
segphault
3
470
RethinkDB Cluster Monitoring
segphault
0
810
Intro to MontageJS
segphault
1
220
Other Decks in Programming
See All in Programming
ベクトル検索のフィルタを用いた機械学習モデルとの統合 / python-meetup-fukuoka-06-vector-attr
monochromegane
2
500
API Platformを活用したPHPによる本格的なWeb API開発 / api-platform-book-intro
ttskch
1
150
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
tanishiking
0
120
20260313 - Grafana & Friends Taipei #1 - Kubernetes v1.36 的開發雜記:那些困在 Alpha 加護病房太久的 Metrics
tico88612
0
230
安いハードウェアでVulkan
fadis
0
730
ふつうのRubyist、ちいさなデバイス、大きな一年 / Ordinary Rubyists, Tiny Devices, Big Year
chobishiba
1
490
go directiveを最新にしすぎないで欲しい話──あるいは、Go 1.26からgo mod initで作られるgo directiveの値が変わる話 / Go 1.26 リリースパーティ
arthur1
2
580
Kubernetesでセルフホストが簡単なNewSQLを求めて / Seeking a NewSQL Database That's Simple to Self-Host on Kubernetes
nnaka2992
0
170
SourceGeneratorのマーカー属性問題について
htkym
0
210
AI活用のコスパを最大化する方法
ochtum
0
280
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
nikkei_engineer_recruiting
0
210
守る「だけ」の優しいEMを抜けて、 事業とチームを両方見る視点を身につけた話
maroon8021
3
1.2k
Featured
See All Featured
Building Adaptive Systems
keathley
44
3k
WCS-LA-2024
lcolladotor
0
490
How to Think Like a Performance Engineer
csswizardry
28
2.5k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
220
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
120
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
160
Faster Mobile Websites
deanohume
310
31k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building AI with AI
inesmontani
PRO
1
820
Claude Code のすすめ
schroneko
67
220k
How to Ace a Technical Interview
jacobian
281
24k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
980
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?