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.4k
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
960
Introduction to Basejump
segphault
1
1.3k
Realtime data visualization with RethinkDB and Epoch
segphault
1
690
Realtime web apps with RethinkDB and full-stack Ruby
segphault
2
310
Jupyter and RethinkDB
segphault
1
660
Using RethinkDB with Tornado & EventMachine
segphault
0
630
RethinkDB Training Course
segphault
3
410
RethinkDB Cluster Monitoring
segphault
0
680
Intro to MontageJS
segphault
1
190
Other Decks in Programming
See All in Programming
個人開発で使ってるやつを紹介する回
yohfee
1
670
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
200
Applied NLP in the Age of Generative AI
inesmontani
PRO
3
1.1k
コードレビューと私の過去と未来
jxmtst
0
210
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
170
Progressive Web Apps for Rails developers
siaw23
2
530
いまあるチームにフィットさせる Serverless そして Platform Engineeringへの挑戦 / Serverless Fits the Team You Have and Platform Engineering
seike460
PRO
2
1.4k
sqlcを利用してsqlに型付けを
kamiyam
0
230
上手に付き合うコンポーネントテスト
quramy
3
1.2k
Modern Functional Fluent CFML REST by Luis Majano
ortus24
0
130
ファーストペンギンBot @Qiita Hackathon 2024 予選
dyson_web
0
210
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
190
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.7k
Embracing the Ebb and Flow
colly
83
4.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Gamification - CAS2011
davidbonilla
80
5k
How to name files
jennybc
77
99k
From Idea to $5000 a Month in 5 Months
shpigford
380
46k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
279
13k
The Art of Programming - Codeland 2020
erikaheidi
50
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
2
220
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?