The Ember Times - Issue No. 185

👋 Emberistas! 🐹

New Educative course, using Ember with XState, let codemods upgrade your app & deal with jQuery, Ember.js: The Good Parts, new release of ember-deep-tracked, why blueprints are cool.

---

Developing Robust Ember.js Applications course on Educative 🆕

Based on the popular book, Rock and Roll with Ember.js, Educative has a new (paid) course, Developing Robust Ember.js Applications by Balint Erdi (@balinterdi). Balint chose to partner with Educative because their courses are interactive: there are quizzes and coding challenges at the end of most chapters, which will help reinforce understanding and learning.

Takeaway skills:

• Understand how Ember.js works in web applications
• Help the user understand how the different building blocks, including components, routing, and services, make everything work in Ember.js
• Learn how to use Ember CLI
• Learn how to completely develop and Ember.js application

We look forward to giving the course a spin!

---

Using Ember with XState ❎

Over the past year, the frontend team at iManage Closing Folders has been experimenting with state machines and Ember. What is a state machine? From Understanding State Machines on freeCodeCamp, a state machine will read a series of inputs. When it reads an input, it will switch to a different state. Each state specifies which state to switch to, for a given input.

In the post Using EmberJS with XState, Emerson Lackey (@Emerson) discusses the benefits and drawbacks of state machines. For example, state machines provide a framework-agnostic way of defining presentational state. State machines eliminate emergent states in favor or explicit states. For example, if you have two boolean states on a component, isSaving and isError, you actually have four states to consider.

Emerson walks through an example of how to use XState and Ember to implement a signup form. We appreciate the detailed code walkthrough, and agree that the state visualizations are definitely awesome! In addition to the writeup, check out the accompanying full source of emberjs-state-example on GitHub.

---

Let codemods upgrade your app and deal with jQuery 🤖

Another must-read tutorial for anyone who is building and maintaining Ember applications is coming your way:

In her article "Remodeling an Ember App - Codemods and jQuery" Ember core team member Jen Weber (@jenweber) teaches you where to find codemods and how to use them for upgrades of your Ember app. Additionally, you will learn how you can make your app exclude the jQuery dependency automatically to save a few extra kilobytes on your builds!

Read the full article here (or alternatively on dev.to) and if this tutorial helped you with your own upgrade, be sure to share your experience on the post announcement!

---

Ember.js | The Good Parts 👍

Sarbbottam Bandyopadhyay (@sarbbottam), who has been developing Ember apps since mid-2017, once shared the challenges that he had faced with Ember.js.

This week, Sarbbottam gave an update to describe his newfound developer productivity and happiness, thanks to Ember Octane. Titled Ember.js | The Good Parts, the blog post provides several code examples of a before-and-after. It also describes how a change in syntax and new features (small adjustments) can mean a big improvement to developer experience.

We encourage you to check out Sarbbottam's blog post!

---

Release of ember-deep-tracked 🎉

NullVoxPopuli (@NullVoxPopuli) published ember-deep-tracked which is a prototype of "deep tracking" for Ember.

To try it out, you need to annotate the object using a decorator similar to tracked.

import { tracked } from 'ember-deep-tracked';
import Component from '@glimmer/component';

export default class Foo extends Component {
  @tracked obj = { bar: 2 };
}

In the example above when the object obj,bar updates using {{this.obj.bar}} will also update since it is deeply tracked.

Note the addon is not recommended for performance sensitive situations such as rendering a table from a large data set where updates to that data set are frequent. This is because without updates there will be an increase in initial render time.

---

Why Blueprints are Cool 😎

If you've been using Ember for any length of time you almost certainly have come to appreciate the robust generators that ember-cli provides. Ember's first-in-class generators can cut down on development time by reducing the need to write boilerplate and reducing the risk of errors in setting up your code.

If you've been wondering about how those generators get set up and how you can create your own, then you're in luck! There's a super helpful ✨✨new article✨✨ by our very own Jessy Jordan (@jayjayjpg) on how you can write your own blueprints to customize generator commands for use in setting up tests files in Ember 🔥🔥🔥.

The article walks us through the process from top to bottom on how blueprints drive the built-in Ember generators for setting up tests, and how we can create our own blueprints for customizing this setup and make automating this part of writing tests a snap.

By following the thorough explanations provided in the article you can get started writing your own blueprints in no time!

---

Contributors' corner 👏

This week we'd like to thank Matthew Beale (@mixonic), Chris Manson (@mansona), Faith Or (@faith-or), Haden (@hadenpf), Chris Garrett (@pzuraq), Stefan Penner (@stefanpenner), Nathaniel Furniss (@nlfurniss), Robert Jackson (@rwjblue), Igor Terzic (@igorT), Jordan Hawker (@elwayman02), Simon Ihmig (@simonihmig), Francesco Novy (@mydea), Amy Lam (@amyrlam), Roberto Sequeira (@robertosequeira), Jared Galanis (@jaredgalanis), Sergey Astapov (@SergeAstapov), Matt Doyle (@hellomattio), Jessy Jordan (@jayjayjpg), Max Z (@MrChocolatine), Godfrey Chan (@chancancode), Harshith Venkatesh (@harshith-venkatesh), Hank Majoros (@hmajoros), and James Herdman (@jherdman) for their contributions to Ember and related repositories! 💖

---

Connect with us 🤓

---

That's another wrap! ✨

Be kind,

Jesse Jordan, Isaac Lee, Chris Ng, Jared Galanis, Amy Lam, and the Learning Team