Intro to MontageJS

461 views

Published on

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

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
461
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Intro to MontageJS

  1. 1. Introduction MontageJS to
  2. 2. Ryan Paul MontageJS Dev Relations @segphault
  3. 3. The Web Evolving is
  4. 4. Hypertext Document Medium from
  5. 5. to Interactive Application Platform
  6. 6. WE NEED A FRAMEWORK BRIDGE THE GAP to
  7. 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. 8. • Component System • Deferred Drawing • Functional Reactive Bindings Key Features
  9. 9. • Component System • Deferred Drawing • Functional Reactive Bindings Key Features FRB
  10. 10. • Component System • Deferred Drawing • Functional Reactive Bindings Key Features FRB
  11. 11. Components HTML Content CSS Styling FRB Bindings JS Code component.reel
  12. 12. Install MontageJS $ sudo npm install -gq minit@latest
  13. 13. Create Project $ minit create:app -n app-name Create Component $ minit create:component -n compname
  14. 14. Filesystem assets images style node_modules digit montage ui main.reel welcome.reel index.html package.json
  15. 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. 16. Serialization • Instantiate components • Attach components to the page DOM • Populate component properties — static values or bindings
  17. 17. FRB Bindings • Propagate changes between object properties • Can be 1-way or 2-way • Bind to other components or regular JS objects
  18. 18. Serialization "number": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "number"} } } <input data-montage-id="number" /> HTML MJS
  19. 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. 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. 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. 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. 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. 24. "celsiusNumber": { "prototype": "digit/ui/number-field.reel", "properties": { "element": {"#": "celsius"} }, "bindings": { "value": {"<->": "(+@number.value - 32) / 1.8"} } } MJS Complex FRB Expressions
  25. 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. 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. 27. MontageJS Optimizer $ sudo npm install -g mop $ mop
  28. 28. Thank You! MontageJS.org @MontageJS

×