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

Collocation in Modern Web

1135c452bcb851741181b804cd184972?s=47 Rahul Kadyan
October 28, 2017
Programming
0
10

Collocation in Modern Web

Notes on using collocation in modern web applications.

1135c452bcb851741181b804cd184972?s=128

Rahul Kadyan

October 28, 2017
Tweet

More Decks by Rahul Kadyan

See All by Rahul Kadyan
1135c452bcb851741181b804cd184972?s=48 znck
0
150
1135c452bcb851741181b804cd184972?s=48 znck
4
2.2k
1135c452bcb851741181b804cd184972?s=48 znck
0
82
1135c452bcb851741181b804cd184972?s=48 znck
0
260
1135c452bcb851741181b804cd184972?s=48 znck
0
25
1135c452bcb851741181b804cd184972?s=48 znck
0
13

Other Decks in Programming

See All in Programming
C6b97a47d5406cfdef50a5c755751c16?s=48 sorami
3
920
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
6
1.8k
4d40d82cc3c676e8a67ffc2a473bf423?s=48 kyoheig3
0
110
E3c2bac7a4a04823dda122cf243edd01?s=48 claudioed
0
330
7fccfb690a818ed2f3a15fc21d426d5a?s=48 texmeijin
0
200
B83842a07c4241e2aec3e2dfeedf16fe?s=48 mu_mu_mu
0
340
F21d69109b1c03921abf7d12f0fb6654?s=48 dscs
0
140
023b04c98f39cc041293d780352432ff?s=48 koic
12
1.1k
F34c64bc7a4bced65306809205aca33c?s=48 nologyance
0
240
B9d723a1439affc92fcd589446f73d3b?s=48 yukukotani
2
1k
85637f06e3366e5cc4c84780cc346141?s=48 ryunen344
1
340
8d6f91b92f4408a5ed8a4675f9034339?s=48 arigatobank
1
140

Featured

See All Featured
282d599b414022eba5096510f675b6e2?s=48 chrislema
232
16k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
54k
245cee81a9c424266e5e401d844ea881?s=48 lara
27
3.5k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
9k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
349
27k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
224
15k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
3.9k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
241
23k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
405
20k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
6
1k

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