Ember Tutorials

Ember.js Tutorials Roadmap

Section 1: Introduction to Ember.js

  • What is Ember.js?
    • Understanding Ember's philosophy: "Convention over Configuration."
    • Why choose Ember? (Productivity, Stability, Opinionated Framework).
    • Key features: Ember CLI, Routing, Data Layer (Ember Data), Components, Services, Testing.
    • Comparing Ember to other JavaScript frameworks (React, Angular, Vue.js).
  • Setting up the Development Environment:
    • Installing Node.js and npm/yarn.
    • Installing Ember CLI (npm install -g ember-cli or yarn global add ember-cli).
    • Verifying the installation (ember --version).
  • Your First Ember Application:
    • Creating a new Ember project using Ember CLI (ember new my-ember-app).
    • Understanding the project structure.
    • Running the application (ember serve).
    • Exploring the default welcome page.
  • Using Ember CLI:
    • Generating code (routes, components, models, services, etc. - ember generate ).
    • Building the application (ember build).
    • Running tests (ember test).

Section 2: Core Concepts of Ember.js

  • Routes and Routing:
    • Understanding the router (app/router.js).
    • Defining routes (this.route()).
    • Dynamic segments in routes.
    • Nested routes.
    • Generating routes using Ember CLI.
  • Templates (Handlebars):
    • Understanding Handlebars syntax.
    • Displaying properties using {{property}}.
    • Helpers (built-in and custom).
    • Conditional rendering ({{#if}}, {{#unless}}).
    • Looping ({{#each}}).
    • Linking between routes ( component).
  • Components:
    • Understanding components as reusable UI elements.
    • Generating components (ember generate component my-component).
    • Component files: .hbs (template) and .js (class).
    • Passing arguments to components (@argumentName).
    • Component arguments vs. properties.
    • Component lifecycle hooks (e.g., didInsertElement - older, didRender, willDestroy - modern).
    • Yielding content ({{yield}}).
    • Block vs. Non-block components.
  • Models and Data Handling (Introduction to Ember Data):
    • Understanding the role of Ember Data.
    • Defining models (ember generate model my-model).
    • Model attributes and relationships (belongsTo, hasMany).
    • Adapters and Serializers (brief overview).
    • Working with the Store (this.store).
    • Fetching records (this.store.findRecord(), this.store.findAll(), this.store.query()).
    • Creating, updating, and deleting records.
    • Saving changes (record.save()).
  • Controllers (Less prominent in modern Ember, but still relevant):
    • Understanding the role of controllers (decorating the model).
    • Properties and actions on controllers.
    • Differences between components and controllers.
  • Services:
    • Understanding services for long-lived, shared state or functionality.
    • Generating services (ember generate service my-service).
    • Injecting services into routes, components, or other services.
    • Using services for state management, API calls, etc.

Section 3: Working with Data and State

  • Ember Data (Deep Dive):
    • Custom Adapters and Serializers.
    • JSON:API standard.
    • Working with relationships and nested data.
    • Handling errors from the API.
    • Offline data strategies (briefly).
  • Computed Properties:
    • Defining computed properties using getters (get propertyName() { ... }).
    • Dependent keys.
    • Using @cached decorator.
  • Observables and Tracking:
    • Understanding Ember's tracking system (modern reactivity).
    • Using @tracked decorator for properties that trigger re-renders.
    • Differences from older observer patterns.
  • Actions:
    • Handling user interactions (clicks, form submissions).
    • Defining actions in components and routes.
    • Passing actions down to components.
    • Action bubbling.
  • State Management Strategies:
    • Using Services for shared state.
    • Using Ember Data for application state.
    • Introduction to Ember Concurrency for managing async operations.

Section 4: Advanced Ember.js Concepts

  • Ember Concurrency:
    • Understanding the challenges of asynchronous operations.
    • Using tasks (@task decorator).
    • Managing task state (running, idle, errored, canceled).
    • Task modifiers (e.g., .restartable(), .drop()).
    • Handling task cancellation.
  • Custom Helpers:
    • Creating your own Handlebars helpers.
    • Helpers for formatting, logic, etc.
  • Decorators:
    • Understanding modern JavaScript decorators.
    • Using Ember's built-in decorators (@tracked, @cached, @task).
  • Service Workers and PWAs (Progressive Web Apps) with Ember.
  • Addons:
    • Understanding Ember Addons.
    • Installing and using popular addons.
    • Briefly touching on creating your own addons.
  • Testing (Deep Dive):
    • Importance of testing in Ember.
    • Types of tests: Unit, Integration, Acceptance.
    • Using Ember's testing framework (QUnit or Mocha).
    • Writing component tests.
    • Writing helper tests.
    • Writing service tests.
    • Writing route tests.
    • Writing acceptance tests (simulating user interaction).
    • Using testing helpers (e.g., render, click, fillIn).

Section 5: Ember Ecosystem and Tooling

  • Ember CLI (Advanced):
    • Customizing the build process (ember-cli-build.js).
    • Using blueprints (for generating code).
    • Addon development (basic concepts).
  • Debugging Ember Applications:
    • Using the browser's developer tools.
    • Using Ember Inspector (browser extension).
    • Debugging tests.
  • Styling in Ember:
    • CSS, Sass, Less.
    • CSS Modules (using addons).
  • Accessibility (a11y) in Ember.
  • Internationalization (i18n) and Localization (l10n) in Ember.

Section 6: Deployment and Performance

  • Building for Production (ember build --environment=production).
  • Deployment Strategies:
    • Deploying to static hosting (Netlify, Vercel, GitHub Pages).
    • Deploying to traditional servers.
    • Deploying to cloud platforms (AWS S3/CloudFront, Azure Static Web Apps, Google Cloud Storage).
    • Using deployment addons (e.g., ember-cli-deploy).
  • Performance Optimization:
    • Understanding Ember's rendering performance.
    • Lazy loading and code splitting.
    • Route-based splitting.
    • Optimizing data fetching with Ember Data.
    • Measuring performance.
  • FastBoot (Server-Side Rendering for Ember):
    • Understanding FastBoot for SEO and initial render performance.
    • Setting up and configuring FastBoot.
    • Limitations of FastBoot.

Section 7: Community and Staying Updated

  • Following the Ember.js Blog and Release Notes.
  • Exploring Ember Addons on Ember Observer.
  • Contributing to Ember.js or Addons.
  • Attending Ember Conferences and Meetups.
  • Engaging with the Ember Community (Discord, Stack Overflow, Forums).
  • Learning about the Ember Octane Edition and future editions.