BackboneConf 2013

Diseño web responsive y Backbone

Kristofer Joseph  · 

Presentación

HTML (pincha para descargar)

Vídeo

Transcripción

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

today also i wish i would have posted my slides earlier so i can show you how hilarious 20 days ago through most of the stuff that i'm going to talk about like discoveries have actually been talked about already jeremy actually put up three code examples

that look almost identical to what i have on my slide that's pretty awesome so i might be on the right track i don't know Billy reflow I'm gonna tell story I'm going to tell the story of trading this next generation app for Adobe from the beginnings

to what we have today and at the very end I'm going to wrap it up with a demo of the application along the way I'll show you things that we've learned tips and tricks and hopefully they'll be interesting so who's this bozo yeah um adobe

house that flash thing working out right like what does it do but you know about HTML the web isn't this a backbone conference yeah so we we have an entire team of bi platform team at Adobe that's dedicated to web and we've been working on a lot

of things as adding to WebKit created open source project brackets reflows just one of these things that we've been working on so what is this replay you speak of well let's start with the problem so problem that we have was I went and gave a talk

on multi screen design and this is what you saw a lot was you know you had a website you wanted to get it all these different screen sizes and there really wasn't a way to see what the website was going to look like at design time so what people were doing

was this you would get you know I would get I was the developer on the design team so they would give me four five six comps showing what the website looked like at different sizes and I had to kind of sit back and imagine all these different steps you know

what it would do but it resize how things flow or not most of the time don't get pretty close but there was really no way for me to know exactly what they were trying to accomplish and yeah there is this is what I'd be looking at all day to be a bunch

of PSD's multiple so imagine someone goes oh yeah we need to move the button up three pixels so they go in and up move the button up three pixels on all the different Photoshop files then I go in and try and figure out what that meant to my actual final

website it was a really terrible workflow so basically what we're trying to get to is we wanted to get trade a tool that could help design an express responsive intent so they could show the developer or themselves even exactly what they wanted the website

to do as it scaled from the different screens so how did you do it with backbone of course how did we make a desktop application the next generation of desktop application for Adobe we did it with backbone it was weird I had this conversation with the edge

enemy team because they were much farther along than we were and I said well what are you doing it with an O HTML okay so you're just you're prototyping in HTML yes in prototyping HTML okay cool so what are going to actually do it when you finally

do the final thing it's like probably HTML okay well we'll see how that works out okay and so then I demoed the prototype and the first question out of his mouth Oh how'd you do it 888 same story same exact answer and they said okay cool because

we we tried in the actually couldn't figure out how to get the performance that we needed in the the field right what not and I really give a lot of the credit to backbone and so the truth is reiterated reiterated a whole lot we did this prototype was

a web web page in a little shell fluid you guys heard of it this little fluid as a app wrapper that you can put websites in and it looks like a desktop app and we did one week sprints so we would talk about what we wanted to try to accomplish we go and do

test for validations we research a bunch of websites and then we go work on it for a week and then come back and whatever we had at the end of the week we've evaluated aside needed to pivot one way or the other there was no way I could think of to get

that fast of a turnaround with the features that we were putting in without doing it in red technology I really couldn't come up with another way to do it so the question they came up after that was well so you use backbone why would use a framework at

all aren't you supposed to be this JavaScript whiz kid like can't you just write it all yourself and the answer was sure sure I could write my own framework from the ground up that's possible yeah and I even started to try and I got done with models

he's like oh I need a model that when you set something on it in admits an event so I got that going alright cool I got that and I probably I probably want to render this model and a template so okay well I got templates and I got to Chloe no we're

going with this I got to clear since i was like i right well might as well just use backbone which is good because then we're actually living in the same space or feeling the same pain as other web developers we actually understand this face a lot better

which i think is a really huge benefit for adobe but the final straw the thing that won everyone over was onboarding because every time you bring on a new person they look at your code best-documented the interests explain a tune and they're like what

are you doing you're like writing code suckas so it was way easier for us to point someone at the backbone documentation and sat overflow and not have to have that our long conversation about what idiots we work for not doing mvvm versus MVC versus whatever

you want to do I refer to this is the pink wheel syndrome I think a lot of people suffer from it it's like no no I'm not reinventing the wheel I'm just making a pink one it's nice well sure I guess that's fine but it doesn't make it

better because you made it it really doesn't it actually makes it worse because I feel something battle-tested something that's out in the community is something that people are actually pounding on I heard this really great term for its called used

in anger something's been used in anger it's going to be much better than something that you dreamed up prototype like you mean it this I think was the huge determining factor week i wrote the prototype i wrote the first lines of code on the prototype

and those first lines of code are still in the get history of the final product right so the only way that's if you're able to do this if you prototype like you mean it you actually write code like your writing final shippable delivery code which means

you're right the test you know I have I have the accusation of writing the most over architected prototype ever created it was like madam won't take that um so I wrote test I tested every single part of it but this test driven from day one I you know

researched what I needed and I was really pragmatic about I didn't just add a bunch of stuff I and kept making things until I felt incredible paint and then we refactored right so we actually treated like real code worked all the way up to a point where

we couldn't expand anymore we couldn't scale and then refactor that so we had a new level to base it off of we started with they talked about it and think Brian talked about it where we started out with that name space module system rent and it slowly

evolved because we started seeing people cheating where they're you know making an instance and then using the instance in the web page app and then having circular dependencies and then you actually have the load in the files there a border dependent

[ ... ]

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