Ember Basics

Ember.js boasts unparalleled developer productivity, an unwavering focus on making web development fun and easy, and some of the best build tools in the world. We'll cover all of the important fundamentals you need to know, in order to successfully get up and running.

Ember Basics

  1. Courses
  2. Ember Basics
  3. Components

Components

Components play an increasingly central role in modern web app development, as a mean for defining encapsulated pieces of UI and having well-defined contracts with the outside world.

  • ComponentsComponent Basics

    We'll examine a simple component and clearly define the types of things that belong in the hbs and js files. By passing data through the component's interface to the outside world, we can control its initial state, and the signals we receive in response to user actions. Finally, we'll study the component lifecycle hooks, and provide examples for common uses of each one.

  • ComponentsExercise: A Simple Component

    We'll build a simple component, whose purpose is to encapsulate a piece of UI, including its:

    • Style (CSS)
    • Behavior (JS)
    • Structure (HTML)

    Through a combination of passing data through the component's interface to the outside world, properties passed to Ember.Component.extend, and values set in the component's init() method, we'll establish a solid understanding for how a component's state is determined.

    Finally, we'll use a "classic" component action and a closure action to allow the outside world to respond to user interactions that began inside our component, and illustrate the differences between best practices for each approach.

  • ComponentsComplex Components

    In the real world, we build components up to form larger components, and often need to weave pieces of complex UI together. We'll look at two concepts in particular:

    • The {{component}} helper
    • The {{yield}} helper, and the concept of exposing component internals to the outside world

  • ComponentsExercise: Complex Components

    We'll use our knowledge of yield to make two new components:

    • One that generates a list of items based on an array
    • One that exposes important values to its block

  • ComponentsCustomizing the Component Boundary

    Like W3C Web Components, Ember components are always defined as a boundary element with some private structure contained therein. We'll study a few ways of customizing the boundary element, including:

    • Changing its tag
    • Binding CSS classes to properties
    • Binding DOM attributes to properties
    • Adding classes to components on the fly

    We'll also cover component CSS best practices, as they relate to the boundary element.

  • ComponentsExercise: Customizing the Component Boundary

    We'll practice our new knowledge of component boundary customization by:

    • Adding some classes to a few {{link-to}} components in our app
    • Building a basic textarea component, with CSS for basic validation styling
    • Adding a DOM attribute to the textarea component, with any validation error messages
    • Displaying and styling the validation error(s) with CSS

  • ComponentsLunch

    Break for lunch

Key Fundamentals

We'll cover all of the important concepts you need to know in order to take advantage of everything the framework has to offer. From the routing layer to components and composeable handlebars helpers, we'll show you how to build quickly and sustainably, without accruing much tech debt at all!

No Toy Examples

Courses based on small and easy examples cheat students out of the experience of learning how to solve real-world problems. All of our courses are built around meticulously crafted multi-stage projects, with the goal of giving you exposure to the kinds of challenges you'll face when building an app of your own.

Underlying Ideas

In this course, we'll go way beyond just a simple "how to", and explain why things work the way they do, and how each individual concept fits into the way we build apps of various shapes and sizes. Ember aligns with modern web standards, and we'll be sure to point out these alignments along the way.