Reactjs at postmates

6pm - 7pm: Guest checkin & NDA signing, mingling, eating & drinking
7pm - 7:30: @anmolm_ - React at Postmates
7:30 - 8pm: @devongovett - React with Parcel
8pm - 8:30: @jamiebuild - The Cost of Transpiling

React with Parcel

• Why Parcel?
• webpack replacement
• similar to webpack,

feature

• zero configuration
• support for HTML, CSS, JS
• code splitting
• blazing fast

parcel index.html

demo

module.hot.accept();

index.styl
install stylus => new css way?

parcel build index.html --detailed-report

parcel2

• complete rewrite
• entirly new plugin system
• optionally configurable
• improved core data structure
• even more scalable for large apps
• split out plugins into separate npm packages

parcel2 config example

• json

parcel2 plugins

• resolvers
• transformers
• bundlers
• namers
• runtimes

multiple targets

• legacy browser build and modern browser build targets

aautomatic code splitting

• no manual configuration for code splitting
• bundler plugins allow custom logic to group assets into bundles
• default bundler will support async import(), automatic bundle sharing when asset used in multiple bundles I/ML assisted code splitting

https://isparcel2readyyet.com

action item

• parcel seems cool, let’s try it out
• stylus css, let’s try this too

The Cost of Transpiling

• babel
• designing babel
• usually creates more lines during traspiling
• 98b to 4187b
• minified
  • 89b min to 2210b min + 2473%
• 500 babel-compiled files starts at 1MB
• what about gzip
• nothing really matters
• node_fucking_moudles
• https://browserl.ist
• google “barbel-runtime”
• google “terser js”