$30 off During Our Annual Pro Sale. View Details »

Collocation in Modern Web

Collocation in Modern Web

Notes on using collocation in modern web applications.

Rahul Kadyan

October 28, 2017
Tweet

More Decks by Rahul Kadyan

Other Decks in Programming

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