Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to MontageJS

Ryan Paul
January 27, 2014

Intro to MontageJS

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

Ryan Paul

January 27, 2014
Tweet

More Decks by Ryan Paul

Other Decks in Programming

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