 Hi, thank you. My name is Steve Tyler. I'm a part-time developer. I've been learning front-end development in the last few years. I work as a small business IT consultant. For the last few years I've been learning front-end development, just doing websites for friends. Sorry. Sorry. Last few years I've been doing websites for friends and local small businesses. About a year ago I kind of lost my way a bit. I wasn't quite sure what direction to go in. Then I got an email one day from one of these online learning sites that I signed up to. A site called TalentBuddy. They've got a new course. It's a full-stack course using the latest technologies. We get to build a basic version of Twitter. I thought it sounded like a great experience for me. It was quite a big leap from my experience at the time. I really guarded it and it was a really good experience. I'm just going to run through what the app does. It's just a basic version of Twitter. We just log in here. We just get a list of your posts here. We created some of my Twitter favourites within here. You can just create a new post at the top. We just publish a new post and then I can just delete that. You can go on to other people's pages so I can just go on to my own page and it just shows you posts, who I'm following and who follows me. I'll just log out of there. For me on the course, when I was first introduced to Ember, I was told to go to Emberguide. For me personally, now that I've got a bit more experience, Emberguide is great. It's a really good reference. When I was first starting, it was quite a lot to take in and I was quite overwhelmed. One thing I think it's missing for this is an actual diagram. It's a diagram that's been used in other talks. Ember uses its own version of the MVC pattern where you have models of your data. It's a way of separating your concerns. We all know how to separate our HTML from our CSS from our JavaScript. Here we're separating our models, our data from our views, what's went into the screen, and then from our controllers, which are like the middle man between the two. Ember's based around the router. It uses the flexibility of URLs where you can bookmark URLs and share them. It generates a URL per root. If we go back to my app again, you'll see here that when I go see it on the sign-up page, you get to create account root so that I can use the back button and go back. Some other apps don't always work like that so you may end up going to the previous website that you are on. In the router, that's where you load your models, your data. Because you have to define your roots in the beginning, it makes you think about the structure of your app first. It's a good way of working. I still quite like to take in. After a few weeks, I'm still a bit confused. I just said to my tutor, can we start with basics, Ember? He said he came up with some exercises for me in JS Bin. People don't know, it's a really good testing environment. We just did some very basic examples. In Ember, your base class is Ember.object, which all your objects inherit from. You use object.create to instantiate that class. Various simple things we did. Just create like a data object here. First name and last name. Create a new Ember object. Ember uses here, when you enter the template here. In this case, we use hammer bars, but I'm not in the latest version of Ember from version 11. It's actually HTML bars. Here, you render a template. Give it a contact with my previous data object. The view, you can then append to a class in the DOM. In this very simple case, it just outputs pi under London. That's the output in JS Bin. I've since found out that there's actually Ember.js bin now. That looks really good. It's worth trying that out as well. After that, that's when it started to sink in for me. Then we had to go on to create a new Ember project. We use Ember CLI, just a command line interface, which you can just run from your terminal or on your virtual machine. I use a Ubuntu virtual box. The benefit to this is that it gives you a good project structure from the beginning. It uses ASX Transpillation, so you can use new features now before they're available in browsers. You have a lot of dependencies. To manage those, you use Bower and NPM, so you just have a Bower.json bar and a package.json bar, which keeps a list of all your dependencies. Again, because there's so many dependencies, you need, when you compile all these, all your assets, it needs to be fast. I know with GruntWatch, we'll watch an individual file. In this case, when you might have hundreds of different files, you need a fast process broccoli, so it uses, rather than individual files, it uses trees, directories of files instead, so it's a lot quicker. It gives you mock server so you can simulate your network requests. Live reload is basically so when you make a change to any of your files, it will automatically build all your assets and updates your browser in the screen. Now we also have, I don't think it was available, when I wouldn't start using it, I think I was using the beta version, I don't think it was available then, but now we have generators, so there is some boilerplate code when you're defining routes and controllers. You can just type in ember, generate, route, telegram, in my example. To create a new project, you need to install MSLI first, so just npm install globally, with a global switch, and then you just type in ember new and then the project name, so telegram, whatever you want to call it. If you have an existing file, you can just run ember in it within that folder. So that generates, that's my folder structure, so quite a lot of stuff there, but generally you'll just be looking in the app folder there. So again it gives you a good structure to know where to place all your files. Right, so if you go back to the app again, so from the beginning we need to think about what routes I wanted to create. So from here, so we have one route here for our login page, we have another one here for sign up, another one for reset password, that's three, and another one once you've reset the password and just says confirm that you've reset your password. So that's four on this route. So if we look at the actual router, so the parent route, as it were, is called a resource, so that's a namespace, respectively. So then within that we have this route just login with the optional parameter, if you want to change the name of the path here, so I've just changed it to the index route there. So we have four routes within that resource, and also on the next page, on the user page, you'll have a user post page, a user following and a followers, so that's another resource for the user page. So the objects that are created from the router, in this case will just be, so the resource will create telegram route, telegram controller, telegram view, and then for the routes will be telegram login routes, telegram login controller, et cetera. So looking at the login page, so this is my template, so this is just the form, the login form, so here this is just a form where we type in our username and password. So we have these input helpers that just take the value of the username and password, and you'll see that will then check it on the backend, on the server, and you'll see that if the login fails, then it will render a div and an alert that the password is on. So if I just type in, so login, so it's rendering that div because of the password. So on the controller for the login route, this is where we're checking if the username and password are correct. So we're doing a find on the store looking for the user. If the passwords match, then we have this controller.transitionToRoute path here. So if the username and password are correct, then it transitions to the route myStream. If not, it sets the login fail property to true, which is why that alert was rendered just now. Right, so now if we log in, so if I log in normally now, so now that we're on this page, so now we need to load some data in because we need to load the post data in. So for that we use EmberData, which is a library that manages your models. So it manages that within the browser. So it keeps the store within the browser, so it's a lot quicker. And that saves us having to use lots of extra codes in the past. You may use Ajax calls to load in JSON objects. So in my case, the two models are very simple, just users and posts. So this is just my user model. So we need to find the attributes here. Most of these are just going to be strings. Apart from obviously it's followed, true or false. And in posts, so we have user property here, because that's the author of the post, so that creates a one-to-one relationship between the posts and the, so that's one-to-one relationship between the two models, the post and the user model. Right, so in the route now for that MyStream route, so we return, so if you use this.store.filter and you filter it for posts, the operation, that's a back-end operation, so that's run on the server, and that will return all my posts and the posts of people that I'm following. Store.filter returns a live array so that if you were to add posts, so if I was to create a new post or delete a post, it keeps that array up-to-date. Right, so in here, I don't know if you noticed, but if I type a post again. Sorry, yes. Right, so you'll see as I type in, there's a character counter underneath, just like in Twitter. Also the date here, well, it's a few days ago, but this keeps up-to-date. So in Ember, what we can use to do that is computer properties. So the way I think of computer properties is like Excel cells. So if you've got like a formula in a cell, say for calculating VAT or something, I don't know, but that is dependent on another cell. Sorry, so it's a property that is derived from another property. And they do this by extending the function prototype. So this is my, again, my controller. So a new post, that's just the value of the text area. So obviously that will be empty, that's what I'm off with. And so the character count, computer property, it's just dependent on the value of new post or the length of that value. And so you define the computer property, we'll say dot property at the end, and you put in the two properties, new post and max length. Right, I just mentioned components. I haven't used components too much. I'm starting to kind of move my post into a separate post component. Because components allow you to define your own tags, HTML tags, which means you can reuse those anywhere else within your application. So my, originally my post looked like this. So I was just, so the HTML was in the, just within the template. So we have a link to helper there, which just links to the post root of the user. So now I've moved a lot of this code into a separate post component, sorry. And now I can just render it like this. So you're defining a new component post block, I've called it in this case, and it needs to have a hyphen in it. But I am on adding some more features to this and using more components in the future, adding like a repost, retweet component to it, a bit later on. So I think that's about it. Yeah, thanks. As you cast your mind back to when you were learning at the start, do you remember what are the things that were troubling for you or that didn't make sense when you first looked at the guides that now didn't make sense? Well, it's just a lot to take. I mean, being new to NBC as well is quite, again, doing it individually, like working with controllers first or then working with the user individually, that's what really helped me. I suppose having MSCLI as well gives you that structure so you know exactly where to put things. I'm obviously still learning, so I'm not being a... I can't do in my spare time, so it is taking a lot of time or something, but I think I will sort of get there. Hi. Had you come across some of this for the time of the course? No, I'd never heard of it before. No. So, because they just said of using the latest technology, I wasn't sure what that meant at the time. So, yeah, so that's good. Yeah, because I wasn't sure if it was going to be Angular at all or not, but I think that the guys are based in Canada, so I think they know who they are, I think they know them, so they're based in the same area, I think. So, just why, but I think that's one of the other reasons why they chose Ember. Hi. Hi. That was awesome. Oh, thanks. It's all right. No, that's cool. So now you've got your newfound sort of experience in Ember, what do you sort of see as the future? Is this something you're planning on taking forward to keep going? Yeah, well, I'll definitely, definitely, because this gave me an idea to kind of extend this app. I'd like to kind of tell it into like a sort of organiser, so I've kind of added another feature to it where I can import my own tweets into it. So, I thought I'd be convinced of a project for me just to sort of an import data into it and then start filtering it and searching and things like that. So, that's what I had to do next, just a little side project. So, you just work on this in your own time, basically? Yeah, it's in my, yeah, yeah. So, I've come a freelancer whenever I don't have constant work, so whenever I don't, I kind of work on my own book. That's awesome. I love seeing stuff like this. I mean, every one of us here has been in exactly the same positions. That's really cool. Yeah, thanks. That feels awesome. Yeah. Cheers. Thanks a lot.