Start writing components you’ll love.

Learn how to build better Ember components in six lessons that walk through the fundamentals of UI development.

Sign up for our free email course today:

“I’m sure there’s a best practice for this... I just don’t know what it is.”

Ask yourself:

  • Have you ever worked on a component that took 10 arguments? How about 15?
  • Does your app have spotty UI bugs that feel impossible to reproduce?
  • Do users have to refresh your app because their data gets out of sync?
  • Does your app make network requests, and you have no idea why?

If so, I have some news for you:

It doesn’t have to be like this!

There are solid Ember patterns that address each one of these symptoms. Sound too good to be true?

Just imagine

  • Knowing exactly when and why all your app’s network requests kicked off
  • Feeling like you have total control over how your UI reacts to data changes over time
  • Never working on a component that takes more than 5 arguments
  • Users never having to manually refresh your app

When you take this email course, you’re going to learn 6 patterns that solve all of these problems and more.

Sure, understanding all the ins and outs of component design is tough, and only truly happens with time. But we’ve taken our combined 10 years of Ember experience and distilled these principles down into a series of lessons that anyone can understand.

You should be proud of the components you're building.

Here’s the thing: writing components should be fun! We honestly believe that. If you’re not showing off your work to someone with a smile on your face, there’s probably still a pattern or two you could benefit from learning.

Even though we’ve been doing this for a while, we still have nearly the same conversation every week:

samselikoff

heya, I finished that feature

ryanto

nice, how'd it go?

samselikoff

dude, that renderless component you wrote last week worked perfectly...

I just had to wire up a new consumer. I didn't even write any new JS. Almost felt like cheating!

ryanto

👍 so awesome man

I freaking love components!

I swear, it’s like Groundhog Day. The power and flexibility of these patterns is like the gift that just keeps on giving.

Once you have these techniques under your belt, you’ll feel excited and empowered the next time you go to break up a new UI into Ember components.

You won’t feel helpless, and give in to writing messy code.

You won’t add hard-to-reproduce bugs, and ship unpolished UIs.

And you might even impress your colleagues along the way.

What you’ll learn 

<button {{action (increment count)}}>
  {{count}} clicks
</button>

1

Declarative rendering

Learn how this modern rendering technique eliminates messy code and pesky bugs.

<InViewport @fire={{action 'track'}}>
  <h2>Sign up today!</h2>
</InViewport>

2

Declarative boundaries

Use your new knowledge of declarative rendering to tame the imperative parts of your code. 

<CarouselViewer
  @index={{currentIndex}}
  @onChange={{action (mut currentIndex)}}/>

<CarouselStatus @index={{currentIndex}} />

3

State hoisting

Learn about this fundamental technique for keeping data in sync across multiple components. 

<TweetCard @tweet={{tweet}} />

4

Smart components

See how your application’s domain should influence component responsibility and encapsulation. 

<AccessFor @model={{video}} as |hasAccess|>
  {{#if hasAccess}}
    <video src={{video.url}}>
  {{else}}
    <p>Sign up today!</p>
  {{/if}}
</AccessFor>

5

Renderless components

Unlock the full capabilities of components by exploring use cases that don’t involve rendering HTML. 

<input oninput={{perform search}}>

{{#if search.isRunning}}
  <p>Loading results...</p>
{{else}}
  {{#each search.last.value as |result|}}
    <p>{{result}}</p>
  {{/each}}
{{/if}}

6

Data-loading components

Ember Concurrency tasks are state machines. Use them to simplify loading data outside of the router.

Meet the authors

👋 Hey there! @ryantoronto and @samselikoff here, creators of EmberMap, authors of Ember CLI Mirage, and hosts of the EmberMap Podcast.

We love teaching Ember through our videos and blog posts , by speaking at conferences, and by running trainings.

Ready to start writing better components?

Sign up for the course today: