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”

COMMENTS
Related Post