Collocation in Modern Web

DO WE WRITE PROGRAMS

<!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

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

Modern Web Apps

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

import React, { Component } from 'react' export default class
Header extends Component { render () { return ( <header className='my-header'> {this.children} </header> ) } } header.jsx

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

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

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> ) } }

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

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>

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

<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

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

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

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

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>

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

{ 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>

{ name: 'MyHeader' } </script> <story> <MyComponent /> </story> <story name="With content"> <MyComponent> <h1>DevFest 17 </h1> </MyComponent> </story>

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

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

Collocation in Modern Web

Collocation in Modern Web

Rahul Kadyan

More Decks by Rahul Kadyan

Other Decks in Programming

Featured

Transcript