Front-end Systems At Scale

Slide 1

Slide 1 text

Front-end systems at scale with @fox ✨

Slide 2

Slide 2 text

Tim Berners-Lee built HTML 25 years ago

Slide 3

Slide 3 text

Håkon Wium Lie created CSS 5 years after eager.io/blog/the-languages-which-almost-were-css/

Slide 4

Slide 4 text

CSS is still the building block carrying the metaphor of design into the living Web.

Slide 5

Slide 5 text

The landscape of front-end tools is fascinating and overwhelming ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results

Slide 6

Slide 6 text

Advanced tooling is a blessing and a curse. speakerdeck.com/fox/no-more-tools

Slide 7

Slide 7 text

What’s in a tool?

Slide 8

Slide 8 text

A tool addresses human needs by amplifying human capabilities.That is, a tool converts what we can do into what we want to do. —Bret Victor worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/

Slide 9

Slide 9 text

Only when we have a shaped hypothesis about the experience in mind, should we proceed to choose the right tools. —Alexey Ivanov

Slide 10

Slide 10 text

We jump on the bandwagon of newest technologies ‘cause nobody wants to work on a monolith.

Slide 11

Slide 11 text

How to scale CSS?

Slide 12

Slide 12 text

Tools are supposed to be the panacea for developers’ headaches. They’re not—architecture is.

Slide 13

Slide 13 text

Problems of CSS at scale Global namespace Dependencies Dead Code Elimination Miniﬁcation Sharing Constants Non-deterministic Resolution Isolation speakerdeck.com/vjeux/react-css-in-js

Slide 14

Slide 14 text

Problems of CSS at scale Scoping and speciﬁcity Dependencies Refactoring Performance Sharing Constants Collaboration and Knowledge Sharing

Slide 15

Slide 15 text

How do we solve these problems with CSS tooling?

Slide 16

Slide 16 text

Transforming CSS

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

We don’t understand what pre- and post-processing mean.

Slide 20

Slide 20 text

Future-prooﬁng is pre-processing.

Slide 21

Slide 21 text

Post-processing is an umbrella for automation tasks for production, deploy-ready code.

Slide 22

Slide 22 text

What is PostCSS?

Slide 23

Slide 23 text

PostCSS is a parser allowing building systems to transform CSS.

Slide 24

Slide 24 text

→ sneakertack.github.io/postcss-playground/ CSS → CSS parser module → module module → stringiﬁer

Slide 25

Slide 25 text

` ` { "use": ["postcss-import", "postcss-simple-vars", "postcss-cssnext"], "input": "src/main.css", "output": "dist/main.css", "local-plugins": "true", "postcss-cssnext": { "browsers": "last 2 versions", "verbose": true } } postcss.config.json Example of usage

Slide 26

Slide 26 text

` ` "scripts": { "postinstall": "npm run watch", "watch": "onchange 'src/*.css' -- npm run build", "minify": "postcss -u cssnano dist/main.css -o dist/main.min.css", "cleanup": "del-cli dist/main.css", "build:css": "postcss -c postcss.config.json", "build": "npm run build:css && npm run minify && npm run cleanup" } package.json github.com/thefoxis/postcss-npm-boilerplate

Slide 27

Slide 27 text

PostCSS is comprehensible and beginner-friendly.

Slide 28

Slide 28 text

https://github.com/postcss/benchmark PostCSS is faster.

Slide 29

Slide 29 text

PostCSS is feature rich.

Slide 30

Slide 30 text

Portability might not be easy.

Slide 31

Slide 31 text

What is ?

Slide 32

Slide 32 text

cssnext is a plugin allowing usage of tomorrow’s CSS syntax today.

Slide 33

Slide 33 text

cssnext is future-proof.

Slide 34

Slide 34 text

CSS isn’t a programming language.

Slide 35

Slide 35 text

Future-prooﬁng might be tricky.

Slide 36

Slide 36 text

What are ?

Slide 37

Slide 37 text

CSS modules offer full style encapsulation. glenmaddern.com/articles/css-modules

Slide 38

Slide 38 text

No global scoping.

Slide 39

Slide 39 text

No speciﬁcity wars.

Slide 40

Slide 40 text

Increased barrier to entry with JavaScript-like ecosystem.

Slide 41

Slide 41 text

What does all of that mean for scaling front-end systems?

Slide 42

Slide 42 text

Problems of CSS at scale ✅ Scoping and speciﬁcity ✅ Dependencies ✅ Refactoring ✅ Performance ✅ Sharing Constants Collaboration and Knowledge Sharing

Slide 43

Slide 43 text

It’s easier to back up from a bad engineering decision rather than reinvent bad working culture.

Slide 44

Slide 44 text

We need to support design and software choices we make, not only for our users, but our future-selves and teammates.

Slide 45

Slide 45 text

Document and enforce standards in a teaching, empathetic way.

Slide 46

Slide 46 text

People over technology.

Slide 47

Slide 47 text

Thank you speakerdeck.com/fox/frontend-systems-at-scale github.com/davidtheclark/scalable-css-reading-list ⚡ cssnext.io postcss.org github.com/css-modules/css-modules