Introduction to webpack and babel
- 1. Introduction to Webpack and Babel Let’s understand some frontend build tooling Twitter - @Anshumaniac12 GitHub - @anshumanv
- 2. I’m Anshuman-san Software Engineer at Clarisights We’ll have an overview of build tooling in web ecosystem, and build a basic react app from scratch. And some anime Twitter - @Anshumaniac12 GitHub - @anshumanv San is a honorofic in japan added to address boys Basically writing code for them, nice place
- 3. Don’t do this please
- 4. What is frontend tooling? Tools which help in developing frontend applications ● Building/transforming code ● Linting/formatting code ● Dependency management etc
- 5. Build tooling? Build tooling deals with how the code you write gets shipped to the end user Something you understand -> something which can efficiently run on the browser
- 6. Problems in traditional webpages ● Ordering issues, need to fetch scripts in specific order ● Fetching bloated scripts can delay render time (network bottleneck) ● Scope issues in case of huge single JS file
- 9. Babel is a code transpiler. Convert modern JavaScript syntax to something which browser supports. Enter
- 10. Webpack is a module bundler. It bundles several pieces of your application and creates static files which can be served via a static server Enter
- 13. Let’s do some code 😟
- 15. Let’s create a traditional webpage first Just gonna sprinkle some HTML, CSS, JavaScript, you know, basic stuff which everyone has done PS:
- 16. Let’s do some code transformation using Babel
- 17. Time to React (everyone’s fav) Let’s try writing some React code and look for ways of how we can run it in the browser
- 18. Wait so how do we run react now? - Enter webpack (again)
- 19. Time to write a webpack config 😱
- 20. Let’s make development easier ⚡
- 21. (we made it yayy!) That’s it, that’s the workshop
- 22. We’d love to answer any queries you might have. Q&A