JSConf 2014

Estudio comparativo de los frameworks Ember, Angular, React, Polymer y Backbone

Ryan Florence  · 


PDF (pincha para descargar)


Código de la presentación

Puedes acceder al código fuente utilizado en esta presentación en el siguiente enlace:



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

ambulance emeriti I was talking to Jen yesterday Jen Schiffer said well what I really want to know is polymer or parallax have you ever picked a framework or library or stat and got this a couple years ago some co-workers and I went to a place called Del Taco

I don't know if you have those outside of Utah but we have del tacos and he ordered a burger with just it was really hard to get the order out and he said well I just want like ketchup and a pickle on it I don't like the cheese and all that kind of

stuff he opens it up you know it gets as a ketchup in a pickle I went back and got the burger but uh sometimes when we compare all of these libraries or frameworks or toolkits or whatever name they want to give themselves we sometimes think that they're

equivalent to each other or more similar than maybe we realized that they are or aren't so if you boil down browser development I think you've got these five tasks involved and I hope that this is a pretty unbiased list of you're building something

in the browser here's what you have to consider so you've got to interact with data stores maybe it's like a JSON API maybe it's just something to local storage or maybe it's some over WebSockets but you've got some data store somewhere

that you deal with you want to render that data to the UI and keep it up to date and you need to respond to user interaction to go and change things and you need to deal with routing and URLs so that we don't continue to break the web like most of us have

done for the last few years and we need to do project stuff where do the files go what do we name them do use underscores dashes camelcase what if you're on unix and guys on Mac and now your capitalization is wrong but it works on your computer but not

there's that kind of stuff and also the build so I framed this whole talk around these five tasks and then addressed what each of the ambulatory bone libraries are concerned about not necessarily what they are the best at or whose API is better for the

task but just how concerned is the library with one of these tasks so here's my graph no surprise amber is very concerned about everything I took out a few columns like your clothes your opinion on MongoDB things like that so you can see ember is very

concerned about everything angular is concerned to some degree with all of these acceptor project stuff react in polymer just right up the middle and then a backbone has probably the strangest looking graph on there and also for all these comparisons my favorite

UI that I build is a master-detail UI you think about any application that has any significance in your life and it's going to have some sort of master detail so that's where you've got two lists on the left and then some items on the right so

let's look at what we've got here so here is the app that I built in all five of these libraries so on the Left we have a list and as we click through the list it changes the person on the right I get an active link here I can refresh this and it should

still work I can come to Matt and I should be able to click back and that should all work I edit Matt Matthew save it and it should update here update here and it's actually going off to a server side API so those were those changes in that edit should

be reflected when i refresh here as well so those are the that's the the baseline for how I'm comparing all of these things for the code samples and the rest of it now but on master detail think about your UI you probably have this even if it's

just like the global navigator at least on the left go inside there there's another list and just one little piece of your app is changing at a time while all the wrapper stuff on the outside is not so let's look at backbone so I I ranked at 0 to 4

and how concerned it is not how good it is at it but how concerned it is with the problem so data backbone gave a to rendering nothing user action routing in project so here is backbones own definition of what it is backbone gives structured to web applications

by providing models with key value binding and custom events collections with the rich API for a numeral function enumerable functions use with declarative event handling and connects it all to your existing API over restful Jason interface so not a whole

lot of like tag learn there but just very here's what I give you I sent out a questionnaire to the creators of all these libraries and this was my response from Jeremy I was gonna have a slide for each question and but anyway Jeremy I don't want to

like be talking bad about Jeremy Jeremy had a huge influence on probably all of us and a lot of us are still using underscore CoffeeScript 2012 was like the year of Jeremy right and he did a lot of great things for all of us so data how does it handle data

it's got backbone model it's probably the most interesting part of the library it works great with a lot of rest ish API is right out of the box but when it doesn't it's super easy to just back out and change some things and you got pub/sub

to connect those models to your view rendering and then you have decide to have collections and all of this stuff gets cached so when you request some records it's going to stay in that collection and then we ask for one of those items back from that collection

you get the same object that the whole collection has which makes updating things a little bit easier rendering doesn't do anything backbone view prototype render is a no op so in order to get anything on the page at all and backbone you've got to

[ ... ]

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