MountainWest JavaScript 2014

Programación funcional para interfaces de usuario con JavaScript

Pete Hunt  · 

Transcripción

Extracto de la transcripción automática del vídeo realizada por YouTube.

hey everybody I'm Pete so who's excited for some big o-notation in the morning alright alright so we're gonna get to that but before we we do I'm just gonna say I'm I'm Pete I I work at Facebook on the Instagram team and I'm I'm

a contributor to a library called react which you may have heard is the one that puts the angle brackets and your JavaScript but I'm not going to really talk too much about react and why it why it's so awesome because that doesn't that's not

the interesting part what I want to talk about is the ideas behind react and react is the reference reference implementation of those ideas so this isn't a tutorial and we're going to focus on ideas not implementations so I'm gonna talk about some

of the ideas behind react some of the ideas behind other systems how they're how they're different kind of what the different trade-offs are and there are different trade-offs between them and hopefully you can take some of the ideas and bring them

to your favorite system or maybe you think that react is cool and you contribute to it but let's talk about what makes user interfaces difficult to build so has anybody here built a user interface before all right okay okay I figured was it really easy

yeah testing it was super easy maintaining quality was probably a joke right it just kind of always worked he said sarcastically but you get this a lot it just doesn't feel right so you know even if you use all the test-driven development that you that

you can throw at it you still have to have a human look at this and be like you know this doesn't look right or this doesn't feel right or when I click this button then I click this button then I click this button it breaks so there's a lot of

things that come into this they are human verified but you eyes are also deceptively complex we have a bunch of designers who focus exclusively on making UI seem simple but underlying that simplicity is a lot of complexity there's a lot of state there

and the tools that we have today aren't there's some pointing over there I don't know but there's a lot of you know your traditional unit testing for example it helps in you eyes but it doesn't really you know solve a lot of the problems

that it does in the backend static analysis tools to they are helpful but they don't really kind of they don't prevent you from or they don't replace the human in the loop but at the end of the day you eyes have a lot of complexity the good news

is were programmers and our job is to organize this complexity Dykstra said the art of programming is the art of organizing complexity of mastering multitude and avoiding its bastard chaos as effectively as possible now isn't everybody just amped up right

now to go build some you eyes come on I like to focus on being predictable and another word for being predictable is to be reliable so it's really hard to build you eyes I would just prefer if they broke the same way every time and if you know the same

like series of interactions that a user does if I do it on my workstation in my development environment I want it to have the same behavior so let's talk about how we we make you eyes a little more reliable data binding is what we do today does anybody

here use data binding before okay cool so Dykstra is a really smart guy and I think he came up with data binding back in the 70s and because he said we should do our utmost to shorten the conceptual gap between the static program and the dynamic process to

make the correspondence between the program and the process is trivial as possible what does this even mean data money makes the UI which is a dynamic process look like a static program relative to this other dynamic process which is your your kind of business

logic and your your fundamental interactions the TLDR here is that it syncs some state in one place with the state of your UI everybody by that who uses data binding seem seems reasonable so the way I look at data binding is that it's a polyfill for reactive

JavaScript in the Dom so if we want to sync state between different parts of your program one of those solutions that is something called reactive programming which is basically pressing your constraints and then the data is always guaranteed to be consistent

where you expect it to be now unfortunately JavaScript isn't actually reactive so we have to build an abstraction on top of it and because this is definitely a non-trivial abstraction every data binding technique that we have including the virtual Dom

which is the one that react implements is leaky let's talk about simplicity so we had a data binding system at Facebook a couple of years ago called bolt and we used the traditional kind of observable data binding approach and we found that was very difficult

for us to understand what was happening specifically on our ads products so there are maybe two people at the company that if they got hit by a bus no one would understand which order the events would fire in and couldn't keep the UI consistent so we wanted

to find a solution that was simpler and easier for people to understand what was going to happen that is something that was more predictable Dykstra man he just has so many great quotes simplicity is prerequisite for reliability so if we want to make this

this reliable user interface we need to focus on simplicity now simplicity is one of these loaded terms that everybody throws around and it feels very subjective what's simple than me maybe it doesn't seem simple to you or vice versa but there's

actually an objective way to look at it and it's the the one that the definition of simplicity I'm gonna be using throughout the rest of the talk which is marked by the lack of interleaving so rich hippy rich Hickey gives a great talk called simple

made easy he's the guy who invented closure and he focuses on a couple aspects of simplicity versus easy and simplicity is marked by the lack of interleaving and what's important about this is that when you want to go and solve a problem when you're

programming you need to basically page in all this information into your brain and the less stuff you have to hold in your brain the easier it is to solve a problem so if we try to just purge all of the interleaved concepts in a given piece of code and and

[ ... ]

Nota: se han omitido las otras 3.144 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.