 My name is Ilya, and I want to tell you a story. Our team, like I think any team in the world, have an intention to ship great products faster and have fun eventually. And recently we have a meeting when we tried to find all the bottlenecks that we have, like that are not allowing us to meet this intention. And we found that the main pain point for us was our backbone views, or marionette views. So we had a technical decision to switch from backbone to react, and not because of virtual DOM, because you know only lazy framework nowadays doesn't have any kind of virtual DOM, but because of modularity, top-down data flow, and all other functional paradigms that react force you to think about. So we thought, OK, we need to move views, and this is really easy. You just need to override the render method and call react, and it will handle your DOM manipulations and everything. But what to do with data? Because we have a lot of handcrafted backbone collections that we do not want to throw away and like to re-implement. So we wanted to keep using them. We went to internets to try to find what's the current state of art of syncing react components with backbone, and found this. So this is like a mixing that listens to any events on your collection and forces react to render. But this is a lot of boilerplate, too hard to make the data flat, because you need to work with backbone models inside your react components, and this is pain. And also just think about changes detection. Its react will do a lot of renders without any DOM changes, and this is not efficient. So we thought, OK, if we step away and we will think about what we will use if we don't have any legacy, what we will use like if we are going to re-implement everything from scratch, and we found Redux. Redux is a fairly new state manager for your application. This keeps the state out of your app in a totally different tree, and this tree is immutable. And the only way to change this tree is to call reducers on them and which are pure functions, and this is hot topic now as you can spot. And everything is hot reloadable, testable, serializable, coolable, anything able that you want to expect. And we think, OK, we want to use Redux and we want to use Backbone, how we can make them live together because we can finally separate our backend data from our UI data. So we thought that the architecture will look like this. Backbone view will call react and pass some callbacks that eventually any UI interaction will call it. Then action creator will call Backbone model, generate action, pass it to reducer. Reducer will change the store. Store will change the react, and it will change the DOM. What? Yeah, it's not understandable at all, but it's also have some other problems. Like, what about validations, server responses that's not good enough, and other parts of application can also change the state of it, and we need to somehow to sync. So we thought, if it will be only possible, so we can continue to change our Backbone models and collections, and the changes will be in Redux store automatically. And of course, as you know, I will not be presenting here if this will not, like, develop something. So you can, and I'm going to install it now, with lab from Redbooth team, and do it out of the way. And small demo. So of course, the best way to show something is to do MVC. And it's really working application. And of course, it's React, as you can see, what enough it could be. And the cool way, as I told you about Redux, is like PR functions, everything is reloadable, so you can run developer tools for React, for Redux, and see all the actions that I did. And you can do time traveling in any way that you want. And it just works. And this is really Backbone. We still live in this old legacy world. So just to show it, oops. This is true. Just imagine that someone from another part of the application calls changing your collection. And we have it here with a new event. And we can also use it now. So future and legacy together. Thank you. OK, hello, everyone. My name's Edward Andrews-Hudson. I'm Edward Andrews on Twitter. I work in the UK for Sky TV as a web developer. I'm not talking loud enough, apparently. Can you hear me now? So, wow. And I want to talk to you very briefly about coding with young people. This is something that I do quite a lot. And I'd like to try and encourage you all to do it. So briefly, what do I do? I work with two UK organizations. The first one's Code Club. This is where I go to a local school with nine to 11-year-olds. I go every week for an hour, and we write some HTML. We've started writing some JavaScript. It's really good fun for me. And the second one that I've been involved with is this thing called Festival of Code, which is a big, week-long event, a hackathon-type thing for 11-to-12-year-olds. Where they get together into teams for a week, they have an idea, and they see if they can develop it. So, why do I do this? So, it's to help young people appreciate the fundamental beauty of programming and understand the technology around them, and to give back to the community. Hmm. No, really. Why do I do this? Mainly because it's really good fun. Young people learn so quickly, they progress so well, you learn loads from them. If you're going to try and teach or mentor, then you really have to know what you're talking about, and quite often they'll ask you a question which seems really sensible and easy to them, but it's actually really complex, and it sends you away thinking, and you have to sort of maybe come back to them a week or two later with a nice, easy answer. It also reminds you that there's a whole load of resources out there for people to learn from. Internet, as we know, is a marvellous thing, and you can learn whatever you want if you know how to look. So, one of the things I feel I teach more than actual programming skills is the ability to use the internet to learn stuff. As I said, young people are really inspiring. They have so many wild ideas. Quite often, as you age, you sort of close down your mind a little bit and you reject ideas because they seem a bit silly. Young people don't have that at all, but they're really exciting and really inspiring. So, if you found that interesting and you'd like to do something like that at home, what can you say to convince your boss? So, there's little or no expense. It's maybe if you're sort of doing something regular, it might be an hour or two of your time a week. You could tell him it improves your interpersonal skills because you're having to talk to people who aren't total geeks like the rest of us. Your boss might find it's good PR. Maybe he'll get in the local newspaper on the telly or whatever. And maybe they'll find future employees or interns. But that's only if you want to persuade your boss. I would say these are the most important things, really. It's fun. The young people are inspirational and you can learn quite a lot yourself. So, if what I've said sounds at all interesting, I'd just like you to try and get involved. As I said, I'm Edward Andrews. Edward Andrews Hodgson, now I'm married. My Twitter's at Edward Andrews. I've recently moved to Sky and I'm trying to encourage Sky to get involved in more of this sort of thing. So, if anything that I've said sounds sensible to you, it'd be really useful to me if you could tweet mentioning my name saying, oh, that sounds brilliant. We should all get involved in working with young people. Thank you very much. Cool. Hi, my name's Son Ash. You might recognize me because I did the Lightning Talks at the Ruby conference, but I'm doing a different one now. So, hi. I am a developer evangelist for Twilio and I just want to show you something I think is really cool and quite new for us, which is video, because this is the JavaScript side of things. Twilio is normally a communications API in which we allow you to make or receive phone calls or send or receive text messages, or send or receive video. This is a demo, and demos are terrible, so let's write some code. This is the actual demo. It's blank right now, so let's jump over here and build it, because I think if you've dealt with any WebRTC, which is what this is based on, then you'll know it's a horrible thing to deal with and I want to make it nicer and show you how to do that. So, I'm just going to build up a quick HTML page here with a couple of divs on it, one for me and one for you. I can't type, of course. It's really weird when there's two microphones in your eyes. And then we're just going to add a quick JavaScript to the page just Twilio.js. This is the framework that's going to make all this happen for us and they need one more script tag in which to do stuff in. So, inside that script tag, we need to do a couple of things. We're going to create an endpoint. The endpoint is your address within the Twilio system and for that to work in the front end, we need an access token and I'm going to go get that access token right now from our... Oops, there we go. This is from our testing tools for this and that's just the application. It's a horrible long string. Normally, you would generate those on the server. So, we're going to make that endpoint and give it the access token and then that endpoint can listen for events. An invitation, for example. And when you get an invitation, you can do... Hello? Yeah. When you get that invitation, you can do something with it. In this case, because I'm nice, I'm just going to accept the invitation and accept returns of promise which gives you a conversation back in the callback. And with that conversation, we get our local media, which is pretty cool, and I'm going to attach that to that div, which is me. Lovely. And that conversation will also probably get some participants as well, so we can listen to people joining participant connected. So, when a participant connects, you'll also get a callback with that participant, one of the hardest variables to spell. And that participant will come with their media, which you can attach to if you, for example, and if I click on the mouse. To you. And the only thing we have left to do with this is actually make that endpoint listen for those incoming connections. Cool. So, that's that side of things. I'm just going to build the other side. You didn't need to see me type out all the HTML again, so that's all here with an access token ready to go. And this is the other side where that endpoint that I've created is going to create a conversation. And I called my other endpoint to fill earlier. So, I'm just going to create that conversation to me. That's all I needed to do there. The breast is basically the same. So, that, let's reload that. That page is now waiting for invitations. This page is the one that's going to make the invitation, so it should ask me to share my media. And on this side, I'll get the invitation on the other side, which I'll share me. And there we go. That is you and me WebRTC HTML video, peer-to-peer connection using Twilio video. If you're interested, come and see me out at the Twilio table. Thank you very much. Let's see. Hi, my name is Tim. And I work for a company called Hyper in Oslo, Norway. And I'm going to be talking about a hobby project of mine called Wozer, which is World of Warcraft in the browser. And one of the first questions that I get whenever I talk to people about this, they basically are, why in the world would you want to do that? Which is a very good question. And we've had a couple of talks outlining that it's very good to sort of do crazy stuff and be curious. And that's basically one of those things. How do AAA games, how do they work? Would it even run in a browser? How would you even go with that? So if we take a step back and look at the official PC and Mac clients, at least at the time, at the expansion that we're talking about, which is Wrath of the Lich King, which is like 2007-08, it had 17 gigs of data that you had to load, or at least have on your system. Okay, yeah, sure. Let's see. And it will be irresponsible in a browser. So one of the things that Wozer at least does is it fires up this little pipeline server, which is in Node, and it has a copy of the client accessible. So the browser client can basically fetch these resources on demand, so it will reach into the game archives and fetch out textures and models and stuff, and the browser can use that. And then for the network connectivity, the normal client would basically just connect over TCP to a game server and connect. We can't do that in JavaScript, so one of these solutions there would be to use a proxy. So the browser client speaks WebSocket, and the game server isn't the wiser, really. It just does what it normally does. So one of the things that I want to talk about is reverse engineering. There are a lot of really clever people on the internet that have sort of figured out how Blizzard's protocols and file formats, how they work, but sometimes you need to get sort of your hands dirty, and you might have to look at a file that looks something like this. This is a model file. The file is called Tent, and it contains 3D points in space and textures and that kind of stuff for a tent. Usually when you're looking into this kind of stuff, your face at the end of the day will look something like this. I would have really liked to show the entirety of this working. Unfortunately, only two parts work. One is the visualization, so actually fetching a city or some sort of other model and rendering it. The other thing that works somewhat is game server interaction, so you can log in, list your characters, and see stuff happening in the console. Let's see if this works. It's going to be interesting. Where is my cursor? Let's see. I'll try and make this full screen. So this is basically the client on the left-hand side, and if I now log in here, you'll see that it's sending out a bunch of packets, and it connected to realms, which in World of Warcraft are worlds. Blizzard scales up horizontally, and you can have multiple worlds. If we connect to this one, you can see that I got my character here called Kazoom. I only have one. If I now click on Join World, we have this beautiful penguin here, which is a bit irrelevant, but just see away from that. You can see that there's a bunch of packets on the edges, the server sent learn dance moves for some reason. You get a lot of info. Monster movement is around me right now, but I can't really visualize any of that. This is the networking bit, and one other bit that I would like to show is... Let's see if I can... I'm just going to change the code of things a bit to actually render up the dwarven capital of Ironforge. Let's see where's my mouse. If I now read with this, and I just go directly to the game, just skip over all the other stuff. Basically, this is basically doing none of the stuff that Rob this morning talked about. There's no performance optimizations. This is using web workers, but it doesn't really work very well. So if we zoom out, you can basically see that it's loading up basically the entire capital in blocks. So it is doing the chunk thing that Neil talked about. So Blizzard has sort of cut up every single model in tinier pieces, and they're getting loaded up. So we still have our penguin down here. No animations either. I'm very sorry, Courtney. Basically, we could just use our penguin. He's just going to be cruising. So basically, as you can see, there's plenty of stuff missing. There's no lighting. There's no animations, obviously. There's no lava. But I forget if it would be cool to show, regardless. Yeah. So that was it. Thank you very much. Okay, I'm Johannes. That's my face. I don't know what I'm doing with my hands, but people have been speculating. I also work for Hyper, like Tim, with a bunch of awesome people, and I want to talk to you about prank driven development. And so prank driven development is a way to learn new things if you're a baby. And also, if you want to learn and you have good ideas for things to actually make. Which is for me a lot, because I have really... I don't have good ideas. Anyway, so one thing I wanted to learn was about Githooks and how they work. Because you can do a lot of really useful stuff with Githooks. And of course, I did none of those things. So instead, I made this thing. And all the same, it's actually probably the most useful prank I have ever made. Because we had this problem with Githooks team, and he kept forgetting to push his stuff to the server when he went down for the day. And we would have this merge conflicts when he came back, and it was just super annoying. So anyway, I figured, we're going to make him remember, and you'll see why this sort of works. We don't have this problem anymore. So I'm going to try a live demo and see how that works. Okay, cool. So this would be his repo. He's just plunking away, no trouble. And I would sneak over, and this might take a while on this Wi-Fi, I guess. Anyway, it's downloading a song, and then I could pretend nothing is happening right now, and just going to go like, yeah, standing over here, not doing anything bad at all. Hopefully, our network is slightly faster. And then it's going to apply the thing. And now I'll just do this. And then when he comes back, he's like, okay, just going to do my stuff, touch a file, and then I'm going to make my commit. Oh, nothing bad here. I can't even, he can't stop this, and every second it's going to junk the volume back up to 10. So if he tries, it's just going to keep playing. And every time he does this, he couldn't figure it out, and it wasn't being helpful. So basically, he would just plug in his headphones and then just kind of put them down and then keep doing his work. And this went on for hours, and I was having so much fun. Anyway, now he always pushes stuff. So it's, you know, somewhat useful, I guess. The next thing I want to show you, if I can just get the thing up again, here we go. Another thing I want to learn about, rather, is browser extensions. And they're pretty simple, as probably all of you guys know, but I didn't. And so some of the guys I worked with had this pretty cool idea for like a campaign for an organization we work with because let's make a browser plug-in that has like a speedometer on the side so when you scroll, it's going to tell you how fast you're going. And then they could put like obstacles in the way, like, you know, cute old ladies, grumpy old men, and you have to, you know, slow down so you don't run them over, or, you know, your website would just stop or something like that. And I thought, yeah, that's a cool idea. And they asked me, you know, is that even possible? Can we do that? But of course, I didn't. So instead, I made this thing. And I don't know if you can see this, but basically what this does, it's a plug-in that replaces any instance of he, she, or it with the name of my friend and colleague, Giontaria. And that's the guy right there. And so I would, you know, obviously when he went for lunch, the same old story, I'd go over installers and machines, because I don't test my software, I make my coworkers test my software. Because, you know, you can browse a lot of things and you're not going to see he, she, or, you know, I'm just going to dance over it. But sometimes, you know, you're going to get some pretty interesting results. And so I have some samples. So you would see, you know, he starts seeing stuff like this, or like this. And he has no idea, you know, the hell, yeah. So now I know how to make browser extensions and also, thanks to this guy, this guy, you can do this with your friends, because now you can change out the name. And that's it. Thanks.