Intro to MontageJS

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

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 minit@latest
    

    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": {"": "(+@number.value - 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