Collocation in Modern Web

Notes on using collocation in modern web applications.

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