![](https://hackernoon.com/hn-images/1*Udq4xe7cdQmb5g65Pn8oaQ.png)

I’ve just come back from _EmberConf_ in Portland, and besides getting to know the [community](https://hackernoon.com/tagged/community) and [making](https://hackernoon.com/tagged/making) some awesome new friends, the [GlimmerJS announcement](https://glimmerjs.com/) is what really caught my eye.

![](https://hackernoon.com/hn-images/1*F5fCz83uEzOpDcB4T1ibGA.png)

Some of you might know that I’ve been a big fan of Ember for a long time. Like many others, I was initially put off by the high learning curve, until I eventually learned to embrace the framework’s conventions, and became a better developer in the process.

Even though I’ve flirted with basically all other major web frameworks since then, I still choose Ember most of the time when I have to build an ambitious web application. And why wouldn’t I? The CLI is fantastic, the Glimmer engine is now fast, and getting server-side rendering is literally just an `ember install` away thanks to [FastBoot](https://ember-fastboot.com/).

Despite all this, it’s no secret that lighter libraries like Vue and React have stolen the show in recent years. Why? Well, in addition to introducing some awesome new concepts like the virtual DOM and a one-way data flow, React also made it significantly easier to migrate your existing Rails/Laravel/Django front-end piece by piece.

This is crucial. Companies usually aren’t too keen on rewriting software from scratch, and Ember had no way of letting developers dip their feet into the water before diving in. Until now.

![](https://hackernoon.com/hn-images/1*tYNaftf7bycqw6803edtyQ.png)

Bundle size of different libraries + frameworks (minified + gzipped). Based on my own independent research.

With [GlimmerJS](https://glimmerjs.com), you can finally get the benefits of Ember’s rendering engine and CLI, without having to buy into the whole ecosystem. The project is new, and therefore obviously still a little rough around the edges, but based on what I’ve seen so far, I’m impressed.

> Enough talking, show me the code!

Let’s see how we can spice up any traditional web application with some Glimmer components! I’m going to start off with an _extremely_ simple website: no Babel, no ES6, just plain HTML with script tags and links to CSS.

We’ll call our app `todo-app` since it’s going to contain a todo-list (yeah I know, not a very original concept…) If you ever get stuck while following along, you can check out the project’s [GitHub repo](https://github.com/t4t5/todoapp-glimmer).

$ mkdir todo-app && cd todo-app && touch index.html

Here's the inside of `index.html`:

<html>

 <head>  
   <title>Todo app</title>  
 </head>  
   
 <body>  
   <h1>Hello world!</h1>  
 </body>

</html>

![](https://hackernoon.com/hn-images/1*6Cqf7CmZx1fe47vjNNqcsw.png)

Alright, let’s create an interactive `todo-list` web component for this page! We’ll first create a `components` folder inside our project, where all our future Glimmer components will live:

$ mkdir components && cd components

Using the latest Ember CLI ([installed globally with Yarn](https://glimmerjs.com/)), we now simply run this command:

$ ember new todo-list -b @glimmer/blueprint --web-component

Ember will generate everything we need to get started quickly with our new component. When it’s done installing, we’ll switch our development setup to focus only on the component:

$ cd todo-list && ember server

Visit localhost:4200, and you’ll be greeted with this page:

![](https://hackernoon.com/hn-images/1*R6Yzv8VN9E5vTl81P7SH-w.png)

This is the default markup of our new component, which you can find at `todo-list/src/ui/components/todo-list/template.hbs`. Let’s turn it into something more “todo-list”-like!

![](https://hackernoon.com/hn-images/1*t4YCSz0ni9I8cRmtBlkUVA.png)

There we go! I personally really like Handlebars syntax since it makes it clear where the regular HTML ends and where Glimmer takes over. (compare that to Angular’s `<ul *ngFor="item in items">` or Vue’s `<li v-for="item in items">`).

Next, we want each item in our list to be rendered into its own `todo-item` component. Staying inside our `todo-list` folder, we generate a new Glimmer component in our existing project:

$ ember g glimmer-component todo-item

We can now update our `todo-list/template.hbs` so that it uses this new component for every list item instead:

{{#each items key="[@index](http://twitter.com/index "Twitter profile for @index")" as |item|}}  
  <todo-item  
    [@item](http://twitter.com/item "Twitter profile for @item")\={{item}}  
  />  
{{/each}}

Notice how Glimmer uses `@` to distinguish between arguments (props) and regular HTML attributes when you invoke the component. That’s another feature I really like, not just because of the elegant syntax, but also because it circumvents the problem of having to manually [whitelist attributes](https://github.com/facebook/react/pull/6243) in the library.

![](https://hackernoon.com/hn-images/1*tr3x79N8fNtWwj037L0hBA.png)

So far, so good. Now let’s add some functionality!

We’ll start with the ability to add items to the list. For this, we first need to import the `tracked` decorator, so that we can specify which properties are allowed to change (Glimmer distinguishes between mutable and immutable properties to improve performance). We’ll use this decorator on `items` and on the newly defined `newItemText` property:

// src/ui/components/todo-list/component.ts

import Component, { tracked } from "@glimmer/component";

export default class TodoList extends Component {

  @tracked newItemText = '';

  @tracked items = \[  
    {  
      text: "Install Glimmer",  
      isDone: false,  
    },  
    // ...

We proceed by binding some events to our `input` and `button` tags. This way we can update `newItemText` whenever the user types, and add a new item to the list when the button is clicked. For those of you that are familiar with Redux, you’ll recognise the way we use the immutable spread syntax for this:

![](https://hackernoon.com/hn-images/1*2O3peUAni5Vki_Ovt5rgsA.gif)

It works!

We also want to remove an item when the user clicks on “Delete item”, and cross it out when they click on the text. To accomplish this, we need some event handlers on `todo-item` which will trigger actions up to the `todo-list` (following Ember’s “Data Down, Actions Up” convention).

Again, the technique we use for updating the data here is pretty similar to Redux’s way of doing things.

You should now be able to _add items_, _delete them_ and _toggle the “crossing out”_ (although you won’t see any UI change when toggling them yet).

For the grand finale, let’s add some CSS to all this! You’ll notice that Glimmer projects come with an `app.scss` file, so that you can take advantage of the SASS preprocessor instantly without any extra setup. Simply copy-paste the following into your `app.scss`:

![](https://hackernoon.com/hn-images/1*m0jWhM7pXTOw1wcMM2zr6g.png)

Now that’s much prettier!

That’s it! Our component is done! The only thing left to do now is to import it into our static website so that we can use it outside of the Ember environment.

This is also super easy since Ember CLI has already compiled the app for us. In the `todo-list` component’s `dist` folder, you’ll find both an `app.js` and an `app.css` file – they’re all you need to render your component!

Go back to your static website and add references to these files (one script-tag and one link-tag). Then simply invoke the component with `<todo-list />` right after your existing “Hello world” title:

![](https://hackernoon.com/hn-images/1*9UuzooQ_geYPokLh7mHLug.png)

Boom!

Now that is _sweet_! It’s worth noting that our Glimmer component is currently built in “development” mode. By using `ember build ---environment=production` instead, I got `app.js` down to 34.18 KB gzipped, which is actually smaller than just React + React DOM by itself. Pretty impressive!

Hopefully this has given you a taste of how easily you can add interactive Glimmer components to your website. I’m certainly looking forward to see how the library develops, and how it will integrate with the rest of the Ember ecosystem in the future.

_If you enjoyed this tutorial, you’ll probably also like my online courses on_ [_Ember_](https://www.ludu.co/course/ember) _and_ [_Elixir_](https://www.ludu.co/course/discover-elixir-phoenix) _over at Ludu._ [_Go check them out_](https://www.ludu.co/browse)_!_

Flow

Facebook

Instantly

Super

Twitter

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Why I’m excited about GlimmerJS

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

@edwards

RELATED STORIES