DrupalCon Prague 2013

Automatizando los tests del frontend

Chris Ruppel  · 


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

alright cool it's about quarter till now thanks for coming this is a front end ops session so we're going to be talking about a lot of cool stuff that you can do to automate your front-end workflow and also automate other pieces of front-end development

and really this is what i like to call how to automate the process of breaking things because that's mostly what i did in order to get to this point to be able to share all this with you so my name is chris rupal one consonant short of our favorite content

management framework i'm a front-end developer at four kitchens in austin texas you can hit me on all these things are you PL is a my username everywhere that i can make it that and then like I said we're good for kitchens where development shop in

Austin maybe you've heard of us if not we have done a lot of stuff around server performance in the past namely with a press flow making triple six Bible for like integrating with the larger web stack like my sequel replication varnish and that kind of

stuff I have nothing to do with that so don't ask me any questions about any of that because I don't know also we're hiring so if you feel like working at a pretty awesome company with a lot of cool people hit the hit the link in the slides here

these slides are already posted on my session page so you can go there and check it out via the schedule if you want and follow along if not that's cool too there's lots of codes because code examples and I'll get to that in a second so I've

done a couple contributions to Drupal here I don't have many of them listed just because I had to pick a few the big one that I really focus on is the modernizer drupal module that in turn led me to be able to make some small contributions to modernize

her itself I've got a pretty cool jekyll schedule thing that's out there like okay sorry Jekyll I should have mentioned that and then I've done some work on Drupal 8 way back in the day when it was more like drupal 7 than anything else also making

it little mobile friendly and oh well I've taken a hiatus I am interested in all the Drupal 8 javascript stuff if you were just in here for nods presentation before there's some cool things that are happening so that's me so this is in the DevOps

track and it's it's fairly simple compared to a lot of stuff that's going on because front end is uh although we're like starting to gain these tools in the front end world no this is like new so you know if you are already familiar with like

a lot of DevOps and like you're the person that handles all that in your organization then I'm probably not gonna be like blowing your mind with the fact that you can automate some of these things but hopefully I'll show you be able to show you

a few tools that you can leverage using a system that you've already got set up having said that I'm not going to cover the specifics of like setting up Jenkins or anything like that because that's kind of like out of the scope of this and this

is there's other material where you can go and learn that type of thing so we're going to talk about other things that we can integrate with continuous integration and those types of systems but like I said front end is a maturing as a trade and it

really has matured a lot in the last few years and so we're starting to feel a lot of pain points that people already felt in other communities long ago so like you know when you break a PHP script it just like gives you nothing or it gives you an ex debug

stack or something like that and so you either get your HTML to the page or you don't and then yes there are other nuances involved in like errors in PHP and you can have lots of weird things but you know if you really break something you're either

breaking it or it's not broken and then on the front end because of the way that browsers evolved in the big because of the way that they have to support all these different scenarios there's lots of weird subtle things that can happen to your browser

into a mobile phone into other devices like that that are very very subtle and unnoticeable until they've become like this bigger problem and so a lot of this stuff are things that we just you know rely on someone to like fixing the not break but we never

had any way of making sure that someone isn't doing that and error checking all these things like CSS you know minor padding changes our margin changes changes to jas files that break things like you know just adding or removing a semicolon can delete

an entire aggregates worth of usefulness aggregates changing one not necessary and that kind of thing introducing like performance regressions when when you don't really need to be doing that so and then also like I said there's tools that are evolving

too and we need to use these tools because although it's not all about the tools tools can really help you to provide a better experience to users in a way because if they take out a lot of automatic they provide automation and take a lot of tedium away

from your work then you're able to use proper testing protocols and that kind of stuff a little more thoroughly because you've got a tool doing this for you instead of having to like run this automatically so like I said there's workflow tools

in PHP there's more than I could possibly name and so we need the same community of tools built around the front end trade because that's how it can be taken more it can be taken to the next level and be more effective so there's lots of things

now that you can do in front end that are just a few commands away on your command line that we're just not even existing two or three years ago things like dependency management automated testing and review tools and like even holding people accountable

for the changes that they make to the codebase so um this is not my term and this is this is a term that's been around it's kind of been on the tip of everyone's tongue and it's still like a spot that hasn't been explicitly filled in most

organizations or really mo almost all there's a guy Alex sect Sexton that wrote an article for smashing magazine describing the ideal front end ops engineer and so he goes through the whole spiel of what he considers to be fronting operations and there's

a lot there if you go read this article it is linked in these slides it's kind of buried in the in the green there but you can go read it and he talks about everything from you know deployment and asset management to making sure that rendering times are

staying the same and your browser stack and all that kind of stuff so there's a lot lot lot there however we are at a Drupal conference and most people for the most part are just building websites instead of building like a product or a huge like complex

application and so all the examples i'm going to show you today are kind of like starter examples that should get you thinking about this kind of stuff and you can apply it and just build on this and keep it going because these are useful for basically

all websites that are being built and it can be taken to so many degrees past what i'm going to show you that it blows my mind when i see what's going on in the front end world so the main takeaway today is that we want to change how we work we don't

want to change like and and be married to a particular tool this stuff you know changes really fast but what we do want to do is change how we're working was there a question back there or okay sorry yeah i'm i'm a fan of just like stopping if

anyone wants to stop me and ask a question at the end of a section i'll try and put some space in there so we don't have to wait till the end so feel free if you want to just come up to one of those mics so in order to deliver the best fastest site

possible we do have to you know think about our development process and updated a little my my huge perf crush right now is a ilya grigoriev google he's on the make the web fast team at the part of the chrome team basically and all he does his performance

and he's basically always saying you know this isn't like a checklist that you look at at the end of your project this is something that has to be continuous as you develop this you cannot put it at the end and expect to be successful and and then

fear which i'm not even going to try and pronounce his real name has a great quote here that says when you're trying to fix a website or make it better don't take measures without measuring them that's a bit of an english word play but still

don't do something without testing what you're doing don't like radically train change a strategy that you're approaching to you know like we've got a lot of things figured out in Drupal like aggregation for example but you know if you're

going to change something or like change the way you're loading your assets make sure you've got good data that says that this is useful for your target audience so a lot of these things are going to help you do that yes right we all agree because

this question always comes up very often yes all this stuff is on github already the links are on the session page check it out you can take the code from the slides it's all freely available use it for commercial purposes or whatever I don't care

and also actually this is a slight lie because I was like I don't want to get caught by the Wi-Fi gremlins but I basically about 15 minutes ago took a fresh clone of these slides and basically installed all the NPM modules that i'm going to show you

[ ... ]

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