Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PreJSS: the final point in the CSS war

Slides from my talk on React Moscow Meetup 2 at March 15, 2017.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

  • Be the first to like this

PreJSS: the final point in the CSS war

  1. 1. PreJSS: the final point in the CSS war Denis Izmaylov Mar 15, 2017
  2. 2. Denis Izmaylov 1. 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 interviews
 on Medium and Habrahabr 7. Events: Moscow Node.js Meetup, Moscow Kubernetes Meetup and this one
  3. 3. Web and Mobile development services
  4. 4. 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
  5. 5. Prerequisite Knowledge 1. SCSS 2. PostCSS 3. JSS 5
  6. 6. Huge thanks to everyone in JavaScript community who made those years better
  7. 7. 7 1994
  8. 8. 8 Better 1. Scripts in hypertext documents 2. XHR (aka AJAX) 3. Styling elements
  9. 9. 9 Draw UI in documents
  10. 10. “It is a triumph of performance over semantics” 10
  11. 11. Let’s hack Document Object Model
 (DOM) 11
  12. 12. But
  13. 13. Pure Applications
  14. 14. Requirements are growing
  15. 15. 16
  16. 16. Code refactoring and technical debts are expensive
  17. 17. New abstractions to deliver changes faster 18
  18. 18. More abstractions – more source code
  19. 19. Split by scripts 20
  20. 20. More requirements – more scripts
  21. 21. Load order hell
  22. 22. Split by scripts
  23. 23. 1. Require.js 2. AMD 3. CommonJS 4. Dependencies 5. Pre-build step 2009
  24. 24. JavaScript bundles
  25. 25. 26 1. Modules 2. Images 3. Fonts 4. Data 5. CSS JavaScript bundles
  26. 26. 27 1. Modules 2. Images 3. Fonts 4. Data 5. CSS JavaScript bundles
  27. 27. More requirements - more CSS
  28. 28. New abstractions to deliver changes faster 29
  29. 29. More abstractions - more source code
  30. 30. CSS became scripts 31 1. Variables 2. Functions 3. Mixins 4. Templates 5. Nesting 6. etc
  31. 31. 32
  32. 32. CSS formats hell 33 1. LESS 2. SASS/SCSS 3. Stylus 4. …
  33. 33. There was long years of CSS preprocessors war
  34. 34. SASS finally won 35
  35. 35. SASS finally won 36 M onolithic
  36. 36. 2nd Generation 37 1. Rework/Styl 2. PostCSS
  37. 37. PostCSS 38
  38. 38. PostCSS 39 1. Parse CSS to AST/JSON tree 2. Apply plugins to this tree 3. Compile final tree to CSS
  39. 39. 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
  40. 40. PostCSS 41 “Post-modern” | “after CSS”
  41. 41. 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
  42. 42. Complexity
  43. 43. 44
  44. 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.
  45. 45. — Seriously? CSS in JS?!
  46. 46. 2013, Facebook, React.js 47
  47. 47. 2013, Facebook, React.js XML-like constructions in JavaScript code to explain Components tree 48
  48. 48. React covers HTML elements only *
  49. 49. October 2014, JSS
  50. 50. Noveber 2014, CSS-in-JS Christopher Chedeau, Facebook 51
  51. 51. React Native 52
  52. 52. JSS is not about Inline Styles
  53. 53. JSS generates a real CSS from JavaScript
  54. 54. JSS notation
  55. 55. JSS usage 56
  56. 56. Killer feature
  57. 57. 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
  58. 58. JSS features 60 1. Render styles for Component tree only
 to 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
  59. 59. JSS maintenance 61
  60. 60. What’s about bad things?
  61. 61. 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
  62. 62. Good news
  63. 63. Now you can
  64. 64. PreJSS
  65. 65. Universal CSS to JSS adapter
  66. 66. After PreJSS
  67. 67. Template Strings + PostCSS + JSS + ❤ = PreJSS
  68. 68. 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
  69. 69. 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
  70. 70. 74 1. Use already existing CSS 2. Use CSS from a wide range of awesome examples 3. Use CSS from DevTools PreJSS means
  71. 71. Syntax Highlighting Concept
  72. 72. 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
  73. 73. PreJSS in real world 77
  74. 74. 78 PreJSS JSS CSS 1. No CSS wars anymore 2. Vendor-less 3. Use the best bits of
 whole CSS world 4. Less complexity 5. Saved time and budget 6. Focus on important things PreJSS is the final point
  75. 75. 79 100th star today 🎉
  76. 76. https://twitter.com/denisizmaylov/status/ 736321066403045376 80
  77. 77. Welcome to the club
  78. 78. https://github.com/axept/prejss 82
  79. 79. Questions? @DenisIzmaylov DenisIzmaylov denis_izmaylov Denis Izmaylov Send“Hello”to: izmaylov.dm@gmail.com

    Be the first to comment

    Login to see the comments

Slides from my talk on React Moscow Meetup 2 at March 15, 2017.

Views

Total views

345

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

4

Shares

0

Comments

0

Likes

0

×