Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Intro to MontageJS
Ryan Paul
January 27, 2014
Programming
1
170
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
700
Introduction to Basejump
segphault
1
1k
Realtime data visualization with RethinkDB and Epoch
segphault
1
580
Realtime web apps with RethinkDB and full-stack Ruby
segphault
2
270
Jupyter and RethinkDB
segphault
1
450
Using RethinkDB with Tornado & EventMachine
segphault
0
450
RethinkDB Training Course
segphault
3
360
RethinkDB Cluster Monitoring
segphault
0
400
Composing frontend Web applications with MontageJS
segphault
4
980
Other Decks in Programming
See All in Programming
既存のプロジェクトにKMMを導入するための対応策
martysuzuki
2
280
microCMS × imgixを活用して品質とレスポンスを両立したポートフォリオサイトを作成した話
takehitogoto
0
380
近況PHP / PHP in now a days
uzulla
0
470
iOSアプリの技術選択2022
tattn
3
1.2k
バンドル最適化マニアクス at tfconf
mizchi
3
1.3k
From Java 11 to 17 and beyond
josepaumard
0
280
Android入門
hn410
0
300
Kotlin 最新動向2022 #tfcon #techfeed
ntaro
1
600
Kotlin KSP - Intro
taehwandev
0
380
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
manfredsteyer
PRO
0
260
Micro Frontend Routing – Solutions for mature applications - iJS 04/2022
michaelzikes
0
150
Micro Frontends with Module Federation: Beyond the Basics
manfredsteyer
PRO
0
300
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
16
8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Building Applications with DynamoDB
mza
83
4.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.1k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
Ruby is Unlike a Banana
tanoku
91
9.2k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Raft: Consensus for Rubyists
vanstee
126
5.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
343
17k
Thoughts on Productivity
jonyablonski
43
2.2k
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