SurviveJS - Workshop

From apprentice to master

Webpack Workshop#

I've debugged hundreds of webpack configurations during my time with the tool and learned a lot about its pain points. It's a complex tool that begins to make more sense after you appreciate the basic ideas behind it.

To prepare for my tour, I took the webpack book material and turned it into two presentations that form the basis for my training:

If you go through the slides, you can reach the actual book through them if you find something interesting.

20% of webpack workshop income goes to Tobias Koppers, the main developer of webpack. I do this to support the project and enable its future growth.

What's Covered?#

The workshop can take a day or two depending on the depth and the amount of hands-on experience. If you already know webpack well, the ideas of the first day can be gone through swiftly before the advanced ideas.

I've found that even experienced webpack users can learn something new from the tool as it's so broad and the material covers a wide variety of topics.

You could say the material is actually more about web development techniques while webpack is used for discussing them. It's possible to implement many of the ideas outside of webpack so you can still gain value from the training even if you don't end up using the tool.

I cover the following ideas in the first presentation:

  • What is Webpack - Learn the basic ideas behind webpack
  • Developing - Improve your development flow with webpack and webpack-dev-server
  • Styling - Handle styling related aspects with webpack
  • Loading Assets - Learn to manage webpack loaders and handle assets like images and fonts
  • Building - Understand techniques like bundle splitting and code splitting
  • Build Analysis and Troubleshooting - Learn to understand the build results and troubleshoot webpack

The second presentation is more advanced but also more free form:

  • Optimizing - How to optimize your build and webpack execution
  • Output - What kind of output you can get from webpack
  • Techniques - Learn about webpack specific techniques and topics like testing
  • Extending - How to extend webpack

It's possible to get Tobias Koppers, the creator of the tool, involved in the advanced session if you prefer.

React Training#

My React training is tailored per client need. You can get a good idea of how this works from my React presentations. I can cover a wide range of topics starting from basics to more advanced.

All the sessions have been split into smaller sections most of which contain hands-on exercises so you get experience with the ideas discussed. It's expected each participant has LTS version of Node installed and can run node and npm through terminal. Most of the React portion can be done through CodeSandbox or WebpackBin.

Example React Day#

The React session has been designed for beginner/intermediate level developers. It won't cover everything related to React, instead the focus has been chosen so that you have a good intersection through the key topics and a good starting point for delving deeper. An important part is learning to know what you don't know yet. Consider the following example program and topics:

  • 09:00-10:00 - React Infrastructure session - Overview of the ecosystem, tools and libraries to use.
  • 10:00-11:00 - React Components - Slides
  • 11:00-12:00 - React Architecture - Slides
  • 12:00-13:00 - Lunch break
  • 13:00-14:00 - React Architecture continued - Slides
  • 14:00-14:30 - Forms in React - Slides
  • 14:30-15:00 - Afternoon break
  • 15:00-16:00 - React SSR - This can be replaced with a testing, performance, or styling session depending on the interest.
  • 16:00-17:00 - Recap, QA

How Much Does This Cost?#

There's no one right approach to pricing. What's too much to some company or person, is too little to another. My personal preference is to agree on a range before a session. After the session we'll discuss and settle on a figure within the range based on performance. We can also fix a price beforehand if you prefer that.

How to Purchase?#

You should contact me through the means you find most convenient for further details (see the site footer). Email is possible too (info @ domain).

Online sessions and brief consulting are possible too on request.

About the Trainer

Juho Vepsäläinen Juho Vepsäläinen is behind the SurviveJS effort. In addition to being a core developer of webpack, he has been active in the open source scene since the early 2000s. Blue Arrow Awards winner.

Need help?