Parcel – your next web application bundler? by Janis Koselevs at FrontCon 2019
- 1. PARCEL your next web application bundler? Janis Koselevs, FrontCon 2019
- 2. Who am I? ● Husband and father ● Trained UX and Design Thinking evangelist and practitioner ● Passionate Front-end developer for 15+ years ● 7+ years growing and leading FED specialty in Accenture Latvia (taking care of ~100 FE developers) ● Lately don’t code so much daily, unfortunately...
- 4. You know these (task runners)
- 5. And you know these (web application/module bundlers)
- 6. Beef I have with existing bundlers ● Modern bundlers treat JS as first class citizen and CSS and other assets as second class citizens… ● Usually JS is main entry point ● Feels complex and over engineered for simple sites/apps - shooting flies with cannon ○ Learning curve ○ Configuration, configuration, configuration… ● I think I have a mild case of OCD and “perfection” - I like things in particular order or from similar/same philosophy so they play nicely together by default and always looking for better solution
- 7. New kid on the block
- 8. What is parcel? “Blazing fast, zero configuration web application bundler” - https://parceljs.org/
- 9. Why parcel is great? 1/2 ● Blazing fast bundle times ○ Parcel uses worker processes to enable multicore compilation, and has a filesystem cache for fast rebuilds even after a restart. ● Bundle all your assets ○ Parcel has out of the box support for JS, CSS, HTML, file assets, and more - no plugins needed. ● Automatic transforms ○ Code is automatically transformed using Babel, PostCSS, and PostHTML when needed - even node_modules
- 10. Why parcel is great? 2/2 ● Zero config code splitting ○ Using the dynamic import() syntax, Parcel splits your output bundles so you only load what is needed on initial load. ● Hot module replacement ○ Parcel automatically updates modules in the browser as you make changes during development, no configuration needed. ● Friendly error logging ○ Parcel prints syntax highlighted code frames when it encounters errors to help you pinpoint the problem.
- 11. How to start using parcel?
- 12. Install parcel npm install -g parcel-bundler
- 13. Create entry index.html file <html> <header> <link rel="stylesheet" href="./style.css"> </header> <body> <script src="./index.js"></script> </body> </html>
- 14. Create your script.js file console.log(‘hello parcel!’)
- 15. Create your style.css file .main { background: yellow; color: black; }
- 16. Run the parcel parcel index.html
- 18. Why I think parcel is great ● Works out of the box - zero / minimal config ● Fast ● Watch mode & built in web server ● Index.html as main entry point ● Treats all assets as first class citizens ● Great for beginners ● Great for simple / small projects (not only!) ● Great for websites/templates
- 19. Thank you!