 All right, good evening everybody. Thank you very much for coming down and before we get into ember London proper I'll hand over to our very gracious host So I'm Tom Cowell I lead our front-end development team here in London for safety and I drove Yes, we've just been acquired by publicists. No, we will not be speaking French during this requiring French for this time So safety is an organization. We've been around for quite a while. We like big technology interesting technology We also do marketing services stuff. So you may know some things we've done marks and Spencer's comm yes You're not buying your knickers there gentlemen, but you know, that's one of the sites we built We work with big financial services Harley-Davidson F1 kind of organizations like that as well And we're not hiring at the moment. So next month maybe come ask me And then just a sort of an order of detail if you do need to use the toilets They're out the door as you came in and across from the middle lift through those doors there If you're locked out go back to security. You've all got bracelets, right? I know I have a bracelet because I work here But if you've got bracelets, they'll let you back in if you get locked out If the fire alarm goes I will generally scream running under the room and I expect everyone to follow and If you guys have any questions about safety and or anything else like that feel free to come talk to me afterwards And then I'll let Jamie fill in the rest of the way Okay, thank you some Okay, so to begin with does anyone in the room have any announcements is anyone hiring? Yes Okay, so go see by this if you want to talk about that Yeah, I'm James. I work at company called entity. We're on my dental software We use ember we love ember if you like ember and like using ember Awesome anybody else And Okay, so another place to go see so you'll have time to meet all these people in between the talks and afterwards at the pub So this is what today's lineup looks like it's me rambling to begin with and then Nikki's gonna talk to us about accessibility Miguel is going to talk to us about mobile web apps and Rob is gonna talk to us about Native and the web and whether whether the web can be anything like as fast as native I'll give you a quick bit of ember London news We have actually 597 people on our meetup group now for whatever that's worth Obviously, that doesn't mean all those people come to every meetup But it's a nice number to have we've recorded 38 talks so far There'll be three more at the end of today, and we've had over 11,000 plays on Vimeo, which I'm pretty proud of that's in the last year January's project night was a real success So if you don't know about these the week after we do the meetups we do a project night and that's just an excuse to Come and hack with some other ember developers for an evening on whatever you want to bring your own project work with somebody else on their project We provide food and a space to do it in and so far it's been it's it's been a lovely atmosphere and the last project night in January resulted in a Poor request which fixed a big bug that loads of people had an ember CLI so you can get open source work done, too Our sponsor was wingman our next sponsor is ray gun. They're sponsoring next week's project night I'll go over the dates in a slide or two Or one slide So yeah next Thursday is February's project night as sponsored by ray gun The March meetup will be 30 12th of March and the March project day will be Sunday 22nd so we've got We've got a bit more sponsorship in March and room to do a little bit more So the idea of the project day is if weeknight is difficult Which they are for people with young families and people in situations like that or people who are coming from out of town Then we're going to run a full day event where you're not obliged to stay for the entire day Just come for as much as you want just to learn some stuff and work with some other people We have a forum I Hope you'll sign up and use it We use it to talk about the meetups and to continue discussions that we start at the meetups We also use it as a way to If you want to get help but you don't want to deal with the time zone difference between the US and here or you know Other people you might be able to get help from this is another ember community where you can get help from people who are in the same time zone as you And there's ember london.com too. I realized now you probably can't read the address there But this is where this links off to a lot of the entities So now I'm going to do just a quick catch up of ember news. Does this mean anything to anyone? Yeah, a couple of so this was a This was a TV show in the 90s called bad influence Presented by a woman called Violet Berlin and it was just it was like a kids computer game show And they did this thing at the end called the data blast, which is where Where they would play back all the cheat codes you might want to know Would like two frames each and the idea was you were meant to tape the show and then pause and step through Frames to get all the cheat codes at the end. So my ember news is modeled after that Okay Ember comfort sold out I am told that there are something on the order of 600 people attending. So that's not bad. It was 400 last year Who said about this? 65 and es next merged last month. So these are two ES six transpiler projects Yes, next is run by a guy from square six to five is it's own independent thing and The guy who's running yes next decided to combine his knowledge with theirs and now It's a bit like Google have tracer, which is their ES six transpiler Six to five is a little bit leaner a little bit more performant and we'll give you ES six features today I OBS Controversially forked off of node. They can't use the node name anywhere But it's it's basically all the patches people have wanted to land in node releases its own project Allows you to write ES six in your server-side JavaScript code Jolis is doing broccoli Thursdays now. So every Thursday she'll be working For a full day on broccoli to nail down the version one features and on that note There's now broccoli js.com too. So this this project is Getting to the point where it's stable and shored up and can grow steadily with semantic versioning I Thought this is a nice link speak to my co-organizer Ken about this if you want If you want some data to play with in your ember apps as a boatload here, so go check that out and if anyone wants to read one of the best articles on a Really good pattern for doing flash messages in ember and various other thing Lauren tan who's speaking ember cons Blogs about all things ember on medium And these are really in-depth elegantly composed technical posts. Oh and ember inspector now tells you What's of the features you're using are deprecated? Oh, and there's community survey as well So I haven't really prepared apart from doing the slides This is a good article too, I'll put these all up later so you can read these Okay, so If it so hands up who's using ember day-to-day in the room That's about half and who's used it at all Okay, and some some people we brand new to it But the ember has a six-week release cycle, so the new minor version gets cut every six weeks and features whatever the new Fully cooked pending features are so ember 110 just landed and I thought I'd go through some of the stuff that landed with it So I'll show you how to upgrade it first. So those those slides are an ember app and I will Shut it down quickly So ember 110 is interesting because it's the point at which HTML bars the more advanced replacement for the templating engine handlebars lands for real So in order to install it We'll go for Install ember 110 itself. Oh, oh, yeah, this problem I think it's just the way Bauer works I will connect to my own phone. That's probably gonna work Like a little bit of music. Yeah. Yeah, come on Question there while it's waiting. Yes I don't think it's faster it might be slower. Yeah The reason I'm running on IOJS is it's a god that's fast we okay cool So installing ember 110 alone isn't the full story now that ember 110 is a point where we switch from handlebars to HTML bars so we need to also Remove the old template compiler from a CLI and and the new one sir CMPM Yes, I'm using IOJS In support of a later slide where I demonstrate that ember CLI does in fact work on IOJS as you can see okay, so That was the upgrade process. So just to show you whoops, so to show you the diff for that There's not too much to it you swap out ember and you swap out the template compiler And you can actually ditch handlebars at that point So previously you had to include the hand includes runtime a few extra kilobytes of JavaScript in your app Now you can you can drop that all together so So chain else blocks Those who've been using ember will know that right now you have If else but no access to else if so in my example here You'll see that it tells me when it's too short it tells me when it's right and it tells me when it's too long and the way I've implemented it in this app See Because ember previously didn't support else if I've had I've got to have this nested set of conditionals But now that I'm on ember 110 and HTML bars The syntax highlighting doesn't work for it yet because it's too new but if the demo gods are smiling upon me Oh I've heard about this I Get the same behavior, but now with a much more elegant and Intuitive syntax that you're that you're used to block params so Again, anyone who's used ember previously will know that with things like each It used to be that each would have its own new scope and you It was sort of understood that within an each block the thing the item in that iteration would be the context of it Would be the this and then we switch to each something in some things But now with HTML bars and ember 110 We get a new syntax which is allows you to pass in things into that internal blocks I'll show you what that actually looks like So previously it looked like this each speaker and speakers Whoops It's playing back itself Oh God all right, so anyway, I'm just gonna make sure I'm running on the lip All right, it seems good. All right, so basically the point is Now there's a uniform way to pass things into a block So each speakers as speaker, but the other thing this allows you to do is pass in Anything you want to in any component that you could that you define So if there were properties of so you see that there's this DB slide component wrapping around all this stuff If I wanted to pass in property if I wanted to pass in Stuff that that block ought to know about DB slide I can do that so an example would be So where I say yield here if I say yield this this in this context is my component is my DB slide component so I'll save that and great I've got my machine all set up and then I had to go and do a day's work and change all the configuration So so you'll see DB slide is a component. It has a height property. So what this should allow me to do is Pass in my slide and then what I could probably hopefully So it looks a little bit like the block grams in Ruby And it's definitely influenced by that So that's a bound property that's come from the containing component and it opens up the door for passing in all sorts of useful properties with components. So if I if I can let's see You probably hopefully saw 1080 change to a thousand late there. So Hopefully nothing see surprising there Injective properties, right? So hopefully I can demonstrate this without things blowing up So in this app I have some Services which I want various pieces of the app to know about and In order to make those pieces aware of those things I need to inject them. So we're used to doing in initializers Now once in introduces a new dependency injection Syntax and it's fairly straightforward. So right now I'm injecting this keyboard service into the router and My router happens to have a mix in in it called root stepper and This is the thing that needs to know about the keyboard service So what I'd like to be able to do is just ditch Ditch that initializer all together So that goes away and instead define the keyboard using the least syntax. So ember dot inject Dot service and so what that says to ember is at runtime go find me a service with the name keyboard So it knows it's keyboard because that's the the property that you've attached it to if you wanted it to be a different service to go and find You could say, you know, whatever you wanted to hear and it would go and find it Apologies for the the broken stuff over here. That's a a bug that accidentally shipped with ember CLI All right, so My keyboard still works and now you don't have to have a separate initializer You can inject your services any way you want with something much more declarative and much more much closer to the the concept you're actually working with All right, so One ten has landed and that means the 111 beta is six weeks away from us So let's go and install that So This should just be a case We're a piece of one at the moment If I don't use up all my mobile bandwidth Has anyone tried out any of those one ten features yet? Yes Yes Yes Pan I quite like is For those who are familiar with rails you have the the form for helper Where you get the form the sort form object as a block parameter You can now do the same thing and that allows you to Sneak in extra form helpers via that that form object that you're passing in as a block around Or indeed It gives you quite a nice pattern for getting around the situation where you want to Feed a model into a form, but you don't want Edits on the input fields to directly manipulate that model just yet So you can like feed it copy and then the action of the form can send out that copy for you to then apply in the route So one so that was the 111 upgrading process just power installing the the beta Inline if This one Let's see so So that looks Like a bit of a bit of a bodge So in line if is simply the ability to use if in a non non block mode and it looks a little bit lispy So it's the exact same behavior, but now in an inline form and that All on its own doesn't appear very exciting But what it allows you to do is with the new attribute binding syntax, which we'll touch on in just a second It will allow me to do things so previously when you wanted to bind an attribute of an HTML element You had to use the bind at a helper that goes away as of 111 and I'll talk about this in the next slide But in line if means that you can do things to the effects of Much more easily say I'll just So in the context of that in the context of a bound attribute that does make a lot more sense because you absolutely couldn't use the block form there, so it's it's It's a feature with a with real tangible benefits Unlike my build tooling which Simply breaks all the time So just to demonstrate that bound attribute Oh cool. Let's spot that bit. Not cool. Cool. Not cool. Cool All right each with index which I believe Cal just mentioned so So previously we had what I had our each foo in foos form. So we will change that to Speaker and we can also get an index along for the ride, which means that we can find that into our template as well Yeah, previously getting the getting the index in an each basically meant rolling your own helper to do it Is that a way of One indexed. Yeah, I think yeah, I think probably the best thing to do would be have another helper which is like an add one Okay, cool, so let's see bound attributes So this I touched upon this a little bit already, but only on 11. Yeah It was feature flags on 110 Yeah, it didn't land with HTML bars because Matthew Bill was still working on it, but he nailed it think a Week ago, so it's in 11 for real so Yeah, this was the old binding syntax. I've kind of already demonstrated this Bind out a class and then you had to there was like another micro syntax inside of that class to get it working properly And now we can do away with all of that do away with the micro syntax and Just bind exactly like you'd expect to be able to I was it. Oh, yeah, you're right. Thank you very much So same. Oh What did I mess up? Oh probably I can't remember what I oh, yeah, of course Here I can miss off the the other half of my else I forget what oh, you know I Knew I'd make this mistake. I made this mistake in practice. All right, cool Okay This will be nearly at the end I promise so this one's quite useful Bono helper Yes, so previously if you wanted to Render different types of component depending on a key it's depending on a you know property You would basically just have to put them in a conditional and make do with it. But now We have So I've defined a component component type computer property here Which is going to decide which component I want I want to use and in 111 you can use the new component helper Which is going to render whichever component lives in that property so component side and these two things should be Exactly equivalent They are So this is actually wrong now MSI not 115 just came out it runs on IHS as I'm demonstrating but beware that's If you're using sass no sass does not yet support IHS I think it's imminent that they will and something of interest on the roadmap is that The dream for emma CLI is that it be a generic ambitious build tool so the underpinnings will become something that Angular fans can use react fans can use the ember part is going to become a plug-in and there's if you if you check out the RSCs and the roadmap for the project. That's the idea extract everything ember specific out of it break it down It's a micro libraries so that anyone can use it Ember data now This I only learned today that there are a bunch of changes to the API for ember data to make the Finding functions more explicit, so it's going from One method called find where you pass it in Various different options mean different things to find find all and find query believe This is the current version I assume a new one will ship fairly soon, but another interesting thing is that yahoo the cats and Dan Gebhardt have submitted a A big patch to the JSON API spec which simplifies things pretty drastically and It seems to be garnering good feedback, but if anyone's been using JSON API It would be really worthwhile putting your comments on that whole request Because it changes things pretty substantially, but for the simpler in every single case Okay, that's the end of my data blast Onto the talks