ember-workshop

A demo app to illustrate core concepts in Ember

Important

What's new in v6:

• <template> tag everywhere
• Build with Vite
• Emphasis on v2 addons
• @ember/reactive to track complex data
• Simplified tests

Target Audience

I designed the app with 2 goals in mind:

• Help onboard developers to Ember.js
• Help existing users adopt newer patterns

If you would like me to lead a workshop for your team, please send me an email (consult.ijlee2@gmail.com).

Local development

You can get started in 2 steps:

1. Run pnpm install to install project dependencies. The install command will then build blueprints-v2-addon and my-addon.
2. Run pnpm start to start my-app (http://localhost:4200).

Check and fix errors

1. As you write code, please check that it meets formatting and linting rules.

   # From the workspace root
   pnpm lint

2. You can run lint:fix to fix errors.

   # From the workspace root
   pnpm lint:fix

Run tests

1. When you write code, please check that all tests continue to pass.

   # From the workspace root
   pnpm test

Syllabus

Each day (session) may take around 5 hours, not counting breaks. There is an optional homework at the end of each day. The sessions are spread apart by a week or two.

Day 1

Learning outcomes:

• Navigate the folder structure
• Familiarize with Ember CLI
• Understand syntax for components
• Write components that are accessible, extensible, and maintainable
• A brief look at helpers, modifiers, and utilities

Day 2

Learning outcomes:

• Understand syntax for routes
• Make API requests
• Compare nested and sibling routes
• Run A/B testing
• A brief look at ember-concurrency

Day 3

Learning outcomes:

• Apply best practices for writing tests
• Create test helpers and custom assertions
• Extract business logic to a utility class
• Test error and loading routes
• A brief look at miragejs and sinon

Contributing

Please star this project so that I can gauge its importance to you and the Ember community. ⭐