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Ā š¤
Wondering about something related to Ember, Ember Data, Glimmer, or addons in the Ember ecosystem, but don't know where to ask? Readersā Questions are just for you!
Submit your ownĀ short and sweetĀ questionĀ underĀ bit.ly/ask-ember-core. And donāt worry, there are no silly questions, we appreciate them all - promise!Ā š¤
Want to write for the Ember Times? Have a suggestion for next week's issue? Join us atĀ #support-ember-timesĀ on theĀ Ember Community DiscordĀ or ping usĀ @embertimesĀ on Twitter.
Keep on top of what's been going on in Emberland this week by subscribing to ourĀ e-mail newsletter! You can also find our posts on theĀ Ember blog. See you in two weeks!
That's another wrap!Ā āØ
Be kind,
Jesse Jordan, Isaac Lee, Chris Ng, Jared Galanis, Amy Lam, and the Learning Team