Intro to MontageJS
2 likes883 views
MontageJS is a framework for building interactive web applications using components. It features a component system, deferred drawing for performance, and functional reactive bindings (FRB) to propagate changes between components. MontageJS provides tools to create, build, and optimize projects, including a command line tool to bundle and minify code for production deployment. Components are defined in JSON and linked to DOM elements, and FRB bindings allow data to flow between component properties and update automatically.
Intro to MontageJS
- 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
- 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
- 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": {"<->": "([email protected] - 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