JSConf 2014

Desarrollando aplicaciones JavaScript isomórficas

Spike Brehm  · 




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

thanks for the introduction all right so I'm spike I like like he said I work at Airbnb based out of San Francisco I've been there for three years writing JavaScript of Ruby and I just wanna say I'm super stoked to be here really proud this is

such a great event the best tech event I've ever been to and just really happy to be part of it so let's get started we're gonna talk about isomorphic JavaScript and so probably if I were you the first thing I'd be thinking is wTF is isomorphic

JavaScript what is this big fancy sounding word well it's simple really the way I see it it's just JavaScript code that can be shared between different environments so I'm mostly interested in the client in the server I'm a web engineer so

sharing code between the web browser and something like nodejs but as we've seen the last few days there's a million different JavaScript environments these days JavaScript runtimes so you can imagine also something like narwhal sharing code with Narwhal

because I've heard of Narwhal it's the new Java eight JavaScript runtime it's a successor to rhino just to note there's not actually an official Marvel logo so I thought that was appropriate also native platforms so Android iOS these can run

JavaScript really well these days and so you can imagine we need to share code between your web app or your server and native platforms but also things like spark and tehsil these are we've heard about these last few days little devices that can run JavaScript

why can't we share a piece of code with those two and you want to get really crazy and futuristic you can share code with your cars so I don't know if anyone's heard at the qmk specification I learned about this a couple months ago there's

actually the the automotive industry is coming up with a spec to use web technologies to build displays in cars so I'd like your driving directions your radio air-conditioning all that so but really today we're just going to focus on client-server

so a really high-level kind of overview of how I imagine this works is you've got some code that runs in the client side you've got some code that runs in your back-end and there's some layer that's shared between the client and server so there's

certain things that would only exist in the client side make certain you know user interactions logging whatever and your back-end could be node but it could be Ruby or Python or you know peach whoever the idea is it's just a persistence layer in an API

and then there's this shared layer in between which can be running both sides and this could be views so templates or components or view logic whatever it could be application logic so models or whatever arbitrary logic and it could be routes for example

but by the way that timer hasn't started so I'm just gonna keep going forever so let's talk about briefly the etymology give the term isomorphic JavaScript so just to be really authentic here's the dictionary definition of isomorphic corresponding

or similar in form and relations right that makes sense so if we look at the latin forms to be further pedantic ISO means same and morph means form so same form so code that can share a form between these different environments but really we've got to

give credit to Charlie Robbins for popularizing this is the first time I ever heard of isomorphic JavaScript was in his blog post scaling isomorphic JavaScript code back in 2011 so charlie is index zero on Twitter he's one of the founders of new Jitsu

and is he's got a great blog post kind of describing the different MVC versus mvvm versus MVP patterns and how it could apply to isomorphic code but when I when I first started talking about isomorphic JavaScript I released a blog post last year and on

Hacker News most people were saying you're using it wrong like isomorphic comes from mathematics or it's a chemistry term or it's this or that and they're saying really what you mean is monomorphic or actually hetero morphic is more appropriate

for what you're describing or homomorphic is more correct or polymorphic and I'm gonna say I don't like whatever it's a word you can refer all questions to Charlie Robbins there's some more playful trolling as well I don't know if you

know Dee Shaw if he might be in the audience today but uh he he likes to make fun of me whenever I use that term he calls it a five-dollar word and every time I say it he finds me five dollars in virtual currency and so by the end of today I'm gonna own

him a couple thousand dollars so just as an introduction let's let's look at some apps that are using this approach today and then we'll dive into how you can build isomorphic apps so a great example is Flickr I don't know if you've seen

that Flickr redesign recently after they were bought by Yahoo but this is their photo page so this is like you search for silly cat and you get this this list page and then you click on one of one of these and it's rear-ended in the client side right it's

like a single page app client side app whatever rear Enders but the cool part is if you were to refresh either this page or the previous page it would all come rendered from the server so each page can be rendered fully on the server or can be rendered in

[ ... ]

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