Composing frontend Web applications with MontageJS

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

Transcript

1. Composing frontend Web
   applications with MontageJS
   montagestudio.com
   @montagejs
   ✉ ryan@montagestudio.com
   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": {"": "(+@fahrenheitNumberfield.value - 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": {"": "(+@fahrenheitNumberfield.value - 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": {"": "(+@fahrenheitNumberfield.value - 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": {"": "(+@fahrenheitNumberfield.value - 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": {"": "(+@fahrenheitNumberfield.value - 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