Save 37% off PRO during our Black Friday Sale! »

Collocation in Modern Web

Collocation in Modern Web

Notes on using collocation in modern web applications.

1135c452bcb851741181b804cd184972?s=128

Rahul Kadyan

October 28, 2017
Tweet

Transcript

  1. Collocation in Modern Web

  2. DO WE WRITE PROGRAMS

  3. <!doctype html> <html> <head> <style> .title { color: red; }

    </style> </head> <body> <h1 class="title"> </h1> <script> document.querySelector('.title') .innerHTML = 'Collocation' </script> </body> </html> index.html
  4. + src + components - header.js - header.css - nav.js

    - nav.css - app.js - app.css
  5. Modern Web Apps

  6. C o l l o c a t i o

    n & R e a c t
  7. import React, { Component } from 'react' export default class

    Header extends Component { render () { return ( <header className='my-header'> {this.children} </header> ) } } header.jsx
  8. .my-header { margin: 16px; font-size: 1.5rem; color: black; } header.css

  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 ( <header className={styles.header}> {this.children} </header> ) } } header.jsx
  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 ( <header className={myHeader}> {this.children} </header> ) } }
  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
  12. header.html <template id="template"> <style> .my-header { margin: 16px; font-size: 1.5rem;

    color: black; } </style> <header class="my-header"> <slot> </slot> </header> </template> <script> class Header extends HTMLElement { connectedCallback () { const doc = document.currentScript.ownerDocument const template = doc.querySelector('#template') this.attachShadow({ mode: 'open' }) this.shadowRoot.appendChild( doc.importNode(template.content, true)) } } window.customElements.define('my-header', Header) </script>
  13. C o l l o c a t i o

    n & V u e
  14. <template> <header class="my-header"> <slot /> </header> </template> <script> export default

    { name: 'MyHeader' } </script> <style> .my-header { margin: 16px; font-size: 1.5rem; color: black; } </style> header.vue
  15. p u s h i n g e v e

    n f u r t h e r
  16. <template> <header class="my-header"> <slot /> </header> </template> <script> export default

    { name: 'MyHeader' } </script> <style> .my-header { margin: 16px; font-size: 1.5rem; color: black; } </style> header.vue
  17. <template> <header class="my-header"> <slot /> </header> </template> <script> export default

    { name: 'MyHeader' } </script> <style scoped> .my-header { margin: 16px; font-size: 1.5rem; color: black; } </style> header.vue
  18. header.vue <template> <header :class="$style['my-header']"> <slot /> </header> </template> <script> export

    default { name: 'MyHeader' } </script> <style module> .my-header { margin: 16px; font-size: 1.5rem; color: black; } </style>
  19. header.vue <template> <header> <slot /> </header> </template> <script> export default

    { name: 'MyHeader' } </script> <docs> # MyHeader It renders a custom header element. ... </docs>
  20. header.vue <template> <header> <slot /> </header> </template> <script> export default

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

    { name: 'MyHeader' } </script> <story> <MyComponent /> </story> <story name="With content"> <MyComponent> <h1>DevFest 17 </h1> </MyComponent> </story>
  22. Collocation — Review! Improved Readability Better CSS Easy Distribution Encapsulation

    Single Source Static Analysis Compile-time Optimisations Style Scoping And many more…
  23. @znck0 Twitter znck Github znck.me Website vue-bangalore Meetup

  24. None