Collocation in Modern Web

Notes on using collocation in modern web applications.

Transcript

1. Collocation
   in Modern Web
   

   View Slide

2. DO
   WE WRITE
   PROGRAMS
   

   View Slide

3. 
   
   
   <br/>.title {<br/>color: red;<br/>}<br/>
   
   
   
   <br/>document.querySelector('.title')<br/>.innerHTML = 'Collocation'<br/>
   
   
   index.html
   

   View Slide

4. + src
   + components
   - header.js
   - header.css
   - nav.js
   - nav.css
   - app.js
   - app.css
   

   View Slide

5. Modern
   Web Apps
   

   View Slide

6. C o l l o c a t i o n
   &
   R e a c t
   

   View Slide

7. import React, { Component } from 'react'
   export default
   class Header extends Component {
   render () {
   return (
   
   {this.children}
   
   )
   }
   }
   header.jsx
   

   View Slide

8. .my-header {
   margin: 16px;
   font-size: 1.5rem;
   color: black;
   }
   header.css
   

   View Slide

9. import React, { Component } from 'react'
   import StyleSheet from 'some-css-in-js'
   const styles = StyleSheet.create({
   header: { margin: '16px',
   fontSize: '16px',
   color: 'black'
   }
   })
   export default
   class Header extends Component {
   render () {
   return (
   
   {this.children}
   
   )
   }
   }
   header.jsx
   

   View Slide

10. header.jsx
    import React, { Component } from 'react'
    import style from 'some-css-in-js'
    const myHeader = style`
    margin: 16px;
    font-size: 1.5rem;
    color: black;
    `
    export default
    class Header extends Component {
    render () {
    return (
    
    {this.children}
    
    )
    }
    }
    

    View Slide

11. C o l l o c a t i o n
    &
    W e b
    C o m p o n e n t s
    

    View Slide

12. header.html
    
    <br/>.my-header {<br/>margin: 16px;<br/>font-size: 1.5rem;<br/>color: black;<br/>}<br/>
    
    
    
    
    <br/>class Header extends HTMLElement {<br/>connectedCallback () {<br/>const doc = document.currentScript.ownerDocument<br/>const template = doc.querySelector('#template')<br/>this.attachShadow({ mode: 'open' })<br/>this.shadowRoot.appendChild(<br/>doc.importNode(template.content, true))<br/>}<br/>}<br/>window.customElements.define('my-header', Header)<br/>
    

    View Slide

13. C o l l o c a t i o n
    &
    V u e
    

    View Slide

14. 
    
    
    
    
    <br/>export default {<br/>name: 'MyHeader'<br/>}<br/>
    <br/>.my-header {<br/>margin: 16px;<br/>font-size: 1.5rem;<br/>color: black;<br/>}<br/>
    header.vue
    

    View Slide

15. p u s h i n g
    e v e n
    f u r t h e r
    

    View Slide

16. 
    
    
    
    
    <br/>export default {<br/>name: 'MyHeader'<br/>}<br/>
    <br/>.my-header {<br/>margin: 16px;<br/>font-size: 1.5rem;<br/>color: black;<br/>}<br/>
    header.vue
    

    View Slide

17. 
    
    
    
    
    <br/>export default {<br/>name: 'MyHeader'<br/>}<br/>
    <br/>.my-header {<br/>margin: 16px;<br/>font-size: 1.5rem;<br/>color: black;<br/>}<br/>
    header.vue
    

    View Slide

18. header.vue
    
    
    
    
    
    <br/>export default {<br/>name: 'MyHeader'<br/>}<br/>
    <br/>.my-header {<br/>margin: 16px;<br/>font-size: 1.5rem;<br/>color: black;<br/>}<br/>
    

    View Slide

19. header.vue
    
    
    
    
    
    <br/>export default {<br/>name: 'MyHeader'<br/>}<br/>
    
    # MyHeader
    It renders a custom header element.
    ...
    
    

    View Slide

20. header.vue
    
    
    
    <br/>export default { name: 'MyHeader' }<br/>
    
    import { mount } from 'vue-test-utils'
    test(`it renders children`, t => {
    const w = mount(Component, {
    slots: {
    default: 'Hello World '
    }
    })
    t.true(w.contains('h1'))
    })
    
    

    View Slide

21. header.vue
    
    
    
    <br/>export default { name: 'MyHeader' }<br/>
    
    
    
    
    
    DevFest 17
    
    
    

    View Slide

22. Collocation — Review!
    Improved
    
    Readability
    Better
    
    CSS
    Easy
    
    Distribution
    Encapsulation
    Single
    
    Source
    Static
    
    Analysis
    Compile-time
    
    Optimisations
    Style
    
    Scoping And many
    
    more…
    

    View Slide

23. @znck0
    Twitter
    znck
    Github
    znck.me
    Website
    vue-bangalore
    Meetup
    

    View Slide

24. View Slide