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
200
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
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
Composing frontend Web applications with MontageJS
segphault
4
1.5k
Other Decks in Programming
See All in Programming
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
120
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
640
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
130
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
RDoc meets YARD
okuramasafumi
4
170
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
2.8k
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
570
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
Art, The Web, and Tiny UX
lynnandtonic
303
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Done Done
chrislema
185
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Music & Morning Musume
bryan
46
6.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Automating Front-end Workflow
addyosmani
1370
200k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building Adaptive Systems
keathley
43
2.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
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