October 5, 2022

Robotic Notes

All technology News

The Ember Times – Issue No. 185

5 min read

๐Ÿ‘‹ 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.

Ember 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!

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 isErroryou 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 walkthrough code, 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.

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!!

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 the developer experience.

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

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.

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 test 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!

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! ๐Ÿ’–

That’s another wrap! โœจ

Be kind,

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

Source link