Intro to MontageJS

An introductory overview of MontageJS, a JavaScript MVC framework for frontend development.

Transcript

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