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
35
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
320
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
500
React to Vue: why and how?
znck
0
38
Choosing Vue.js
znck
0
29
Other Decks in Programming
See All in Programming
RWC 2024 DICOM & ISO/IEC 2022
m_seki
0
200
As an Engineers, let's build the CRM system via LINE Official Account 2.0
clonn
1
670
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
1
350
MCP with Cloudflare Workers
yusukebe
2
220
複雑な仕様に立ち向かうアーキテクチャ
myohei
0
170
Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道
shibuyamizuho
0
160
CSC305 Lecture 25
javiergs
PRO
0
130
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Italy
prof18
0
150
Criando Commits Incríveis no Git
marcelgsantos
2
170
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
240
tidymodelsによるtidyな生存時間解析 / Japan.R2024
dropout009
1
730
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.3k
Git: the NoSQL Database
bkeepers
PRO
427
64k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Scaling GitHub
holman
458
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.2k
What's in a price? How to price your products and services
michaelherold
243
12k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Code Reviewing Like a Champion
maltzj
520
39k
Building Your Own Lightsaber
phodgson
103
6.1k
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