prejss: the final point in the css war
TRANSCRIPT
PreJSS: the final point in the CSS war
Denis Izmaylov
Mar 15, 2017
Denis Izmaylov1. Over 17 years of Software and Web
development experience
2. The last 7 years focused exclusively on Front-end and Web: 15+ projects,including React.js, SPA and high-load
3. Open Source contributor
4. Talks: HighLoad++ 2015, AgileDays 2016, DevConf 2016, React Amsterdam, etc
5. Regular speaker on MoscowJS
6. Few popular articles and interviewson Medium and Habrahabr
7. Events: Moscow Node.js Meetup, Moscow Kubernetes Meetup and this one
Web and Mobile development services
1. We develop Web, Mobile and DevOps projects for our customers
2. Global international market (EU, APAC, US, HK)
3. Most efficient and performant technologies
4. More than 20 talents engineers and designers
5. Remote-friendly
Prerequisite Knowledge
1. SCSS
2. PostCSS
3. JSS
5
Huge thanks to everyone in JavaScript community
who made those years better
7
1994
8
Better
1. Scripts in hypertext documents
2. XHR (aka AJAX)
3. Styling elements
9
Draw UI in documents
“It is a triumph of performance over semantics”
10
Let’s hack Document Object Model
(DOM)
11
But
Pure Applications
Requirements are growing
16
Code refactoring and technical debts are expensive
New abstractions to deliver changes faster
18
More abstractions – more source code
Split by scripts
20
More requirements – more scripts
Load order hell
Split by scripts
1. Require.js
2. AMD
3. CommonJS
4. Dependencies
5. Pre-build step
2009
JavaScript bundles
26
1. Modules
2. Images
3. Fonts
4. Data
5. CSS
JavaScript bundles
27
1. Modules
2. Images
3. Fonts
4. Data
5. CSS
JavaScript bundles
More requirements - more CSS
New abstractions to deliver changes faster
29
More abstractions - more source code
CSS became scripts
31
1. Variables
2. Functions
3. Mixins
4. Templates
5. Nesting
6. etc
32
CSS formats hell
33
1. LESS
2. SASS/SCSS
3. Stylus
4. …
There was long years of CSS preprocessors war
SASS finally won
35
SASS finally won
36
Monolithic
2nd Generation
37
1. Rework/Styl
2. PostCSS
PostCSS
38
PostCSS
39
1. Parse CSS to AST/JSON tree
2. Apply plugins to this tree
3. Compile final tree to CSS
PostCSS
40
1. Parse CSS to AST/JSON tree
2. Apply plugins to this tree
3. Compile final tree to CSS
• CSS powered by plugins
• CSS modules
PostCSS
41
“Post-modern”
|
“after CSS”
CSS in Applications
42
1. Build step
2. Build time
3. CSS is not about styling my documents
4. CSS is about UI and components
5. CSS is a script language
6. CSS is a part of your code
Complexity
44
After PostCSS
45
1. Do not parse CSS.Define styles in JavaScript objects.
2. Do not use plugins for everything.Use plain functions instead.
3. Use default plugins presets, like Babel.
— Seriously? CSS in JS?!
2013, Facebook, React.js
47
2013, Facebook, React.js
XML-like constructions in JavaScript code to explain
Components tree
48
React covers HTML elements only *
October 2014, JSS
Noveber 2014, CSS-in-JS
Christopher Chedeau, Facebook
51
React Native
52
JSS is not about Inline Styles
JSS generates a real CSS from JavaScript
JSS notation
JSS usage
56
Killer feature
58
Critical Path CSS
Styles by JSSPre-processed CSS
1. All styles
2. Selected manually
3. Per CSS file
1. Rendered styles
2. Selected automatically
3. Per Components state
JSS features
60
1. Render styles for Component tree onlyto get Critical CSS
2. Remove styles when Components detached
3. Styles re-calculation “on-the-fly”
4. Portable: DOM, Inline Styles, React Native
5. Great performance
JSS maintenance
61
What’s about bad things?
JSS means
1. You can’t re-use already existing CSS
2. You can’t copy CSS from a wide range of awesome examples
3. You can’t copy CSS from DevTools
Good news
Now you can
PreJSS
Universal CSS to JSS adapter
After PreJSS
Template Strings + PostCSS +
JSS + ❤ = PreJSS
Problems before
72
1. Wide range of CSS frameworks
2. A lot of CSS formats
3. A few of CSS parsers
4. A dozens of JSS formats
5. Hard to migrate from CSS to JSS
PreJSS Architecture
1. Styles Declaration
2. CSS Parser *
3. PreJSS Adapter *
Styles Declarations
PreJSS Adapter
Any CSS-in-JS
library
Prepare CSS
CSS Parser
Prepare JSS
* - optional, overridable, PostCSS as default
(built-in)
73
74
1. Use already existing CSS
2. Use CSS from a wide range of awesome examples
3. Use CSS from DevTools
PreJSS means
Syntax Highlighting Concept
PreJSS ecosystem
76
1. Loader for webpack to use CSS styles as JSS
2. Babel plugin to transform PreJSS Styles Declarations into JSS objects
3. Styles Linter by PostCSS plugin
4. Syntax highlighting (WIP)
5. CLI tool for converting CSS into JS modules
PreJSS in real world
77
78
PreJSS
JSS
CSS
1. No CSS wars anymore
2. Vendor-less
3. Use the best bits ofwhole CSS world
4. Less complexity
5. Saved time and budget
6. Focus on important things
PreJSS is the final point
79
100th star today 🎉
https://twitter.com/denisizmaylov/status/736321066403045376
80
Welcome to the club
https://github.com/axept/prejss
82
Questions?
@DenisIzmaylov
DenisIzmaylov
denis_izmaylov
Denis Izmaylov
Send “Hello” to: