Collocation in Modern Web

DO WE WRITE PROGRAMS

.title { color: red; }

document.querySelector('.title') .innerHTML = 'Collocation' 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 ( {this.children} ) } } 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 ( {this.children} ) } } 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 ( {this.children} ) } }

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 .my-header { margin: 16px; font-size: 1.5rem; color: black; } 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)

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

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

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

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

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

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

header.vue export default { name: 'MyHeader' } # MyHeader It renders a custom header element. ...

header.vue export default { name: 'MyHeader' } import { mount } from 'vue-test-utils' test(`it renders children`, t => { const w = mount(Component, { slots: { default: '

Hello World

' } }) t.true(w.contains('h1')) })

header.vue export default { name: 'MyHeader' }

DevFest 17

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

No content