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
34
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
38
Choosing Vue.js
znck
0
28
Other Decks in Programming
See All in Programming
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
1
1.4k
データマイグレーションの成功戦略~サービスリニューアルで失敗しないための実践ガイド~
tkzwtks
8
860
Prompt Engineering for Developers @ AWS Community Day Adria 2024
slobodan
0
110
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
160
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
9
1.7k
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
110
cgroup v2 support in Kubeadm
kentatada
0
220
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
2.4k
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
200
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
670
Serverless renderování Webových komponent
rarous
PRO
0
140
Mercari AI/LLM Hackathon TeamBの発表資料
imaikosuke
0
190
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Optimizing for Happiness
mojombo
376
69k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
No one is an island. Learnings from fostering a developers community.
thoeni
19
2.9k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Ruby is Unlike a Banana
tanoku
96
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Building Adaptive Systems
keathley
38
2.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
What's new in Ruby 2.0
geeforr
342
31k
Designing for humans not robots
tammielis
249
25k
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