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

    View Slide

  2. Ryan Paul
    MontageJS
    Dev Relations
    @segphault

    View Slide

  3. The Web
    Evolving
    is

    View Slide

  4. Hypertext
    Document
    Medium
    from

    View Slide

  5. to
    Interactive
    Application
    Platform

    View Slide

  6. WE NEED A
    FRAMEWORK
    BRIDGE THE GAP
    to

    View Slide

  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?

    View Slide

  8. • Component System
    • Deferred Drawing
    • Functional Reactive
    Bindings
    Key Features

    View Slide

  9. • Component System
    • Deferred Drawing
    • Functional Reactive
    Bindings
    Key Features
    FRB

    View Slide

  10. • Component System
    • Deferred Drawing
    • Functional Reactive
    Bindings
    Key Features
    FRB

    View Slide

  11. Components
    HTML
    Content
    CSS
    Styling
    FRB
    Bindings
    JS
    Code
    component.reel

    View Slide

  12. Install
    MontageJS
    $ sudo npm install -gq [email protected]

    View Slide

  13. Create Project
    $ minit create:app -n app-name
    Create Component
    $ minit create:component -n compname

    View Slide

  14. Filesystem
    assets
    images
    style
    node_modules
    digit
    montage
    ui
    main.reel
    welcome.reel
    index.html
    package.json

    View Slide

  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

    View Slide

  16. Serialization
    • Instantiate components
    • Attach components to
    the page DOM
    • Populate component
    properties — static
    values or bindings

    View Slide

  17. FRB
    Bindings
    • Propagate changes
    between object
    properties
    • Can be 1-way or 2-way
    • Bind to other components
    or regular JS objects

    View Slide

  18. Serialization
    "number": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "number"}
    }
    }
    HTML
    MJS

    View Slide

  19. Serialization
    "number": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "number"}
    }
    }
    HTML
    MJS
    Prototype: path to the desired component

    View Slide

  20. Serialization
    "number": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "number"}
    }
    }
    HTML
    MJS
    Element: Montage ID of DOM element

    View Slide

  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


    HTML
    MJS

    View Slide

  22. "number": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "number"}
    }
    },
    "slider": {
    "prototype": "digit/ui/slider.reel",
    "properties": {
    "element": {"#": "slider"}
    },
    "bindings": {
    "value": {"": "@number.value"}
    }
    }


    HTML
    MJS
    signifies a 2-way binding

    View Slide

  23. "number": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "number"}
    }
    },
    "slider": {
    "prototype": "digit/ui/slider.reel",
    "properties": {
    "element": {"#": "slider"}
    },
    "bindings": {
    "value": {"": "@number.value"}
    }
    }


    HTML
    MJS
    @ references an existing component

    View Slide

  24. "celsiusNumber": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "celsius"}
    },
    "bindings": {
    "value": {"": "([email protected] - 32) / 1.8"}
    }
    }
    MJS
    Complex FRB Expressions

    View Slide

  25. !
    "sorted": {"!
    "evens": {"!
    "low": {"!
    "allChecked": {"!
    "payroll": {"!
    "index": {"MJS
    Fun with FRB

    View Slide

  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

    View Slide

  27. MontageJS Optimizer
    $ sudo npm install -g mop
    $ mop

    View Slide

  28. Thank You!
    MontageJS.org
    @MontageJS

    View Slide