[JSConfUS 2013] Tom Occhino and Jordan Walke: JS Apps at Facebook

I'm Tom mochi No thank you Chris first of all I'm going to talk a bit about how we do JavaScript application development at Facebook we're going to do something a little different jordan is actually also going to present he's going to do some of the technical stuff I'm going to talk about the fluffy I'll get it out of the way quick first of all we asked ourselves this question many many times how should we structure JavaScript applications and more specifically JavaScript applications that run in a web browser we're using node and doing all that fun stuff too but I'm more interested in the user interface side of things so that's what we're going to talk about today there are a lot of JavaScript frameworks that aim to answer this question these frameworks have allowed us to move the web forward as a real application platform if Peter Higgins is the room I want to call out that dojos up here because dojo did it first as he would say or dojo already did that but the consensus is basically that an MVC style architecture is best and it's not just MVC right it's mvvm or as angular calls it Model View whatever I really like that one I actually really like angular in the the declarative data binding I think that's kind of the holy grail in terms of api's all of these architectures and frameworks have one thing in common though and that's models so typically models in these frameworks implement observable objects with an events API developers use bi-directional data binding to bind their views to their models as your models change or views can be updated and as your views change they can update the models which then propagates out to other views excuse me so this observable model pattern encourages mutation though and mutation is complex so a few years ago starting with our chat rewrite we tried to start structuring our application a little bit differently we wanted to minimize the amount of mutation that developers had to deal with mutation is a necessary evil you have to deal with it but we want to minimize the amount of mutation that developers have to code themselves let me show you what I mean by that here's the structure for a simple application in this diagram you'll notice that all updates go through a single flow so all updates including user input they go through a single channel this is one directional data binding those updates eventually reach the views in the simplest way that we have found conceptually to structure and render our views is to just try and avoid mutation altogether so what I mean by that is anytime any of your data changes just blow away your view completely and rerender it from scratch now I know what you're thinking that's not going to work right the Dom can be slow you know browsers are going to be it's going to be prohibitively expensive to try and do this to try and just reenter HTML everything every time anything changes especially in a real-time app or something that's really interactive so you know conceptually this is what we're going for though this is what we want we want to build something that gives us the conceptual simplicity of re rendering from scratch on every single event um but you know without the overhead because that's primitively expensive so about 18 months to 2 years ago and missing the exact date we started working on a javascript library that helps us do that and we call it react so that was all the fluffy stuff and I'm going to let Jordan come up and talk about some of the more technical details of this all right so like tom was saying one of the things that we strive for when we were building our component framework is that we want to minimize the amount of developer facing mutations that the developers exposed to and so react takes a different approach in a few ways the first is that it's highly declarative and so that doesn't that means that not just your initial rendering but also a lot of your updates are implemented via some kind of a declaration that's a non mutated description of what your UI should be ok so we don't have observable data binding inside of react we don't ship with it I imagine you could actually use it with react but a lot of the things that you might reach to observe observable data binding for in order to implement react provides a different way to do that and declaration is the way that we do that so along with react we are shipping an embeddable XML syntax and we're calling that JSX so this is similar to a lot of the work and language proposals that might have happened in the past but we're unique a few ways and I'll let you take a look at what that looks like first okay so here we have react used with JSX and so we are creating a message variable and we're assigning it to a react div instance and it has an invested interest is are not exactly what you're used to they're not Dom nodes so there's special reactives and I'll get to why that's important at the bottom there we render it so one thing that makes JSX unique is that it's a very lightweight transform all we do is transform these tags into function invocations so it's not quite as nice looking but you can see it even preserves the line the line number so if you pass this to your linter it'll catch like tags that are out of scope your link messages will appear in the right line and everything's low tooling is the key here but JSX is also optional if you want to build with react so if you like this you can write that but I think you guys would agree that this is a lot better so react is more than just about Dom nodes and Dom components but react is primarily a way for you to abstract reusable code and high to implementation details of your application UI so the primary focus of react is allowing you to build custom components so the way that you use a custom component is a lot like the way that you would use a div or a span we can use the XML syntax JSX to instantiate it so we have XML attributes text and a non-action callback provided here and these become the properties of your view instance or of your react component instance so you probably want to check out how we implement or define this action button a couple things just to note is that we make one call to react up create class and then we also supply a render function so what this does this creates a class to model your component and it will extend or it will mix in all the base functionality of the react of the react base so react is not an object oriented for Geist framework though we use a little bit of inheritance just because that lends itself naturally to what JavaScript is good at but other than that the core paradigm here is an object-oriented so I thought I would call that out so you can supply other methods here and they get mixed into your prototype and so the moment you define the action button you can actually reference it it becomes in scope and your linter won't complain if action button wasn't in scope you know your linter would say you know this is not defined so it's a very JavaScript centric language this JSX and so render has one purpose and that is just is to describe your view at any point in time so that doesn't mean just the initial render but at any point in time so let's go through what that might look like over a series of updates ok so we're starting out with a shell here we have an outer button and an inner span so we want to do something interesting with the properties that were given we want to be able to interpret them into a user experience so what we do is we take the property text and route it down into the inner span and the way you do that is you can refer to these XML attributes that are passed in via this dot props so you can see they're in the center where we're routing the book flight text into the inner span but these XML attributes don't just have to be strings because we're in JavaScript and JSX and wrap is JavaScript focused so we have a function that we're being supplied here in the on action callback and we're routing that to the buttons on click so in action buttons on action is a Dom buttons on click in this case and so it helps to view at least initially react component as a transform from these properties into a user experience and you can just kind of imagine these being routed to their proper locations but react is more than just a routing tool you can do any kind of transform that you or you can do any JavaScript expression that you want inside of these interpolation braces so that means that we can uppercase the text and so anytime the text changes this will always be uppercase so like I mentioned earlier render isn't just your initial isn't just your initial rendering but it's actually your rendering over points in time so as your properties change as your properties change the render output change changes and then react satisfies your render function it'll make sure that the user experiences render exactly as you've described at any point in time and so what react will do is it will find the minimal set of Dom mutations needed to make that happen so let's say that you're you're let's say that your texts have changed so react will find that the only thing that needs to change is that inner innermost spans text content so I'll explain a little bit more about how that works but but the key here is that you can react these previously abstracted components we already saw the action button and that was a simple and stateless component but you know you'll eventually want to build something more complex something more like an application it will have its own internal state so let's do that so this is a simplest stateful component that you could imagine it's the counter has an increment and decrement button and you'll see that we're actually reusing our action button that we created in the last example so we have two action buttons one that increments one that decrements so this is new if you want to build an application and you don't just want simple stateless views you want to be able to define some kind of a state machine you want your component to be able to assume the role of a state machine in some way and so state machines need an initial State so good initial state is a special function that react allows you to implement in order for you to define what your initial state is so in this case we're setting the count member of our state to be equal to the initial count property that was passed in and the example there passes for so we're going to initialize our state to be 4 so this is where it gets really interesting the same way that we could refer to props in our render function and assume that they're always up to date because react ensures that we can also refer to state inside of our render function and assume that they're always up to date so anytime your properties or your state changes render will render will remain satisfied by the react system so the the content of that h 3 there will always show the states count and you can put any expression there again you can put a ternary that decides what to render their special messaging depending on like certain counts okay so to make these state changes actually happen we bind the add to count method to our action buttons on action and so when we increment one we're going to add to count passing in 1 because we bound it there in the callback and so what we do is we set state which is like a state transition if our components are state machine then set state is how you perform state transitions on the state machine what we do is we set the next count to be equal to the current count plus the Delta alright so how does this work so there's two main passes here or there's two main stages to the react component life lifecycle there's the initial rendering and so what we do for the sake of flexibility is we compute a giant markup string and so react will traverse your entire component hierarchy tree and we'll create a markup string that injects into wherever you render it now there's a second phase to that initial to that initial stage there and that is that we instantiate all the backing objects and attach all the event handlers what's interesting here is that these two things can occur in two different places on your system two different computers anywhere in the world so you could you could in theory render the markup on a server and then attach all the event handlers and instantiate all the backing views on the client to completely separate machines we could talk a lot more about that too but the second primary phase of a components lifecycle is when these changes in data happen so we need to make the UI fresh and that's what reconciliation is is this updating new year it's making sure that your UI is updated anytime any of your data sources change and so how this works is that it recursively compares subsequent invocations of render and it takes the outputs of those and it creates a the smallest if possible to make sure that your UI is is up to date so if only one little Dom node changes or if only one class name or one style attribute on on a Dom node that's possibly 50 levels deep in your view hierarchy changes will will serialize these diff commands basically over this logical bridge to this other part of the system that will apply to that smallest mutation and so again just to illustrate that in more depth here if this text changes from book flight to book hotel only that span the only dom command that will ever execute is to make sure that that spans inter text has changed we won't even read from the dom actually okay so anybody that's giving a presentation at a conference is going to show you the most contrived examples and so react is no different but there's also an escape hatch or several escape hatches that you can that you can tap into in the react system so some of the things you're going to want to do is you're going to want to integrate with your existing frameworks or your existing code and so we allow plenty of ways to let you to let you do that and and another more interesting escape hatch that we have is a way for you to be able to help guide this process along so react is finding this diff the smallest possible set of Don changes that need to be applied and that can take some time so what we allow is we allow you to prune out a lot of the search space and help react and help guide react along to find these small as to come these smallest ifs and so those are completely optional you can you can put them in your code or you can take them out and the same application runs just faster or slower so it's tree it's a it's treating this optimization step as a complete a completely separate part of development it's not core you don't start with the optimizations but you you identify the bottlenecks and apply them where necessary okay so I'm going to kick it back to Tomo and he's going to tell a little bit about the history of react in the future thanks Jordan yeah so the interesting thing about that escape hatch is that's actually pretty important to being able to iterate on your product over time so another hook that you get is basically at any point you can say just give me a Dom node and let me write JavaScript so one of the examples that we had up here was and we just trimmed it for content but like you can basically say okay I have this other plugin from some other framework that does like Auto growing text areas or that does like an autocomplete ER and you can basically wire those things up via that escape hatch really easily and this is actually why this framework was able to be successful at Facebook we didn't have to convert everything we could use it kind of piecemeal but yeah I mean this started a long time ago this started probably eighteen months ago somewhere between 18 months and two years ago and you know at this point we're using this all over Facebook calm if you've ever commented on anything on Facebook or liked anything if you've ever talked and chat or integrated or used your buddy list and or even use your notifications there's a bunch of different places where we've been using this for a really long time and it's been working out really really well for us so about a year ago when Instagram joined Facebook we had this this is the first time that this ever happened to us we had somebody else who wasn't on Facebook's infrastructure that wanted to use Facebook's infrastructure and you know we've presented a bunch of stuff at J's conf in the past and you know historically our you know excuses kind of been you know it's pretty tough to divorce things from our infrastructure but Instagram joined us and they really wanted to use this and they sort of acted like a forcing function for us Rebecca made a great comment about writing your code as if it's open-source so what we started to do is we just went through all of react and all of the build steps and all of those tool and all the tooling behind it and we built it or you know refactored it and rebuilt it such that it was able to be open sourced so that Instagram could use it on Instagram calm in fact Instagram calm was their first project that they wanted to take on after they joined Facebook and in a matter of a week or two they built all of Instagram comm profiles on this system which was amazing for us we were really excited about that they basically again they as a forcing function for us to kind of get our house in order and you know this you know divorce are our infrastructure from this library and some other libraries so you know all of Instagram comm is unreacted ow and you know it gave us practice with somewhat of an external client so the logical next step for all the people that have been working on this is you know you know we want to open-source this and actually incidentally we did that about a half-hour ago so ha if you check out Facebook thank you so again you know I want to be really humble here this is just something that we're using it's something that works really well for us we're really interested to get any feedback we can you know definitely check out the link you know we're really open to feedback there's a Google Group there's an IRC chat room there's you know all sorts of like on github there's a you know issues and stuff there so you know that's react and you know thank you you

Channel: JSConf

Views: 25,769

Keywords:

Id: GW0rj4sNH2w

Length: 18min 54sec (1134 seconds)

Published: Mon Aug 05 2013

Reddit Comments

[u/swyx]

was doing some research and came across this talk. this is the launch of React and it absolutely bombed :) i bet many here haven't seen it, i think ive only seen it once like 2 years ago. the terrible feedback made jordan give up conference speaking apparently. today Tom runs the React Org and Jordan makes Reason.