Intro to MontageJS

Ba70f10866cbab0bc6b9b1d547ef8015?s=47 Ryan Paul
January 27, 2014

Intro to MontageJS

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

Ba70f10866cbab0bc6b9b1d547ef8015?s=128

Ryan Paul

January 27, 2014
Tweet

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