ParcelJS - The next generation of web bundler

A introduction to Parcel, a much faster and simpler alternative to Webpack and why it would be the tool of choice for your next web project.

Transcript

1. ParcelJS The next generation of web bundler Timothy Dang @supatimbo CDB WebSync 9 August 2018
2. What is Parcel?
3. What is Parcel? A super light-weight, zero-configuration bundler tool
4. What is Parcel? A super light-weight, zero-configuration bundler tool Almost no learning curve
5. What is Parcel? A super light-weight, zero-configuration bundler tool Almost no learning curve Released in December 2017
6. What is Parcel? A super light-weight, zero-configuration bundler tool Almost no learning curve Released in December 2017 Part of the alternatives to Webpack (apart from Browserify, Rollup, Fusebox)
7. What is Parcel? A super light-weight, zero-configuration bundler tool Almost no learning curve Released in December 2017 Part of the alternatives to Webpack (apart from Browserify, Rollup, Fusebox) Performance focus - multicore compilation, filesystem cache for fast rebuilds.
8. What is Parcel? A super light-weight, zero-configuration bundler tool Almost no learning curve Released in December 2017 Part of the alternatives to Webpack (apart from Browserify, Rollup, Fusebox) Performance focus - multicore compilation, filesystem cache for fast rebuilds. Developer experience focus (friendly error logging & no-config HMR)
9. What is Parcel? A super light-weight, zero-configuration bundler tool Almost no learning curve Released in December 2017 Part of the alternatives to Webpack (apart from Browserify, Rollup, Fusebox) Performance focus - multicore compilation, filesystem cache for fast rebuilds. Developer experience focus (friendly error logging & no-config HMR) Provides API to customise and write your own bundler
10. Working with Parcel
11. Working with Parcel
12. Working with Parcel
13. Working with Parcel
14. Working with Parcel
15. Working with Parcel
16. Working with Parcel
17. Working with Parcel
20. But, wait..
21. But, wait.. Webpack 4 is also zero-config, isn’t it?
22. But, wait.. Webpack 4 is also zero-config, isn’t it? You no longer have to specify an entry and output.
23. But, wait.. Webpack 4 is also zero-config, isn’t it? You no longer have to specify an entry and output. Still need a webpack.config.js in most projects.
24. But, wait..
25. But, wait..
26. But, wait..
27. But, wait..
28. Parcel vs Webpack 3 & 4
29. Parcel vs Webpack 3 & 4 PARCEL WEBPACK
30. Parcel vs Webpack 3 & 4 PARCEL WEBPACK Entry points index.html, JS, TS files JS, TS files
31. Parcel vs Webpack 3 & 4 PARCEL WEBPACK Entry points index.html, JS, TS files JS, TS files Outputs Separate files for CSS, JavaScript bundle, images, etc. (Configurable) Inline by default (Configurable)
32. Parcel vs Webpack 3 & 4 PARCEL WEBPACK Entry points index.html, JS, TS files JS, TS files Outputs Separate files for CSS, JavaScript bundle, images, etc. (Configurable) Inline by default (Configurable) Configuration dot files (package.json, .babelrc, .postcssrc) webpack.config.js + dot files
33. Parcel vs Webpack 3 & 4 PARCEL WEBPACK Entry points index.html, JS, TS files JS, TS files Outputs Separate files for CSS, JavaScript bundle, images, etc. (Configurable) Inline by default (Configurable) Configuration dot files (package.json, .babelrc, .postcssrc) webpack.config.js + dot files Dev server Support out of the box with HMR webpack-dev-server with HMR
34. Parcel vs Webpack 3 & 4 PARCEL WEBPACK Entry points index.html, JS, TS files JS, TS files Outputs Separate files for CSS, JavaScript bundle, images, etc. (Configurable) Inline by default (Configurable) Configuration dot files (package.json, .babelrc, .postcssrc) webpack.config.js + dot files Dev server Support out of the box with HMR webpack-dev-server with HMR Compile time Multi-core. Compile code in parallel. Multi-thread and multi-core in webpack 4
35. Parcel vs Webpack 3 & 4 PARCEL WEBPACK Entry points index.html, JS, TS files JS, TS files Outputs Separate files for CSS, JavaScript bundle, images, etc. (Configurable) Inline by default (Configurable) Configuration dot files (package.json, .babelrc, .postcssrc) webpack.config.js + dot files Dev server Support out of the box with HMR webpack-dev-server with HMR Compile time Multi-core. Compile code in parallel. Multi-thread and multi-core in webpack 4 Caching Agressive FS caching mechanism Full-caching hasn’t been implemented yet.
36. Parcel vs Webpack 3 & 4 PARCEL WEBPACK Entry points index.html, JS, TS files JS, TS files Outputs Separate files for CSS, JavaScript bundle, images, etc. (Configurable) Inline by default (Configurable) Configuration dot files (package.json, .babelrc, .postcssrc) webpack.config.js + dot files Dev server Support out of the box with HMR webpack-dev-server with HMR Compile time Multi-core. Compile code in parallel. Multi-thread and multi-core in webpack 4 Caching Agressive FS caching mechanism Full-caching hasn’t been implemented yet. Plugins Only a handful of plugins Well supported community of plugins, loaders
37. Parcel vs Webpack 3 & 4 PARCEL WEBPACK Entry points index.html, JS, TS files JS, TS files Outputs Separate files for CSS, JavaScript bundle, images, etc. (Configurable) Inline by default (Configurable) Configuration dot files (package.json, .babelrc, .postcssrc) webpack.config.js + dot files Dev server Support out of the box with HMR webpack-dev-server with HMR Compile time Multi-core. Compile code in parallel. Multi-thread and multi-core in webpack 4 Caching Agressive FS caching mechanism Full-caching hasn’t been implemented yet. Plugins Only a handful of plugins Well supported community of plugins, loaders Code splitting Supported out of the box with zero-configuration using dynamic import() statement. Supported with entry points, CommonChunkPlugin or import() statement
38. Parcel supports these transformations CSS (SASS, LESS, Stylus, PostCSS) Images Babel JSX for React / Preact PostHTML TypeScript ReasonML/BuckleScript - ReasonReact
40. Is Parcel ready for real-world production app?
41. Is Parcel ready for real-world production app?
42. Is Parcel ready for real-world production app?
43. Is Parcel ready for real-world production app? Almost yes..
44. Is Parcel ready for real-world production app? Almost yes.. There’s still a few things to watch out for…
45. Is Parcel ready for real-world production app? Almost yes.. There’s still a few things to watch out for… Give it a try and experience it yourself.
46. Is Parcel ready for real-world production app? Almost yes.. There’s still a few things to watch out for… Give it a try and experience it yourself. It’s a great tool of choice depends on your use case.
47. Is Parcel ready for real-world production app? Almost yes.. There’s still a few things to watch out for… Give it a try and experience it yourself. It’s a great tool of choice depends on your use case.
48. Is Parcel ready for real-world production app? Almost yes.. There’s still a few things to watch out for… Give it a try and experience it yourself. It’s a great tool of choice depends on your use case.
49. Links Parcel on GitHub https://github.com/parcel-bundler/parcel https://github.com/fathyb/parcel-plugin-typescript —  Parcel plugin for better TS support https://github.com/fathyb/parcel-plugin-angular —  Parcel plugin for Angular https://github.com/parcel-bundler/awesome-parcel —  Awesome list of everything Parcel related Worth having a look at https://github.com/tensorflow/tfjs-examples - TensorFlowJS examples built with Parcel
50. Thank you