Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Collocation in Modern Web
Search
Rahul Kadyan
October 28, 2017
Programming
0
32
Collocation in Modern Web
Notes on using collocation in modern web applications.
Rahul Kadyan
October 28, 2017
Tweet
Share
More Decks by Rahul Kadyan
See All by Rahul Kadyan
Inversion of Control in a Vue Application
znck
0
310
New Vue. New Compiler. Let's Unpack
znck
4
2.5k
Head first into composition API
znck
0
120
Future of Vue – JSFoo VueDay 2019
znck
0
470
React to Vue: why and how?
znck
0
37
Choosing Vue.js
znck
0
27
Other Decks in Programming
See All in Programming
PHPを書く理由、PHPを書いていて良い理由 / Reasons to write PHP and why it is good to write PHP
seike460
PRO
5
270
Unlocking Python's Core Magic
leew
0
100
API Platform for Laravel
dunglas
1
1.2k
モジュラモノリス、その前に / Modular monolith, before that
euglena1215
3
390
DjangoNinjaで高速なAPI開発を実現する
masaya00
0
420
WEBアプリケーションにおけるAWS Lambdaを用いた大規模な非同期処理の実践
delhi09
PRO
7
3.6k
Flutterアプリを生成AIで生成する勘所
rizumita
0
240
Kotlin Multiplatform at Stable and Beyond (Kotlin Vienna, October 2024)
zsmb
2
320
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
2
170
M5Stackボードの選び方
tanakamasayuki
0
200
"型"のあるRailsアプリケーション開発 / Typed Rails application development
sinsoku
8
2.2k
Quarto Clean Theme
nicetak
0
220
Featured
See All Featured
Unsuck your backbone
ammeep
667
57k
Gamification - CAS2011
davidbonilla
80
5k
Music & Morning Musume
bryan
46
6.1k
Optimizing for Happiness
mojombo
375
69k
Designing with Data
zakiwarfel
98
5.1k
Done Done
chrislema
181
16k
Git: the NoSQL Database
bkeepers
PRO
425
64k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
29
1.7k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
The Language of Interfaces
destraynor
154
24k
Typedesign – Prime Four
hannesfritz
39
2.3k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Transcript
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
<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
<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
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>
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>
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>
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
None