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
980
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
320
Jupyter and RethinkDB
segphault
1
680
Using RethinkDB with Tornado & EventMachine
segphault
0
650
RethinkDB Training Course
segphault
3
410
RethinkDB Cluster Monitoring
segphault
0
710
Composing frontend Web applications with MontageJS
segphault
4
1.4k
Other Decks in Programming
See All in Programming
tidymodelsによるtidyな生存時間解析 / Japan.R2024
dropout009
1
720
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
270
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
120
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
4
150
Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道
shibuyamizuho
0
160
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
300
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1k
ソフトウェアの振る舞いに着目し 複雑な要件の開発に立ち向かう
rickyban
0
890
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
350
.NET 9アプリをCGIとして レンタルサーバーで動かす
mayuki
1
770
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Italy
prof18
0
150
ブラウザ単体でmp4書き出すまで - muddy-web - 2024-12
yue4u
2
460
Featured
See All Featured
Code Review Best Practice
trishagee
65
17k
Optimising Largest Contentful Paint
csswizardry
33
3k
Unsuck your backbone
ammeep
669
57k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
94
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Side Projects
sachag
452
42k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
We Have a Design System, Now What?
morganepeng
51
7.3k
How GitHub (no longer) Works
holman
311
140k
Code Reviewing Like a Champion
maltzj
520
39k
Visualization
eitanlees
146
15k
Making the Leap to Tech Lead
cromwellryan
133
9k
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