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

Composing frontend Web applications with MontageJS

Composing frontend Web applications with MontageJS

An introduction to MontageJS and Montage Studio, presented at JSConf US in 2014.

Ryan Paul

May 28, 2014
Tweet

More Decks by Ryan Paul

Other Decks in Programming

Transcript

  1. Composing frontend Web
    applications with MontageJS
    montagestudio.com
    @montagejs
    [email protected]
    Ryan Paul
    Dev Relations
    @segphault

    View Slide

  2. Ryan Paul
    @segphault
    Montage Studio
    Dev Relations

    View Slide

  3. Interchangeable Parts

    View Slide

  4. while
    --
    $1"
    -*
    0:
    c
    h
    return
    x
    l
    r
    t
    *
    !
    Software Components

    View Slide

  5. ASSEMBLE
    APPLICATIONS
    by
    COMPOSING
    COMPONENTS

    View Slide

  6. Framework for frontend web development
    Ideal for building single-page applications
    Best suited for modern browsers
    Open source, under BSD license
    What is MontageJS?

    View Slide

  7. CONTENT
    >
    HTML
    CODE
    JS
    JAVASCRIPT
    DECLARATION
    {}
    JSON
    COMPONENT.REEL

    View Slide

  8. >
    HTML
    COMPONENT.REEL

    !
    !






    ...



    !

    View Slide

  9. {}
    JSON
    COMPONENT.REEL

    Declarative description of a component’s contents
    Instantiates objects nested inside component
    Attach components to the page DOM
    Populate component properties

    View Slide

  10. {}
    JSON "celsiusNumberfield": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "celsius"}
    },
    "bindings": {
    "value": {"": "([email protected] - 32) / 1.8"}
    }
    },
    "fahrenheitNumberfield": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "fahrenheit"},
    "value": "32"
    }
    },


    HTML
    JSON
    COMPONENT.REEL

    View Slide

  11. {}
    JSON "celsiusNumberfield": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "celsius"}
    },
    "bindings": {
    "value": {"": "([email protected] - 32) / 1.8"}
    }
    },
    "fahrenheitNumberfield": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "fahrenheit"},
    "value": "32"
    }
    },


    HTML
    JSON
    Prototype: reference to a module ID

    View Slide

  12. {}
    JSON "celsiusNumberfield": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "celsius"}
    },
    "bindings": {
    "value": {"": "([email protected] - 32) / 1.8"}
    }
    },
    "fahrenheitNumberfield": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "fahrenheit"},
    "value": "32"
    }
    },


    HTML
    JSON
    Element: Montage ID of DOM element

    View Slide

  13. Bindings
    • Functional Reactive Bindings (FRB)
    • Propagate changes between object
    properties
    • Can be 1-way or 2-way
    • Bind to other components or regular
    JavaScript objects
    FRB
    FRB

    View Slide

  14. {}
    JSON "celsiusNumberfield": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "celsius"}
    },
    "bindings": {
    "value": {"": "([email protected] - 32) / 1.8"}
    }
    },
    "fahrenheitNumberfield": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "fahrenheit"},
    "value": "32"
    }
    },


    HTML
    JSON
    signifies a 2-way binding

    View Slide

  15. {}
    JSON "celsiusNumberfield": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "celsius"}
    },
    "bindings": {
    "value": {"": "([email protected] - 32) / 1.8"}
    }
    },
    "fahrenheitNumberfield": {
    "prototype": "digit/ui/number-field.reel",
    "properties": {
    "element": {"#": "fahrenheit"},
    "value": "32"
    }
    },


    HTML
    JSON
    @ references an existing object

    View Slide

  16. >
    {} No procedural flow control
    statements in the HTML



    Vote


    +
     Clean, Semantic Markup

    View Slide

  17. DEMO

    View Slide

  18. "paths": [
    {
    "knots": [
    {
    "previousHandlerPosition": [],
    "nextDensity": 10,
    "previousDensity": 10,
    "knotPosition": [ -761.874, -270, 691.324],
    "rotateX": 0, "rotateY": 0, "rotateZ": 0, "opacity": 1,
    "nextHandlerPosition": [ 738.125, -270, -328.675]
    },
    {
    "knotPosition": [ 1937.09, -270, -1316.049],
    "nextHandlerPosition": [ 3207.825, -270, -1461.849],
    "previousHandlerPosition": [ 666.374, -270, -1170.25],
    "nextDensity": 10, "previousDensity": 10,
    "rotateX": 0, "rotateY": 0, "rotateZ": 0, "opacity": 1
    }
    ],
    Flow Declaration

    View Slide

  19. HOMOICONICITY
    A MontageJS component declaration is data
    that you can manipulate programmatically.

    View Slide

  20. Application Authoring
    You are already using tools, are they the right ones?
    !
    WYSIWYG HTML authoring has not worked
    !
    Visual authoring that exploits MontageJS homoiconicity

    View Slide

  21. NO CODE GENERATION

    View Slide

  22. DEMO

    View Slide

  23. DEMO

    View Slide

  24. montagestudio.com/c/jsconfus
    JOIN THE BETA

    View Slide

  25. QUESTIONS?

    View Slide