Learn Ember, Pm2 and Xstream

Ember is a javascript framework that provides a rich set of tools for building modern web applications. Unlike many frameworks, Ember comes with opinions and a way of doing things so you aren't left with a ton of decisions to make about problems that have already been solved very well. Ember was designed from the start to deliver a productive and comfortable experience for you, the developer.

In this course you will learn what you need to know to get started building your own Ember we applications. From the absolute essentials like creating a new project with the Ember-CLI tools, templating, routing, and reusable components.



A JavaScript framework for creating ambitious web applications.

ember

Ember 2 Fundamentals

Components in Ember are great for reusing code throughout our application. We’ll see how each instance of an Ember component has isolated state and we can over ride as well as set default values.

In this lesson, we will learn how to make a simple, reusable component within an Ember application.

Create Simple Components in Ember

In this lesson, we learn how to create nested routes and templates in an Ember.js application, in addition to how to create nested routes and isolated templates.

Creating nested routes in Ember.js

In this lesson, we will learn how templates work within Ember and how to use HTMLBars. This lesson will cover the connection between controllers and templates and how to use actions within templates as well.

Ember Templating with HTMLBars

In this lesson, we will learn how to install Ember Inspector and use it to see the state of our application and debug it.

The Ember Inspector can be installed from the [Chrome Web Store](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi). We will see how the inspector gives us access to information such as the routes available to us, the components used in a particular view, and data that is exposed to us etc.


Debug Ember Applications using Ember Inspector

In Ember.js, functions that are executed through user interaction with your application are called actions, which can be defined at the route, controller, or component level. In this tutorial, we look at a simple example of defining actions on the controller and hooking it up to our template in order to update properties on the controller.

Add user interaction to Ember.js apps using actions

We will learn how to install Ember-CLI and use it to create a new Ember project. We will also learn how to run the Ember project.

Create an Ember Project with the Ember-CLI

In this lesson, we show how to specify a model for an Ember Route so its data can be displayed. 

Define Models for Routes in Ember

In this lesson we will create an `updateContent` method that sets the value of our `content` property to the current epoch timestamp. We need to call `toString()` on the `Date.now()` method in order to make TypeScript happy.

```
updateContent() {
  this.content = Date.now().toString()
}
```

We create a constructor that takes the options parameter, call `super(options)` and call into our `this.updateContent()` method.

```
constructor(options) {
  super(options)
  this.updateContent()
}
```

When we refresh our page we can see that the value of `content` is set to the epoch timestamp. 

To make the content really dynamic we use `setInterval()` to call into `updateContent` each second: `setInterval(() => this.updateContent(), 1000)`.

When we save our file we see that our content does not get updated anymore and when we check the console we see that we get an error telling us that: The 'content' property on the my-component component was changed after it had been rendered. The error also informs us that we should Use the @tracked decorator to mark this as a tracked property.

We add the @tracked decorator to our property, we import tracked from @glimmer/component and we refresh the page. We verify that `content` gets updated each second.

We change our `updateContent` to add our the timestamp to the array. When we use `this.items.push(this.content)` to achieve this we see that the list does not get updated. This is because the `@tracked` decorator only tracks the re-assignment of properties.

The way to get this working is by re-assigning our `items` array inside `updateContent`. We assign a new array, de-structure the current items array and add the new content.

```
this.items = [...this.items, this.content]
```



Use dynamic data in a GlimmerJS component

In this lesson, we will learn how to define routes within an Ember application and how to use them to navigate around your application. This lesson will cover the basics of routes and how we can use nested routes to display multiple templates at the same time. We can also cover redirect routes and manually forcing transitions through actions.

Define Routes in Ember 2.0 using Ember-CLI

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

This lesson is the first in an introduction to Cycle.js. We will see how to build from scratch a toy version of Cycle.js. See how to use RxJS to create simple web apps, and how to separate logic from effects.

Separate Logic from Effects in Cycle.js

In this lesson we will use the ember cli to generate a new component. Running `ember g glimmer-component my-component` generates the template and component class. We change the content of our component and add it to the main template in order to show it on the page.

Create a new GlimmerJS component

In this lesson we will add a variable called `content` to our component class, initialize it as a string and display the variable in our class using the double curly braces syntax, which is the handlebars expression for expressions, `{ {content }}`. 

After this we create a new class variable called `items`, initialize it as an array with strings. To display this list in our template we add a `<ul></ul>` and inside this unordered list we use the handlebars `each` helper to display the list items.

And inside our each statement we will print a `<li>` tag and render `{{ item}}` inside it.

```
<ul>
  {{#each items key="@index" as |item| }}
    <li>{{item}}</li> 
  {{/each}}
</ul>
```



Use template variables in a GlimmerJS component

Closure actions are useful for extending application code such as modifying a property on a controller while also sending up information from a component.
In this lesson, we learn how to use closure actions with Ember.js components. 

Use Closure Actions with Ember Components

PM2 is a production process manager for Node.js applications with a built-in load balancer. It allows you to keep applications alive forever, to reload them without downtime and to facilitate common system admin tasks.

This video shows how to enable features in your pm2 config file that allow you to prevent runaway apps from bringing your server down. Setting max memory used, number of running processes allowed and maximum restart attempts are all covered.

Controlling runaway apps using pm2

In this video, you will learn how to pass environment variables to your node.js app using the pm2 config file. This is useful for setting options inside your app such as production or development.

Passing environment variables to node.js using pm2

[GlimmerJS](https://glimmerjs.com/) is a UI component library built by the Ember.js team. It is fast and lightweight and uses a combination of TypeScript and Handlebars to build the components.   

In this lesson we will use the Ember CLI to initialize a new GlimmerJS project.

We will start by installing Ember CLI globally by running `npm install -g ember-cli/ember-cli`.

Next we will use the `ember` command to create our new project by running `ember new egghead-glimmer -b @glimmer/blueprint` . 

When our project is created we `cd` into the project directory and start the development server. We will view the page in the browser and change the base template.

Initialize a project using Glimmer.js

In this video, learn how to automatically restart your node.js app using pm2 when the code for your app changes. You will also learn how to exclude files and directories from restarting your app (such as static assets, css, images, etc.).

Restarting your node.js app on code change using pm2

<p>Today Joel catches up with Iheanyi Ekechukwu. Iheanyi is a Product Engineer currently working at DigitalOcean. He previously worked at IBM on Watson. They also talk about Iheanyi's education, stack, and side projects</p><p>Iheanyi started out majoring in Computer Engineering, but switched to Computer Science after he figured out hardware just wasn't for him. He now lives and works in Brooklyn and spends most of his time coding (though he always brings his design skills to the table).</p><p>Iheanyi's design comes from a dual degree program at Notre Dame, the college where he graduated. He noticed a lot of subpar interfaces coming from pure programmers, and he was frustrated with that, so he took his school's opportunity to learn design and apply it to his work. Even if he isn't a designer, he uses his skills daily to communicate with designers and make whatever he works on that much better.</p><p>Iheanyi started using Ember back during college. He was frustrated by his school's class search interface, and he set out to improve it. Ember and Rails were like a match made in heaven for him, Ember having been authored by ex-Rails core team member, Yehuda Katz.</p><p>Joel discusses with Iheanyi what he's currently using in his work. They get into GO, and how Iheanyi has enjoyed working with a statically typed language when doing back-end work. Not having to worry about full test coverage when refactoring has been great!</p><p>Lastly, they talk about the various side projects Iheanyi has going. Such as Interface Lovers, a blog where top designers are interviewed and share their work music playlists. Also, Seeker, a job-board app that allows you to connect your strip account to it and have companies submit jobs.</p><hr /><h3>Transcript</h3><p><a href="https://egghead.simplecast.com/episodes/47aebd17/transcript">"Iheanyi Ekechukwu on education, programming, and managing side projects" Transcript</a></p><h3>Resources</h3><ul><li><a href="https://seeker.company">seeker</a></li><li><a href="https://interfacelovers.com/">Interface Lovers</a></li><li><a href="http://creative.black/">Creative Black</a></li><li><a href="https://www.ibmchefwatson.com/">Chef Watson</a></li></ul><h3>Iheanyi Ekechukwu</h3><ul><li><a href="https://iheanyi.com/">Website</a></li><li><a href="http://www.twoblacknerds.com/">Podcast</a></li><li><a href="https://twitter.com/kwuchu">Twitter</a></li><li><a href="https://github.com/iheanyi">Github</a></li><li><a href="https://egghead.io/instructors/iheanyi-ekechukwu">egghead.io</a></li></ul><h3>Joel Hooks:</h3><ul><li><a href="https://twitter.com/jhooks">Twitter</a></li><li><a href="https://joelhooks.com/">Website</a></li></ul>

Today Joel catches up with Iheanyi Ekechukwu. Iheanyi is a Product Engineer currently working at DigitalOcean. He previously worked at IBM on Watson. They also talk about Iheanyi's education, stack, and side projects

Topics

Instructors

Content Type