Intro to MontageJS

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