 Alright, thank you very much for braving the tube strike to come and see us tonight. This isn't really a microphone for the room It's just so I can record it for to put on the internet afterwards So the lineup for this evening looks like this We're going to ramble for a bit. Let you know what's been going on with us and with ember and then will is going to take us through ember CMI CLI Mirage Hugh is going to talk to us about spree ember and then Nikos about the incredible ember CLI test recorder Before all of that, I'm going to introduce our wonderful sponsor sapient nitro Hi Welcome to the square as some you've noticed. We're in a different venue tonight We've got another event which is being held over the next couple of days in our regular room And so we've invited on the ember meet-up into here So I hope you enjoy the space what it does mean though is that I need to introduce you to a different route out of here Just in case the the emergency alarm sound We don't have a fire alarm scheduled for tonight So if you hear the alarms go it is a real thing and we need to get out so to get out of here You basically go out the the same Doors that you came in through and the Exit is on your right-hand side through the glass doors And if you need to use the facilities It's on the left-hand side as you go out the doors as well So as as always sapient are very very honored to have ember here We're big advocates of the open source community and it's great to see you all here So thank you very much for coming as Jamie said on on the cheap strike night and also with them the Sun outside So this this shows real dedication. So thank you very much As I said before we're keen advocates of the open source community I like to build my network of of developers, you know from people like you So if you want to pass cards over to me, I'm more than happy to to grab your details so we can link in So a little bit about us. So we're a we're a global agency. We're dotted all around the world You're here in Eden house, which is our London office. We've also got another office in black Not black fries in Battersea Cool glass mill. We have some big big clients. So we look after British airways We look after our BS. We've also got M&S and we also look after other banking groups like city city bank So, thank you very much. Thank you Jamie for for coming as well on your bike And have a great night. So, thank you Okay, so now it's time for your announcement so John if you want to come up and give yours first I I Prepared it on my little screen and so the jellyfish starts Can't see the legs Okay, thanks. Um, so my name is John beer CTO of Sabnito we're an Experts as a service platform. So we just wanted to make a hiring announcement basically so we're looking to hire ember developers If you've got a rails background as well, then obviously that's benefit. It's quite a small team There's just six of us at the moment three developers and three sales people We're bootstrap start-up self-funded through mainly for revenue and so if you're interested in joining us, then please let me know after after meet-up The reason for the logo is we've got jellyfish Which is actually a little round jellyfish tank and we actually use that as our build monitor Which is pretty cool So it goes red when the build fails and stays green when when it's green So it's green most of the time, but the young and the jellyfish get angry when it goes red So yeah, if you want to come and chat to me afterwards then I'll tell you a bit more about what we're doing and and how the company's set up So thanks so much Yeah, that jellyfish is supposed to have legs Yeah, it's just not quite enough contrast. I don't reject it Um Does anyone else have any announcements jobs or otherwise come on up Hi, my name is Nadal. I'm front-end developer at property partner Which is essentially a stock exchange for the buy-to-let market means you can buy a portion of a buy-to-let property And then resell it on the secondary market trade and get dividends based on rental return We're hiring an ember front-end developer at the moment as well And so if you're interested just let me know and I'll tell you about the company bit more and Thank you very much We'll get everyone to post these to the comments from the meet-up as well just so that you don't lose track of it anyone else have any announcements Okay, so now we'll move on to ember London news. I'll start by saying that there are London Tomster stickers here and also I've got some Austin Tomsters and some other stuff up here Please come up and take stickers if nothing else for an excuse to start conversation So we're at these statistics over 700 people follow us on meet-up We've recorded and posted 54 talks online. There are some talks that I didn't manage to record but we're getting those speakers back in so we can record them properly and Of those talks, I've been played over 16,000 times on Vimeo The next meet-up in August will be on Thursday the 13th There's no project night for July because it's so nice and sunny and we reckon no one will come and I'm on holiday and So the next project night will be in August exactly a week after the meet-up We have a website ember london.com visit it to learn everything you need to learn about us and we also have a slack channel and This has become more and more lively as things go so It's nice to be able to get Conversation about ember from people in the same time zone, but also that you'd be surprised how many prolific contributors there are in this city So with that over we move on to ember news This for anyone who doesn't recognize this there was a kids TV show about computer games in the 90s called bad influence and at the end of the show They had what they called the data blast which was I think it was 30 seconds of Cheek codes basically sped up so they had to record it on a vcr and then pause and freeze frame through and of course vcrs Didn't do freeze frame very well So every single frame was kind of like shuttering and mixed with the next frame and you couldn't understand anything You recorded so this is the data blast So some examples of ember in the wild First up Apple music so that so somebody uncovered that there's some assets from Apple music That appear to be using ember and I'm not sure yet whether that means it's the UI within iTunes But I believe it is it all evidence points to that Apple definitely use ember for some of their documentation and other bits of UI work If this is the case, it's extremely exciting Also PlayStation now this is a big UI on your television and that's built with ember This is the admin UI for console, which is one of hashy corpse Suites of dev ops tools so they We've been noticing more and more lately that they use ember for any piece of web UI and that's that's also really encouraging They're really smart people if they're adopting ember. That's kudos to the project and Another so okay Ember twiddle is JS bin but Like you would like you would want to write something in ember CLI So it supports ES6 module syntax it compiles stuff as ember CLI would supports HTML buzz all the rest of it So and if you're sick of the shortcomings of JS bin wonderful as it is check out ember hyphen twiddle.com Okay, so that's ember in the wild now. We're gonna do a roundup of Where we are on the path to ember 2 so ember 13 ember 1 13 Sorry was released the day after after last month's meet-up and it's got some nice new stuff in it here Yehuda blogged on that day a summary of what the 2.0 project is all about and the the big idea is that Ember and all of the pieces that go with it are going to start to move in lockstep as far as versions are concerned So if you have version 113 November data, you know it will work with 113 of ember Likewise 2.0 2.1 on and on into the future and that goes for ember CLI as well and liquid fire and list for you and other kind of like Core libraries, I suppose you'd call them So I'm now going to hand over to Miguel to talk about some of the new stuff in ember 113 This is a conversation that happened yesterday not yesterday two days ago in Twitter one of the new things in ember 2.0 is a you can use the DOM much more closely to the usual way of using it and Stefan based this Link to a jsv where you can see you can see how to create an input with data binding Using regular the html and the action value and action measure that is much faster. I Want to know who faster and I did This is the old code the regular code. We are using our apps and this is the new way of Doing things doesn't means you cannot use the new one, but this is more verbose but closer to what the browser is actually doing and That makes this also much faster These are examples This is the code rendering 3000 inputs with the old code and the new code again old code new code. I just flip in between routes You can see that this around 50 time faster. I have a demo here. The demo is the This opens There we go. Okay. Here we are Well, you can see we have the old routes and the new routes You can know that notice that the switch To the new is pretty much instant and the switch to the old one takes a little bit But this becomes much evident when you type something here This And then you try to do the same thing here. I just instant you can notice the difference Also in the inspector itself Uh Ember rendering performance. This is exciting because with just changing the inputs you get like This is the actual time in the old style This is amazing and it's exactly the same functionality just see I mean there are almost two orders of magnitude So go back There And this is thanks to the new actions. The new actions are a cool feature number 2.0 Now the action helper can accept a Function and basically what it does is creates a new function with the current scope as the disk of the function and binds any other argument to the function and then the function becomes a Regular attribute on the component you are passing the function to so that means that you can Change functions and query the arguments. So basically here you are creating you have an action say on the controller in the context whatever and you say Create a function from the function Create an action from the function in the controller and bind hell you hello as the first argument and The name of this action is salute. Okay Then inside this component you can also do the same thing Note that this is not quote because it is a regular attribute is a bound is a binding to the to the components of and you can query the next argument and In the and you can do it again on the next and the result is your action receive everything and Here is you look you are receiving the three arguments that you have passed and that allows you Basically, this is how it works under the hoods. You have the function say and The action helper is taking this function binding the context and the argument you are passing in and creating a new function and You do this over and over again and the light the latest step. You can invoke the function and just invoke the top most function with all the way with all the binders applies apply it and And this is how you work I mean and a new addition is as you see the function is available inside the attributes of the component and Unlike regular actions you can use the return value of these functions You can pass information back and forward between the components and maybe the grandparent ancestor of the thing and It's also much faster Because it's just regular JavaScript. So the old this is another of magnitude more or less Going to the demo again. You have this thing. This is I call it the collapsible Accordion menu and basically you can Show things is like an accordion menu without the styles and A good example is I don't have the code around here, but the thing is I'm using the new actions Sorry, not in here. I here I use they have the stack same functionality. I'm basically Have you ever anyone else found a face the problem where you need to a? Rollback relationships in ember and usually we when you use rollback attributes you are only rollback in attribute, but when you want to rollback relationships, you need to basically Remove something imagine you are editing a form you are removing things But you can allow the user to actually cancel and still have everything there So basically you cannot just destroy when you click the destroy button you need to Start there and when you save then you destroy everything and the user cancelled you rollback so basically when you remove things I am And you just since and I have a few levels of nesting I I'm curing and saying this task is inside this trade and I When I click this I'm just sending to the root the try and the task I'm removing and Asteroid in an array and once I Confirm this is done for this is gone forever and if I rollback everything appears So this is a good example of hope Being able to add arguments to your function and pass these functions to kids children components Allows you to send all the information to the parents and keep a very dry Interface on your components and make it make them as reusable as possible Okay And That's Thank You Miguel So while we were talking about this in slack rich pointed out that there is some performance work going on the the never-sleeping beast that is Stefan Penner has decided to Put the other 24 hours that he has hiding in his day towards some really serious performance work so I think he's He's fine-tooth combing through the ember code base right now looking for the things that drive us crazy performance Why it's and finding them and fixing them? So that's ember core ember 2.0 I was also hit 113 so finally has become a stable library just prior to hitting 2.0 And there's some really good stuff in it. Can I get a show of hands who's used ember 113 already ember data 113? Okay, cool so Let's talk about the API changes. So previously find was this very overloaded method on the store and It used to be the nature of the arguments would decide exactly what it's going to do But now we have a very Explicit set of methods so find with just the type has become find all Find with the type and ideas become find record Find with a type and a query string equivalent has become explicitly query and find record that's very query record is querying but just with one result which we never had before the the methods which said don't make any requests just get stuff from the catch have become much more explicit to and Consistently named so now they're called rather than all peak all and rather than get by ID which I think was always private anyway peak record and The the methods which were very explicitly go and fetch stuff from the server These have changed a bit. So it used to be if you said fetch all it meant definitely make a request Now we do find all With the reload true flag and find record with the reload true flag now this this might seem like a step towards ambiguity In the face of what we've seen elsewhere But it goes hand-in-hand with a new system for how to decide when records should be reloaded So This is what we used to when there are no records in the store or when you pass reload true You call find all on the store. It's going to make a request to the API Return a promise to your app, but eventually return the records that it's loaded without reload true If you've already got a cache of some records that you're ready to display It will give those back immediately so you can render them and in the background It will make a request to your API and when that data comes back It will update the store and your UI will update accordingly And the really nice thing about this is it can all be controlled at the adapter level So on a model by model basis You can determine when things should reload in the background when things should explicitly reload in the foreground on a collection basis or a single record basis and so Some examples of this I've seen so the simplest is just for should reload all you can just say do I have any yet? if so true otherwise, sorry if if not return true saying go make an API request if not return false saying You don't need to make one. We'll do it in the background and you might say things like you might have a an expiry attribute either in metadata or otherwise on a model so you can know Do I need to completely reload this thing or can I reload it in the background? Do I even need to reload it in the background at all? So you can have very fine-grained control over when ember data is going to fetch the new stuff for you embassy li 2.0 on Tuesday it hit 113 and On Wednesday, they snuck out a patch release But basically the API for embassy li is now stable. I think it's been put through its paces pretty thoroughly So now it also rolls on to 2.0 and next month They'll tag that release and really the only major migration in ember CLI is that Brock file JS is now to be renamed ember CLI build JS and this isn't This isn't an attempt to Disassociate from broccoli. It's just that really by and large It's it really is more ember speed ember CLI specific than is broccoli specific that file in your project route and Broccoli was always intended to be a Library put to work by bigger libraries. So this this feels natural and fitting So with that quick catch up of what's going on in ember will if you want to come up and plug in And bear with us for a sec while we get everything set up