Modernising your Ember App Development with GJS and Vite

Syllabus

1. Introduction to Ember single-file-components (GJS)

   We introduce you to the new format for Ember templates, explain the benefits of the new format, and discuss some of the new functionality and organisation this unlocks for Ember applications.

2. Introduction to the @embroider/template-tag-codemod

   The @embroider/template-tag-codemod can automatically convert your existing templates to GJS. You will learn how to run the codemod, understand the different options, and interpret the different kinds of error messages that the codemod can show.

3. Learn how to customise the @embroider/template-tag-codemod

   When the @embroider/template-tag-codemod fails to update a file, it can sometimes be because of a real problem in your codebase, or it can be because you're relying on something custom that doesn't work any more in modern GJS templates. The codemod provides a number of customisations that can allow you to influence the migration and overcome some of these challenges. We can show you how to best make use of these customisations.

4. Introduction to the new Vite build system

   Ember has transitioned to using Vite to build your apps by default. This gives you a significant improvement to your Developer Experience (DX) while developing your Ember app. With the new build system, there are a few structural changes to how your apps are laid out, and we will go through the new blueprint output to familiarise you with the new structure.

5. Using the ember-vite-codemod to migrate existing apps to Vite

   Because of the differences between the classic build system and the new Vite-based system, it can be tricky to migrate from one to the other. This is why the ember-vite-codemod was created. The codemod can check for issues you might see while migrating, alerting you to fix things before proceeding, and once everything is good to go, it will move the required files around for you and make the necessary changes to those files. We will review some of the changes the codemod will make and help you identify any issues that can show up when upgrading your application.

6. Updating Addons to V2 (optional)

   The new Vite-based build system uses Embroider to automatically convert classic v1 addons to v2 addons under the hood. This is great because it means you don't need to convert all your addons before moving to Vite. If you have any internal addons you maintain, it can improve build times and significantly improve DX if you upgrade them to v2 instead of having Embroider do it every time you start a build. We can go through some of the techniques and considerations for upgrading classic v1 addons and work through a few example addons to show you real-world examples.

FAQ