Notes on using collocation in modern web applications.
Collocationin Modern Web
View Slide
DOWE WRITEPROGRAMS
<br/>.title {<br/>color: red;<br/>}<br/> <br/>document.querySelector('.title')<br/>.innerHTML = 'Collocation'<br/>index.html
+ src+ components- header.js- header.css- nav.js- nav.css- app.js- app.css
ModernWeb Apps
C o l l o c a t i o n&R e a c t
import React, { Component } from 'react'export defaultclass 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 defaultclass Header extends Component {render () {return ({this.children})}}header.jsx
header.jsximport React, { Component } from 'react'import style from 'some-css-in-js'const myHeader = style`margin: 16px;font-size: 1.5rem;color: black;`export defaultclass Header extends Component {render () {return ({this.children})}}
C o l l o c a t i o n&W e bC o m p o n e n t s
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/>
C o l l o c a t i o n&V u e
<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
p u s h i n ge v e nf u r t h e r
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/>
header.vue<br/>export default {<br/>name: 'MyHeader'<br/>}<br/># MyHeaderIt renders a custom header element....
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'))})
header.vue <br/>export default { name: 'MyHeader' }<br/>DevFest 17
Collocation — Review!ImprovedReadabilityBetterCSSEasyDistributionEncapsulationSingleSourceStaticAnalysisCompile-timeOptimisationsStyleScoping And manymore…
@znck0TwitterznckGithubznck.meWebsitevue-bangaloreMeetup