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
Intro to MontageJS
Search
Ryan Paul
January 27, 2014
Programming
1
190
Intro to MontageJS
An introductory overview of MontageJS, a JavaScript MVC framework for frontend development.
Ryan Paul
January 27, 2014
Tweet
Share
More Decks by Ryan Paul
See All by Ryan Paul
Using Async Iterators in Node.js
segphault
0
1k
Introduction to Basejump
segphault
1
1.4k
Realtime data visualization with RethinkDB and Epoch
segphault
1
720
Realtime web apps with RethinkDB and full-stack Ruby
segphault
2
320
Jupyter and RethinkDB
segphault
1
700
Using RethinkDB with Tornado & EventMachine
segphault
0
670
RethinkDB Training Course
segphault
3
420
RethinkDB Cluster Monitoring
segphault
0
750
Composing frontend Web applications with MontageJS
segphault
4
1.4k
Other Decks in Programming
See All in Programming
SwiftUI API Design Lessons
niw
1
270
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
0
620
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.4k
Chrome Extension Techniques from Hell
moznion
1
160
Vibe Codingをせずに Clineを使っている
watany
17
6.1k
技術選定を未来に繋いで活用していく
sakito
3
110
DomainException と Result 型で作る型安全なエラーハンドリング
karszawa
0
900
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
1k
List とは何か? / PHPerKaigi 2025
meihei3
0
780
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
110
AI時代の開発者評価について
ayumuu
0
120
AI Agents with JavaScript
slobodan
0
220
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Music & Morning Musume
bryan
47
6.5k
Building an army of robots
kneath
304
45k
The Language of Interfaces
destraynor
157
24k
The Cult of Friendly URLs
andyhume
78
6.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Transcript
Introduction MontageJS to
Ryan Paul MontageJS Dev Relations @segphault
The Web Evolving is
Hypertext Document Medium from
to Interactive Application Platform
WE NEED A FRAMEWORK BRIDGE THE GAP to
• Framework for frontend web development • Ideal for building
single-page applications • Best suited for projects that target modern browsers • Open source, under BSD license What is MontageJS?
• Component System • Deferred Drawing • Functional Reactive Bindings
Key Features
• Component System • Deferred Drawing • Functional Reactive Bindings
Key Features FRB
• Component System • Deferred Drawing • Functional Reactive Bindings
Key Features FRB
Components HTML Content CSS Styling FRB Bindings JS Code component.reel
Install MontageJS $ sudo npm install -gq minit@latest
Create Project $ minit create:app -n app-name Create Component $
minit create:component -n compname
Filesystem assets images style node_modules digit montage ui main.reel welcome.reel
index.html package.json
Filesystem assets images style node_modules digit montage ui main.reel welcome.reel
index.html package.json ! main.reel main.html main.css main.js
Serialization • Instantiate components • Attach components to the page
DOM • Populate component properties — static values or bindings
FRB Bindings • Propagate changes between object properties • Can
be 1-way or 2-way • Bind to other components or regular JS objects
Serialization "number": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "number"}
} } <input data-montage-id="number" /> HTML MJS
Serialization "number": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "number"}
} } <input data-montage-id="number" /> HTML MJS Prototype: path to the desired component
Serialization "number": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "number"}
} } <input data-montage-id="number" /> HTML MJS Element: Montage ID of DOM element
"number": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "number"} }
}, "slider": { "prototype": "digit/ui/slider.reel", "properties": { "element": {"#": "slider"} }, "bindings": { "value": {"<->": "@number.value"} } } Adding a 2nd component <input data-montage-id="number" /> <input data-montage-id="slider" type="range" /> HTML MJS
"number": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "number"} }
}, "slider": { "prototype": "digit/ui/slider.reel", "properties": { "element": {"#": "slider"} }, "bindings": { "value": {"<->": "@number.value"} } } <input data-montage-id="number" /> <input data-montage-id="slider" type="range" /> HTML MJS <-> signifies a 2-way binding
"number": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "number"} }
}, "slider": { "prototype": "digit/ui/slider.reel", "properties": { "element": {"#": "slider"} }, "bindings": { "value": {"<->": "@number.value"} } } <input data-montage-id="number" /> <input data-montage-id="slider" type="range" /> HTML MJS @ references an existing component
"celsiusNumber": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "celsius"} },
"bindings": { "value": {"<->": "(
[email protected]
- 32) / 1.8"} } } MJS Complex FRB Expressions
! "sorted": {"<-": “numbers.sorted{}”} ! "evens": {"<-": “numbers.filter{!(%2)}”} ! "low":
{"<-": “numbers.filter{this <= ^maxNumber}”} ! "allChecked": {"<-": “options.every{checked}”} ! "payroll": {"<-": “departments.map{employees.sum{salary}}.sum()”} ! "index": {"<-": “folks.group{id}.sorted{.0}.map{.1.last()}”} MJS Fun with FRB
• Command line tool that optimizes apps for production deployment
• Consolidates code into bundles to reduce number of requests • Minifies code to reduce total download size MontageJS Optimizer
MontageJS Optimizer $ sudo npm install -g mop $ mop
Thank You! MontageJS.org @MontageJS