An introductory overview of MontageJS, a modern framework for frontend Web development.

1. Introduction
MontageJS
to

2. Ryan Paul
MontageJS
Dev Relations
@segphault

3. The Web
Evolving
is

4. Hypertext
Document
Medium
from

5. to
Interactive
Application
Platform

6. WE NEED A
FRAMEWORK
BRIDGE THE GAP
to

7. • 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?

8. • Component System
• Deferred Drawing
• Functional Reactive
Bindings
Key Features

9. • Component System
• Deferred Drawing
• Functional Reactive
Bindings
Key Features
FRB

10. • Component System
• Deferred Drawing
• Functional Reactive
Bindings
Key Features
FRB

11. Components
HTML
Content
CSS
Styling
FRB
Bindings
JS
Code
component.reel

12. Install
MontageJS
$ sudo npm install -gq minit@latest

13. Create Project
$ minit create:app -n app-name
Create Component
$ minit create:component -n compname

14. Filesystem
assets
images
style
node_modules
digit
montage
ui
main.reel
welcome.reel
index.html
package.json

15. 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

16. Serialization
• Instantiate components
• Attach components to
the page DOM
• Populate component
properties — static
values or bindings

17. FRB
Bindings
• Propagate changes
between object
properties
• Can be 1-way or 2-way
• Bind to other components
or regular JS objects

18. Serialization
"number": {
"prototype": "digit/ui/number-field.reel",
"properties": {
"element": {"#": "number"}
}
}
<input data-montage-id="number" /> HTML
MJS

19. Serialization
"number": {
"prototype": "digit/ui/number-field.reel",
"properties": {
"element": {"#": "number"}
}
}
<input data-montage-id="number" /> HTML
MJS
Prototype: path to the desired component

20. Serialization
"number": {
"prototype": "digit/ui/number-field.reel",
"properties": {
"element": {"#": "number"}
}
}
<input data-montage-id="number" /> HTML
MJS
Element: Montage ID of DOM element

21. "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

22. "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

23. "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

24. "celsiusNumber": {
"prototype": "digit/ui/number-field.reel",
"properties": {
"element": {"#": "celsius"}
},
"bindings": {
"value": {"<->": "(+@number.value - 32) / 1.8"}
}
}
MJS
Complex FRB Expressions

25. !
"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

26. • 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

27. MontageJS Optimizer
$ sudo npm install -g mop
$ mop

28. Thank You!
MontageJS.org
@MontageJS