Tweet
Tweet

Slide 1

Slide 1 text

@KENNETH_SKOVHUS MOVING PLEO’S FRONTEND INTO THE THIRD AGE OF JAVASCRIPT FROM WEBPACK TO VITE @KENNETH_SKOVHUS REACT MEETUP AT PLEO JUNE 2022

Slide 2

Slide 2 text

@KENNETH_SKOVHUS HI! I'M KENNETH HAVING FUN WITH REACT SINCE 2015 πŸ§™ PLEO’S WEB CORE TEAM WORKED AT: ISSUU, LEO INNOVATION LABS, UNITY, TOMORROW (ELECTRICITYMAP.ORG)

Slide 3

Slide 3 text

Pleo Technologies About us One solution for all your spending.

Slide 4

Slide 4 text

@KENNETH_SKOVHUS VITE NEXT GENERATION FRONTEND TOOLING πŸ™‹

Slide 5

Slide 5 text

@KENNETH_SKOVHUS HISTORICAL CONTEXT

Slide 6

Slide 6 text

@KENNETH_SKOVHUS THIRD AGE OF JAVASCRIPT? INSPIRATION: SHAWN SWYX WANG

Slide 7

Slide 7 text

@KENNETH_SKOVHUS FIRST AGE OF JS 1997-2007 BUILDING OUT THE LANGUAGE

Slide 8

Slide 8 text

@KENNETH_SKOVHUS FIRST AGE OF JS 1997-2007 BUILDING OUT THE LANGUAGE LIBRARIES: DOJO, JQUERY, MOOTOOLS LANGUAGE: ES1-ES3, ES4 ABANDONED

Slide 9

Slide 9 text

@KENNETH_SKOVHUS FIRST AGE OF JS 1997-2007 BUILDING OUT THE LANGUAGE LIBRARIES: DOJO, JQUERY, MOOTOOLS LANGUAGE: ES1-ES3, ES4 ABANDONED MACROMEDIA FLASH THRIVING πŸŽ„

Slide 10

Slide 10 text

@KENNETH_SKOVHUS USERS EXPLORING AND EXPANDING THE LANGUAGE SECOND AGE OF JS 2009-2019

Slide 11

Slide 11 text

@KENNETH_SKOVHUS USERS EXPLORING AND EXPANDING THE LANGUAGE RUNTIMES: CHROME, NODE.JS (COMMON JS), ELECTRON, REACT NATIVE TOOLS: NPM, COFFEESCRIPT, BROWSERIFY, WEBPACK, FLOW, TYPESCRIPT, JEST, PRETTIER LIBRARIES: BACKBONE, ANGULAR, METEOR, REACT, VUE, SVELTE LANGUAGE: ES5, ES6 (MODULES), ES201X+ SECOND AGE OF JS 2009-2019

Slide 12

Slide 12 text

@KENNETH_SKOVHUS COLLAPSING LAYERS OF TOOLING & CLEARING AWAY LEGACY ASSUMPTIONS THIRD AGE OF JS 2020-2030?

Slide 13

Slide 13 text

@KENNETH_SKOVHUS CLEARING AWAY LEGACY ASSUMPTIONS πŸ‘‹ COMMON JS, MODULES NOT SUPPORTED πŸ‘‹ JS TOOLS BUILD IN JS πŸ‘‹ LANGUAGE VARIATIONS (BABEL, TYPESCRIPT) πŸ‘‹ CUSTOM FILE LOADERS (E.G. SVG, CSS MODULES) THIRD AGE OF JS 2020-2030?

Slide 14

Slide 14 text

@KENNETH_SKOVHUS RUNTIMES: DENO, ? TOOLS: ROME, ESBUILD, VITE, PARCEL, SWC, REASON, SVELTE THIRD AGE OF JS 2020-2030?

Slide 15

Slide 15 text

@KENNETH_SKOVHUS VITE β€œVIT” DEV SERVER & BUILD TOOL BY THE VUE COMMUNITY BASED ON ESBUILD (GO) & ROLLUP

Slide 16

Slide 16 text

@KENNETH_SKOVHUS VITE β€œVIT” DEV: ESM (NO BUNDLING), INSTANT HMR PROD: BUNDLING USING ROLLUP

Slide 17

Slide 17 text

@KENNETH_SKOVHUS PLEO CONTEXT

Slide 18

Slide 18 text

@KENNETH_SKOVHUS

Slide 19

Slide 19 text

@KENNETH_SKOVHUS REACT TYPESCRIPT SINGLE PAGE APP CLIENT SIDE RENDERED ~250K LINES OF CODE

Slide 20

Slide 20 text

@KENNETH_SKOVHUS SLOW CUSTOM TOOLCHAIN BASED ON WEBPACK 4 2019 MAY: DREAMING OF REPLACE THIS WITH A COMMUNITY MAINTAINED ONE (E.G. CREATE REACT APP) 2022 APRIL: WE MIGRATED TO VITE

Slide 21

Slide 21 text

@KENNETH_SKOVHUS LET US SEE HOW WE DID IT

Slide 22

Slide 22 text

@KENNETH_SKOVHUS 🚧 WHAT NEEDED TO BE DONE?

Slide 23

Slide 23 text

@KENNETH_SKOVHUS 🚧 GET RID OF COMMON JS AND WEBPACK LOADER SYNTAX

Slide 24

Slide 24 text

@KENNETH_SKOVHUS 🚧 GET RID OF COMMON JS AND WEBPACK LOADER SYNTAX

Slide 25

Slide 25 text

@KENNETH_SKOVHUS 🚧 SWITCH TO RELATIVE DYNAMIC IMPORTS

Slide 26

Slide 26 text

@KENNETH_SKOVHUS 🚧 UPGRADE DEPENDENCIES FOR ESM COMPATIBILITY πŸ™ˆ

Slide 27

Slide 27 text

@KENNETH_SKOVHUS 🚧 HACK SOME DEPENDENCIES FOR ESM COMPATIBILITY import {viteCommonjs} from '@originjs/vite-plugin-commonjs' resolve: { alias: { // Workaround as ESM version of react-virtualized is broken. // https://github.com/bvaughn/react-virtualized/issues/1212 'react-virtualized': 'react-virtualized/dist/umd/react-virtualized.js', }, }, plugins: [ // Fix missing ESM support for legacy third parties viteCommonjs({include: ['react- fl exbox-grid']), ]

Slide 28

Slide 28 text

@KENNETH_SKOVHUS 🚧 ENABLE JS-LINGUI (I18N) TO SUPPORT ESBUILD vite-plugin-babel-macros

Slide 29

Slide 29 text

@KENNETH_SKOVHUS 🚧 ENABLE JS-LINGUI (I18N) TO SUPPORT ESBUILD

Slide 30

Slide 30 text

@KENNETH_SKOVHUS 🚧 MAKE STORYBOOK NOT DEPEND ON OLD WEBPACK SETUP

Slide 31

Slide 31 text

@KENNETH_SKOVHUS 🚧 DELETE WEBPACK CODE AND RELATED DEPENDENCIES!

Slide 32

Slide 32 text

@KENNETH_SKOVHUS 🌦 TESTING, TESTING, TESTING

Slide 33

Slide 33 text

@KENNETH_SKOVHUS

Slide 34

Slide 34 text

@KENNETH_SKOVHUS THE OUTCOME* *) DISCLAIMER: CUSTOM WEBPACK SETUP POTENTIALLY NOT SUPER OPTIMIZED

Slide 35

Slide 35 text

@KENNETH_SKOVHUS THE OUTCOME: PRODUCTION BUILD (CI) Webpack Vite % 212s Β±8s 89s Β± 5s -58 %

Slide 36

Slide 36 text

@KENNETH_SKOVHUS THE OUTCOME: YARN START TO INTERACTION Webpack Vite % 50s 12s -76 %

Slide 37

Slide 37 text

@KENNETH_SKOVHUS THE OUTCOME: HOT MODULE REPLACEMENT Webpack Vite % n/a (~800ms compile) 2-40ms πŸš€πŸš€πŸš€

Slide 38

Slide 38 text

@KENNETH_SKOVHUS THE OUTCOME: FIRST CONTENTFUL PAINT Webpack Vite % 10s Β±0.6s 7.2s Β±0.6s -28 % Better bundle splitting, less down-levelling, better tree shaking

Slide 39

Slide 39 text

@KENNETH_SKOVHUS THE OUTCOME: LIGHTHOUSE PERFORMANCE Webpack Vite % 78 89 14 % Better bundle splitting, less down-levelling, better tree shaking

Slide 40

Slide 40 text

@KENNETH_SKOVHUS THE OUTCOME: LEAN BUILD/DEV CONFIG ~100 lines of Vite con fi guration

Slide 41

Slide 41 text

@KENNETH_SKOVHUS 😍

Slide 42

Slide 42 text

@KENNETH_SKOVHUS CLEARING AWAY LEGACY ASSUMPTIONS πŸ‘‹ COMMON JS, MODULES NOT SUPPORTED πŸ‘‹ JS TOOLS BUILD IN JS πŸ‘‹ LANGUAGE VARIATIONS (BABEL, TYPESCRIPT) πŸ‘‹ CUSTOM FILE LOADERS (E.G. SVG, CSS MODULES) THIRD AGE OF JS 2020-2030?

Slide 43

Slide 43 text

@KENNETH_SKOVHUS DEVELOPMENT (ESM) AND PRODUCTION (BUNDLED) ENVIRONMENT FURTHER APART TRADEOFFS?

Slide 44

Slide 44 text

@KENNETH_SKOVHUS MOVING PLEO’S FRONTEND INTO THE THIRD AGE OF JAVASCRIPT FROM WEBPACK TO VITE @KENNETH_SKOVHUS REACT MEETUP AT PLEO JUNE 2022

Slide 45

Slide 45 text

@KENNETH_SKOVHUS MOVING PLEO’S FRONTEND INTO THE THIRD AGE OF JAVASCRIPT FROM X TO Y @KENNETH_SKOVHUS REACT MEETUP AT PLEO JUNE 2022

Slide 46

Slide 46 text

@KENNETH_SKOVHUS THANKS FOR LISTENING!