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.3k
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
690
Using RethinkDB with Tornado & EventMachine
segphault
0
660
RethinkDB Training Course
segphault
3
420
RethinkDB Cluster Monitoring
segphault
0
740
Composing frontend Web applications with MontageJS
segphault
4
1.4k
Other Decks in Programming
See All in Programming
Drawing Heighway’s Dragon- Recursive Function Rewrite- From Imperative Style in Pascal 64 To Functional Style in Scala 3
philipschwarz
PRO
0
110
Jasprが凄い話
hyshu
0
180
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
220
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
640
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
390
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
160
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
240
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
300
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
120
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Writing Fast Ruby
sferik
628
61k
Visualization
eitanlees
146
15k
Navigating Team Friction
lara
183
15k
It's Worth the Effort
3n
184
28k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Unsuck your backbone
ammeep
669
57k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
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": {"<->": "(+@number.value - 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