Introduction

[00:00:00]
>> Mike North: My name is Mike and this is my 11th course with Frontend Masters, which is pretty amazing. And I'm super excited to share Ember Octane with you today. I work at LinkedIn as a staff engineer and I worked very closely with the Ember core team there where we've been building all this stuff.

[00:00:20]
So I've been seeing it for the past year and a half, or two years, slowly and painstakingly coming together. And it is so cool to be able to not only unveil it, but to be able to start building apps with it and start reaping the benefits and seeing that things are simpler and easier and way more fun.

[00:00:41]
So, if you are new to Ember, it's an open source framework for single page apps. So it sort of is in the same space as react or view or angular. Ember puts a high level of importance on developer productivity. So we're interested in empowering developers to focus most of their energy on building product.

[00:01:07]
Building features, fixing bugs, solving interesting problems. And not so much in deciding between three or four equivalent options, or almost equivalent options to get something done. That is a means to an end. So Ember has ambitious apps in mind. And this means apps that have a lot of data going through them.

[00:01:31]
A lot of interactivity that they have to handle. And this is part of why LinkedIn is invested in the Ember community, and the Ember framework. LinkedIn.com is probably the biggest single page app in the world. It is an Ember app with many sub parts but about 250 people working on it committing code everyday.

[00:01:56]
So it is certainly an ambitious app and we hope that the stuff that we do in the open source community, helps lift everyone else up as well. Ember is opinionated, which is a good thing. That means that we can more effectively than any ecosystem I've seen, leverage common solutions, to choose a common path and make it good.

[00:02:20]
And everyone walks down that path so we don't have to worry about maintaining three or four different things. And we even know that in the future, once there is a solution for some problem, we're all gonna be able to take advantage of it. Ember puts a high amount of value on stability without stagnation.

[00:02:40]
And that means that we don't leave teams behind, we try to make sure that the upgrade path is as easy as possible. And I am very proud of the fact that we've managed to take our community and bring them from the IE eight ages up to the present while having a reasonable migration path.

[00:03:00]
It's not perfect. It never can be. But there are no points in time where we just said it's time to rewrite from scratch. So in this workshop, we're gonna talk a lot about the important things one needs to know in order to build a modern ember app. And we're going to do so by building an app together so if you've taken classes for me before sometimes I do a bunch of like slides and we talk about things and then we do some exercises, we're gonna do it differently today and we're just gonna collaboratively build an app together.

[00:03:36]
I want this to be a miniaturized version of a real world development experience. So we're gonna make sure that each step along the way, we make sure our tests pass and we kind of evolve this starting from regular HTML and CSS all the way to a an interactive full featured app.

[00:03:58]
But we wanna do so in a sustainable way. Feel free to ask questions. All of the stuff I'm showing you here is very, very new so almost nobody is an expert on all this. I may not even be able to answer some of your questions, but I will try my best.

[00:04:16]
And I think we're gonna have a lot of fun. I really, really enjoy working with Ember Octane. So, here is the app that we're going to build today. You may recognise this as Slack, the popular team chat app, where we have on the left side, you can select different teams.

[00:04:38]
Then for a team, you have a list of channels and each channel has some messages. So we're gonna deal with all of the problems around this like routing so that your URL takes you to the right place creating chat messages, deleting them, etc. And this app is going to be fast.

[00:04:54]
So simulating a mid-range phone on a 3G network. Our first meaningful paint is at 0.7 seconds, 2 seconds is a pretty reasonable and respectable score for a full fledged system so you can imagine that we have over a second of headroom for an API that might be a little bit slow or do you have some database queries that take a little while.

[00:05:19]
And this is on a mid-range phone. If we look at desktop performance, we're in the 0.1 and 0.2 second range. And the only number smaller than those is 0. So this is blazing fast and we're gonna use the combination of some really fast client side code, server rendering and some progressive web technologies to get here, but this is from a human perceived performance standpoint, this feels instant.

[00:05:52]
This is approximately the amount of time it takes to, when you flip a light switch, the lights come on, we think that's instant, that's the way our brains work.