SurviveJS - Training

From apprentice to master

SurviveJS - Training

What if instead of reading the webpack book or the React book you could go through the material and key ideas in a live environment with me? I have used the tool for a few years and I am a part of webpack core team. I wrote a 499 page book about the tool and spent a month touring Europe.

Webpack Training

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.

What's Covered?

The material scales from anything between one hour quick session to a full day depending on the depth of discussion. I designed it so that there's room for a lot of interaction.

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

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
  • Packages - How to consume and author packages
  • Extending - How to extend webpack
  • Appendices (bonus) - How to set up Hot Module Replacement and assorted topics

What's exactly covered in a session depends on the available time and interest. If you know a lot about webpack already, it doesn't make a lot of sense to spend time on the basics. But if you are a beginner, then it makes sense to focus on basic configuration before going further.

It's possible to get certain guest stars involved with the sessions if there's interest!

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.

Example Program

The program can be split into two days. They don't depend on each other although there is some overlap and you can apply certain webpack techniques with React. This applies particularly to ideas like code splitting and PWA (Progressive Web Apps).

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.

Webpack Day

The point of the webpack day is to help beginner level users to understand webpack while increasing the understanding of intermediate/expert level users. The tool has a large scope so it's easy to miss features that may be useful.

Even though the focus is on webpack, the day covers a wide variety of techniques that are useful beyond it. So even if you don't end up using webpack in your daily work, you may still benefit from the ideas.

It is possible to split the webpack content into two days to keep it more casual and hands on experience. In this case the first day would focus on the basic ideas while the second day would delve into advanced use cases.

  • 09:00-12:00 - Webpack - From apprentice to journeyman - Slides
  • 12:00-13:00 - Lunch break
  • 13:00-14:30 - Webpack - From journeyman to master - Slides
  • 14:30-15:00 - Afternoon break
  • 15:00-16:00 - QA with Tobias, the author of the tool
  • 16:00-17:00 - Recap, QA

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.

  • 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.

I prefer small groups (up to 15) and personal mentoring around a specific topic is possible as well. I reside in Finland currently and prefer to work with European companies for this reason. Anything beyond Europe takes more consideration as it's more difficult to arrange and takes more time.

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.

References

  • AlphaSense
  • Kitchen Reklamebyrå
  • Sevenval (in German)
  • Typeform
  • Quantifio - "I learned and understood more of webpack in a two-hour masterclass than all previous training combined. Juho has the skills and repertoire to improvise content and fine tune relevancy - he connected the dots on specific topics in an Electron environment and had the answers you wont find online."
  • Xeneta

About the Author

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?