 You'll be all using it up. Who am I? I'm a husband and father. I need a full stack guy. We're going to be on rails right now. I have a little JavaScript. And I get stuff done. So I don't have time for the small stuff. So I want conventions over a configuration. And Ember is definitely... It takes that place. So take away support today. What are you going to try to come away from this talk with? Why choose Ember? Ember is better than other things in my opinion. And I'm trying to tell you what. Different parts of it. What makes up Ember? There's different components. And why you should use Ember at work. It's really one of the tough cells. You can work nine to five and say, how do you bring it into the workplace? Hopefully I have some tips and tricks for you. To slide that in. Starting off, why choose Ember? Well, because we have... Sorry. Mainly in there. So I took a gander. I'd react for a little bit. Drive back from my end around it. And I just felt weird. I felt wrong putting in HTML just right into my JavaScript. It just... It won't happen. Now I'm not going to get to react. It's a great library. That will work for situational use. I just don't see it as a big, big, full solution. Well, how about Backbone? I went on Backbone. I said, all right, I need a template example. And I said, all right, well, you have a model. And you have the URL path. You have the routes actually in this. This was an example. Class post has all... I just found it. So we'll talk about... Well, some things about Backbone. PHP. I know it's not really a JavaScript library. But it shares the same convoluted putting functions and places logic into your application. This is actually a real WordPress theme that... I actually got a hooded headache looking at the picture while creating the slide. I'm not kidding. I'm not available for PHP consulting. I had them before, and I'm not available. It just... I'm glad everybody's here. All right, so fine. What is Ember? Ember's awesome. I'm taking a stance. It's great. And I'm hoping to feedback as you can see. It's a standard definition. It's an open source framework based on the MBC pattern. It allows great single-page apps using common idioms and conventions. It removes the decision and thought to where you structure your application, how you structure it. And so Ember is not a library. It's a full JavaScript framework that provides routing components, models, and we'll dive into those. Ember is not going to break in a few months and does it. And so it's actually maintained with backwards compatibility in mind using semantic versioning. You guys don't know semantic versioning. Semper.org is a fantastic way to do it. And Ember is not wishy-washy. It is a strong line of opinionated framework that takes a lot of that decision making out. So, I thought a better way to talk about cool things is to show cool things. So, we're going to do a quick dive into this and test it with small resolution. But hopefully it'll work for you guys. Alright, so this is the Ember.js homepage. It's straight up right on the main intract. And this is a little application that has some handlebars. We'll dive into what handlebars is in a minute. This is a name. Enter your name. So, my name is Ryan. I want to learn Ember. There's a dynamic binding right there. It's four lines of code. So, here's a cool little sample of a little mini Ember app right on the homepage. It's a generic email inbox. So, you have inbox, you have different spam folders. Notice how the URL is changing right up here. So, let's go into our inbox. Welcome to Ember. We're actually in that RESTful style endpoint. We're looking at that email from Conspector for resources. So, it's a quick little demo if you want to play with that. So, what's in the box? What's included when you download Ember? The Ember main framework, it's minified. There's a fantastic release schedule. Every six weeks there's at least another version. They actually do provide backwearing. Handlebars. Handlebars is a templating language that is similar to Mustache. It provides a logic-less templating language for your HTML. And it includes jQuery. jQuery is pretty much convicturous nowadays. Why is it included in Ember? jQuery is used for inserting and modifying DOM elements by having query. Developers can move between Ember, apps, and rely on the fact that they have a battle tested cross-platform library underneath them. And then the queue unit is a testing framework that is included in Ember. What's not in the box? What actually should be. It makes sense to keep them separated, but it also makes sense to put them together. Ember data and Ember CLI is a robust library for modeling data that's designed to be agnostic to the underlying persistence mechanism. So it works just as well with JSON APIs or HTTP as it does with streaming web sockets or local index to DB storage. It provides many of the facilities to find in server ORMs like Rails Active Record, but it's designed specifically for browser transcription. In particular, Ember data uses A plus compatible promises from the ground up to manage loading and saving records. Essentially, if you actually want to do something that's important, use Ember data. It's really cool. It adds a has made, belongs to your relationship. That is really nice when you have separate records and loading those records deep down. It also allows you to get to a store class. So if you were to make a request out to a web service, you can actually save the data to that local store and then you don't have to make a message to your request to the store. We'll dive into that a little bit later. Ember CLI. Ember CLI is a really, really almost essential choir piece of add-on right now. It's a command-line interface for actually helping you create your apps quickly and efficiently. It has so many features. I might need two slides for this. We have an asset pipeline. It has a project structure, which tells you models go into your models folder, control it into control folders. It gives you a convention of how you should gain your files and it just really tightens things up so you don't have to worry about those things. It has a live development server. It's similar to Grunting Gulb and live reloading. So you can actually make changes side by side. Windows pops up and you have instance code changes. And you have a generated Blueprints. So if you were to say, oh, I need a new model Ember Generate model user. And when you have a user and it's template, it adds everything into that folder structure similar to Rails. And then there's a different way to create a component. Ember G's Generate. So here's just a couple other things that Ember see if I can do. Fingerprinting, adding on a unique GUID to all your assets when you deploy those out allows unification as well. So each of those got a script code. Deployment, API stopping, version control, SAS, packet management, CI, CD just there's so many things you can do that with CLI. And we'll touch with BaseBud add-ons. So yeah, I'm going to actually do it there. So this is a demo app that I created for you guys and for the community. It's a completely Ember 2.0 compliance application. And one of the reasons why I really specified Ember 2.0 I'm glad they released in August. So I had to confirm my application at the same time they were going live with Ember 2.0. Let me pause real quick to talk about Ember versioning. It's really important. You'll have Ember 1.11, 1.12, 1.13. Ember 1.13 was the last release before the 2.0 branch. So in order to be Ember 2.0 compliant, you could actually have your Ember 2.0 compliant in Ember version 1.13. So as they went up the chain, they actually were adding more features in the 2.0 and they just turned on deprecation warnings. So in 1.13 they added completely views were going to be deprecated. And so you get the deprecation message in your Ember inspector, just based on it. And then as you get to 2.0 it actually will turn off those all and your apps are breaking. So if you know where you upgrade to. So I think one of the most fantastic upgrading strategies that there are. So this is a race app. Let's say you're doing a half marathon and want to see how your athletes are doing. And your name is to athletes because I'm a technical guy. So we have races, let's go on races. And this is actually, I hope you guys can hit this and I'll supply some of the GitHub code and I'm please feel free to play with this. This is actually using Firebase which is the database as a service actually pulls down all that. There's two lines that connect to Firebase and we'll open there. Kind of partial with Boston Marathon. So Marathon is 26 miles, it's 13 miles if you get the idea. So we have races and we have a unique ID Boston Marathon. We have a couple of buttons up here. Start race start pass race and then reset race. So right now they're all sorted by default, by age and then by 5k pace. So this is a 5k pace is a 3.1 mile race that you kind of average out your times. I use that as a helper to kind of generate random numbers if they were running an actual marathon. You can take a look at the actual math that's in the application. So let's scroll over here. 13, we have total time on the side. So we'll start at fast race real quick and kind of see the people running really fast. Really fast. Oh, okay. That was a weird bug but you got to play with to figure it out. So we can have Yeah, that's it. Open a board of us too, that'd be great. So we have Serena doing pretty well, 135. We can sort by different all these kind of things. We're actually doing correction, modifying the array that's holding all of that data. Or dynamically doing it. You can sort by age and my favorite is Debbie. Debbie is 59 years old and she run for 630. That's fantastic. Let's have on over to what's the answers in here. And this is the user's route standard type of style and you have details about that in the code. And in here we have the member data relationship users.race user.race and you can jump back and forth between those parts of member. Well, you saw a lot of cool things. What was it made of? Routes, models, components, and templates. So essentially these may kind of build in blocks. We have a couple of ones I'll touch based on, but these are the ones important for number 2.0 going forward. Routes. In EverJS, each of the possible states in your app are represented by a URL. We can easily answer, are we logged in? What are we looking at? These are encapsulated by a hand list for the URL. At any given time, your application has one or more active route handlers. These active handlers can change for one or two reasons. Number 1, you either interact with a component which generates an event which causes you to change. Number 2, you always change the URL manually. For example, by the back foot or the page loaded for the first time. So one of the big concepts to number is that it is essentially URL driven and based on the URL is the state of your application. One of the important parts of routes is that it actually will take the data and get that data for all the requests. Routes are where the actual data is happens. And here's some example routes. So since Ever, this is a copy script. Here's an example of a router file. We have the top level users on the guys over the side using the green laser pointer on this side. We have a user's route which has a user path underneath it. And there's a lot of convention happening here that's under the covers that you don't have to take care of. If you example, you don't specify an index route, it actually will automatically generate an index route. So users actually right in here, there's an index route that's trying to generate it. You don't have to override it. The path of users, you guys see here right here, it's actually missing a path. Well, if it's the same as the route name, that's what it uses. So the convention will allow you to really drive up your code. One of the big parts is data down. So routes actually take all that data from the top level and send it down to the controllers. And then the other part is having an action bubble up. So if you have a button on a page you actually will send that event up the chain until a route can actually an actual handler handles that and then it does something with that action. So if you can go all the way up to the top of the application or it can be handled down all the way in that component level it's really up to where you want to declare that. So we have a typical MVC versus MC, I like to call but it's actually just models and components. So we have a couple other parts. Components do have different parts of it. We'll touch base on what that is. I think that MVC pattern is starting to get more of this kind of amphibious. So we'll dive into what components are. Components are a JavaScript file that has JavaScript logic and actually an accompanying handlebars file. They are isolated by design and they're not aware of the surroundings. So in any context that you need you actually need to pass that in to that component. So as you saw that there was a user list and that was actually a component. So it didn't actually have any data in that component, it didn't make any calls and we actually call that component we send the data into it. Components require a dash in the name because if you were to create a V component for example, you override the bold tag and you probably don't want to do that. That can give you a lot of power. It's not a good idea to show yourself. So they require a dash name. It's actually faster for it to dive down and find which components are there. So here's an example component. I cut up some of the some of the example code. You can add properties like a standard object. This is a CoffeeScript just 1-13 so it actually is an array of 1-13. There's a couple Booleans, an array of the sorting properties. We have a standard action a sort age so when you click on that little tilt that little up-down arrow that will actually trigger this action since we're in the component we want to bubble up the actions but we'll handle that action right in that component. So we're just setting the sort properties which is set up here set it to age do a little interpolation sort by description and with that sort of description set it up here set the property of property blank otherwise that description that needs sort properties as a member member native and then the arranged content here is a holo from Neal's sorting controllers used to be able to have an arranged content sort type and now I just named it just for property it's actually a computed property and computed properties are pretty cool actually we'll go ahead and do a lot of work based on different properties different properties the content and the sort properties we'll actually do all that sorting for you the sort properties and everything So here's an example of Ember's website with the component email gravitar image and stuff in your image and it'll actually automatically grab that age grab that URL here right it's avatar returns the email in an mv5 hash you jump around to the actual application it has two gravitar images components with an email defaulting to the Tomster and then the actual component is the source of the gravitar URL which is that property so let's talk about models So here's a ES6 example of a copy scripted model it's first name and last name the model is a class that defines the properties the behavior of the data that you present to the user anything that the user expects to see if they leave your app and come back later or if they refresh the page to be represented by a model so we have the first name, last name and full name so I want to talk about this computer property it will actually take a listen on the first name property a listen on the last name property and actually you set the function take against those properties adds a string empty string and then returns that as a full name really powerful so if you were to use a full name property here's another example of a copy scripted race model we're actually metaing up the attributes the adders here by default since convention wins in this case it's a string, it's a boolean, it's a boolean so if you want to be more explicit you can actually set those here being a little fancy there and then the really important thing here is that the has been users set that relationship and if ever will take care of one of that as I said I love computer properties it makes things really slick what it serializes as an adapters is how to modify your code how to get your code so that's kind of an advanced topic I'll talk to you in a minute on that models can be anything you want you can be arrays, hashes, you can be other models you can be a technical JavaScript object pretty straightforward what is a template? EmberJS uses a handlebars template library to power up your UAPS user interface handlebars templates are just like regular HTML but they can also give you the ability to embed expressions that changes what is displayed so if you want to modify that model anywhere else on that page it instantly might be changing that full name A, etc in the middle here on this TD we have a link to a concept similar to Rails, how they have their link to we pass it the race a section that brought the model race ID the idea of that race and then we give it the name of the race name there is a show of syntax for that link too I put it in the code so you can kind of see different examples basic, no logic users comes in as an array of users it's been through each one as a user user.h there's a cool little hint, can't help it if there is no users it dumps out an empty row saying so you'll see in going around to see lots of controllers you still can use controllers they're being interpreted away to routable components right now rugs send to controllers components are kind of isolated as by design there's an RFC and the Ember R2 component specifically so they'll decommission controllers so making sure you auto-generate it to get convention wins pound that point home if you don't add a controller it will automatically add one for you there's nothing really fancy there there are single temps so they actually will save that state across pages and sometimes that's good and then it's bad I call them just decorators for instance if you had that full name kind of that's the user controller instead I'm bad if they can use a model because eventually they're going to phase out controllers this is a pretty boring slide so I thought I'll spice it up a little bit I'm just amazed, I don't know how it does I'm going to try that let's see how it goes that's where I put it that's awesome so helpers helpers are a little Ember addon that helps with presentation standard, nothing too fancy Ember Generic Helper format currency in the bar's template it would be a format currency of 250 and the output would be $2.50 really lightweight not to have any crazy monologic just to present presentation addons are really powerful there's some rails gems so that they are extensible there's tons of websites out there that help you out, find the best ones every bootstrap, every CLI deploys, anything you want to do you can make it an addon so parts of Ember routes, components, models templates, a little bit of controllers a little bit of helpers and addons those are really mid-core concepts so how do you use Ember at work that's the hard part this is a really cool language how do you sell it to your boss teamwork that's how you sell it to your boss so let's say you were to jump from I had an Ember application and I jumped to another Ember application there's no learning curve I know how to properly structure it I know how it works, I know how to deploy it backbone not so much let's put your models over here so every team can be different you have to learn the whole application over again and there's no similarity between the projects so that's one of the great things about marionette, marionette is bringing that convention into backbone and we'll see how that works so what does this desk look like? does anybody personally just talk to you with this desk? for me it looks like a designer desk nice and clean smooth like Kia furniture not much going on with it but it's I call it designer desk so how do you work with designers let's say you designed the UX team gave you a giant HTML and you have to make it an Ember well you replace a couple four loops, you throw a couple properties in and you're good to go there's no logic in your presentation vice versa it's really helpful to see here's my loops, here's my presentation layer send it off to the designers no convoluting let's talk about Angular so imagine going up to a boss I'm going to work on this project for six months I'm going to spend all this time and work into it and then a couple months it's going to change the whole thing will go over again no backwards compatibility I can't sell that I can't in good faith say this is going to be a good project to work on I'm going to play those out you'll learn those by working on number one it's also owned by Google that's good and bad Google's big company has a good work behind it but also they'll be flex yahoo, UI Microsoft server lite so Ember is not owned by corporation it's backed by big companies they use it in big companies I believe iTunes that's Ember app you can actually find out what an Ember app is it's an Ember tab in Chrome extension we'll talk about that communities are really strong I've never really felt this with any other language C-Sharp, Ruby, Rails I really haven't felt that there's definitely some really cool things for instance meetups all over the world meetup down in Boston some of the guys who are on the core team I asked a question at one of the meetups so Ember data is at 027 and then Ember is at 112, 111 so was there a disconnector are they going on the same release cycle and one of the guys on the core team said they're going to study we're working on getting that up to the same versioning scheme and they can go hand in hand so another problem I have is one X application I think it was 111, 112 trying to get that up to 2.0 and I had this really interesting problem where I couldn't get this page to load correctly so in the content I helped on the Slack member group and I was talking to the Ember data group and said hey I have this question about this context based on a little snippet of code and one of the maintainers of the application was in there and he said oh let me try this okay try it out and it worked fine so in 2 minutes I was able to sell my bug I was working on for it and now where is it so hey guys our community is fine we've got a cool logo there's also Bob the Tomster Seattle Tomster kind of talks about Denver Tomster and it's a serious but fun kind of definitely a production level scalable, stable but it still has a fun concept to it it's not hard to work on a standard thing so we have some guys opinion of where Ember lands and kind of the state of frameworks in 2014, 2015 and I know it's a little bit small I apologize but I couldn't glue up any figure it looked awful so on the left hand side we have just released kind of projects we have and then the y-axis we have the slow innovation and so backbone and glue web tools not innovating quite aggressively knock up JS and then over on the top left we have the hotness of the act it's hot but it's innovating but Ember's figured out that the virtual dom-diffing is really really important and that's really to get really fast apps so in 2013, Ember released the glimmer engine, it's completely right with views and so as it reacts with the virtual dom it actually changes its views, the dom, next to each other the one differentiating aspect the glimmer engine has a number it adds a dirty tag not for that property so if you compare those dom-diffs you don't actually have to navigate the entire dom you'll actually just throw down the dom find ones that are dirty, compare those and dip those in as well so while you use Ember at work teamwork, designers community, stable easy to use has a giant asterisk there is a learning curve on that and that's why I'm here to help you I'm here to show you all those cool things you can do with it and believe me I'm more than happy to help answer any questions it's really hard it's pretty hard to get started but once you get it, it's really fast there's really smooth sailing so here's the cool parts I definitely have time for because I talk too fast so everybody is talking about isomorphic JavaScript, can you run JavaScript on the server side, make that first response fast yes you can, there's a project called fastboot, written by Tom Dale one of the main trainers it's an Ember CLI item add-on and there's some stipulations but you know it doesn't allow you to have the DOM so you can't run jQuery you can't run any sort of manipulation on that it's essentially for web searches, indexing getting that first page reaction time really fast and it's working I think it's Alphabeta but it's pretty promising so we have pods, not those pods we have the pods so pods are a structure of your files so right now let's say you have an object called Pickle I want to use Pickle because it sounds like so we have controllers, Pickle, routes models, they're all in place but they have the same name so it's kind of easy for, at least I use a new one so it's easy to kind of find open find all the things in Pickle well if you had to start getting a large project and start adding you know cucumbers and squash and apples and oranges and you just have to have a gigantic folder and so pods allow you to take that name and kind of put all those files into one place and go around the models you don't have to have all those files because they're auto-iterated based on convention there actually is a Pickle.js if you're interested so say no to 2013 so you guys will go and say I'm not stuck in this problem if you look at Stacko before questioning oh man that's 2013 should look at Ember has graduated so far in two years that 2014 or greater so this is a kind of complicated slide but this is kind of out of the left field this is how the data comes down like I mentioned the store before in the robots Ember is based on the robots so if you were to do slash races and say okay well go find me all those races in the local HTML store they're not there use an adapter to modify that request go out to that REST service go out to that JSON API service self-service if you're so inclined and then use the AJAX request send that off into that service and send it back and then send it back as promises so that way you can chain those you can have a really snappy web in front end and then fill that data in as needed so one of the big parts is the Ember Inspector so we'll dive into this in a quick example but it's on GitHub you're actually going to push to it and it's available as a Chrome extension and actually we'll dive down what your application is you can actually see all the routes the data, the models all within the browser here's some cool resources I put the guide to Ember right on the top page it's fantastic fantastic community keep that website up to date with examples and it's essentially if you have a question about Ember it's usually on that page and the Slack etc the Ember Weekly Meeting List is a pretty cool way to keep up to date on what version is coming up and what new business is coming up so we slide on over real quick to that Firebase app that we're playing with so let's dive into that races off the marathon and let's see if this works on a big screen you actually can see the whole view and you can see application as the base races you can dive into the model itself so they click on model you can see all the properties of that model you can see different properties a lot of you have handled by Ember this little calculator means it's a computed property and you can dive into the routes themselves you can see all the routes that Ember does and all these are all like I mentioned I don't type any of those I can override that loading screen or I'll load a screen and make it paste this whole data actually show you all the data that you have in your application and all the users, 300 users you guys can play with that hey guys we have 5 minutes do we have questions thanks guys so do I understand that Ember is used traditionally for single page apps or does it incrementally add Ember I don't have experience doing that so I can't but what we're doing on a project that I'm working on we're actually doing it side by side we're actually using the same backend and we have the current interface on one side we're actually able to stand up into an Ember app like the same data source so that's how I kind of do it side by side I just had a couple of some nice questions I saw AdSigns in an area of Eros Dash is that ES6 or is that copies yeah just back here before you yep this is a copy script so this is a function a little bit called at is at this dot so you get the context up you can kind of trim up your code you can optionally put it in parentheses if you want it's a copy script you don't have to use a copy script Ryan, great job thanks guys, thanks for coming everyone