Learn Ember, Redux-observable and Tachyons

Handling async actions that affect your application’s state sounds like a tall order, but Redux makes it possible — and a win-win for you and your app’s users.

In this course, we will begin with nothing more than an empty directory and a text editor. Through small, focused lessons, we’ll learn how to set up a React project that uses Redux for state management and redux-observable for asynchronous actions. We’ll see how ‘epics’ are registered and how they each receive a ‘stream’ of actions from the store.

With an understanding of how things work, we’ll move onto solving common problems like: 
- Ajax cancellation
- creating sequences of async actions
- enabling code reuse through higher-order Observables 
- and much more.

RxJS 5-based middleware for Redux. Compose and cancel async actions to create side effects and more.

redux-observable

Asynchronous State Management with redux-observable v1

***Note: RxJS imports have changed since the publication of this course. Operators now must be passed into `.pipe` to be applied to an observable.***

In this course we will begin with nothing more than an empty directory & a text editor. Through small, focussed lessons we’ll learn how to setup a React project that uses Redux for state management and redux-observable for asynchronous actions. We’ll see how ‘epics’ are registered and how they each receive a ‘stream’ of actions from the store. 

With an understanding of how things work, we’ll move onto solving common problems such as Ajax cancellation, creating sequences of async actions, enabling code reuse through higher-order Observables and much more. 

## **UPDATE:** 
This course is outdated, view updated material here: [Asynchronous State Management with redux-observable v1](https://egghead.io/courses/asynchronous-state-management-with-redux-observable-v1)

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Up and Running with redux-observable

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 this lesson we’ll learn exactly what’s needed to incorporate redux-observable into an existing React/Redux application. We’ll learn what ‘Epics’ are, and how they receive a stream of actions and return a stream of actions. In-between is where we get to apply side-effects, call out to external services etc etc. In this lesson we’ll demonstrate the ‘async’ nature of epics by responding to an action with another, delay action.

Add redux-observable to an existing Redux project

Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

redux

In this lesson we’ll learn how to perform an Ajax request to an external API in response to an action in the redux store. We’ll see how, within the epic, we get access to actions after any reducers have been executed and how we can convert that incoming action into a resulting one that will save the data received into the redux store.

Use redux-observable for simple Ajax requests

With redux-observable, we have the power of RxJS at our disposal - this means tasks that would otherwise be complicated and imperative, become simple and declarative. In this lesson we’ll respond to an action by queuing up 2 separate Ajax requests that will execute sequentially. Then we’ll group the results from both into an array and produce a single action from our epic that will save the data into the redux store

Create a queue of Ajax requests with redux-observable and group the results.

When accepting user input and converting it into a request that talks to the outside world, we can often end up in a situation where responses are no longer relevant. This is a common case in type-ahead style input fields - we would only want to call an external search API after the user has stopped typing for a short amount of time. In this lesson we’ll see how we can begin to combine RxJS operators to solve such problems. 

Debounce user input to avoid repeated Ajax requests

Any application that uses external services such as APIs should be able to handle errors gracefully. Often this requires no more that displaying a message to the user and ensuring the application continues to function. In this lesson we’ll look at how we can convert an error from the network into an action that is dispatched into the Redux store, allowing us to show an error message to the user and prevent the application from crashing.

Handle network errors gracefully

Although ‘epics’ in RxJS are often described as ‘actions in, actions out’, there may be times when you need to ‘bail out’ of an action, or to just ignore the current one given some condition. By learning about RxJS’s `filter` Operator, we’ll see how easy it is to do ‘nothing’ when you need to. We’ll also see how the composition techniques available in RXJS allow us to control the UI in a declarative manner.

Filter a stream to exclude empty values

In certain situations, you care more about the final state of the redux store than you do about the particular stream of events coming out of an epic. In this lesson we explore a technique for dispatching actions direction into the store, having the epic execute as they would normally in production, and then assert on the updated store’s state.

Use tests to verify updates to the Redux store

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

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

You can easily add CSS libraries to Nuxt using `yarn` or `npm` to install them, then simply adding them to the `nuxt.config.js` so they're included in each page. Then all the classes will be available for use in all of your templates. This lesson walks your through installing a library then adding it to your `nuxt.config.js`.

Add CSS Libraries to Nuxt

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

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.

Topics

Instructors

Content Type