The Front End Revolution

great all right good morning so what makes something revolutionary for purposes of this talk I'm gonna propose the following definition something is revolutionary when it not only totally disrupts the established order but it replaces the established order with a new order and thus it changes the dynamics of everything around it the discipline of front-end development is continuing to change at a meteoric rate and in hindsight this isn't actually a big surprise for ours is the discipline that deals with the user people and how they interact in their emotions and so of course we're going to need more of us as more and more people continue to get on the internet and as our devices have taken over and things are chaotic every day we have a new tool new frameworks sometimes it's absolutely exhausting to keep up and in fact all of these new tools are transforming our lives as developers and designers they're giving us these new capabilities that we can turn into new opportunities and this is actually what's important over the last few years we've had to adopt to many many many many many new changes and it's these behavioral changes that we make to keep up with our craft that's actually revolutionary and that's because revolutions don't happen when we adopt new technologies they actually happen when we adopt new behaviors so what are these behaviors that we've actually adopted right and how do we go about understanding what a behavior is so before we get into that we're going to look at the doctor frog's behavior method which is a model for persuasive technology for developing persuasive technology and dr. Fogg leads the persuasive tech lab at Stanford University and in the 90s his big thing was that he published a paper that said you know what computers might actually be able to alter and change what we do and I was kind of mind-blowing for people so what is his model his model states that behavior is actually composed of three factors its motivation ability and a trigger and all three of these things need to be present in order for us to do anything so first we need to be sufficiently motivated and motivation is really anything that gets you to act for some you might be motivated by money for others they might be motivated by freedom and so given that motivation is so subjective it's actually not a good thing to rely just on motivation to change someone's behavior second is ability and the ability is a bit of a difficult one to explain it really has to deal with how simple or easy something is and that varies individually for a person for example if a task at hand is going to take ten minutes and you don't have ten minutes then you aren't able to perform that task even if that task is relatively easy for you it isn't so persuasive technologies really focus on lowering ability lowering that barrier to entry no matter what so that it's easy for anyone to get into it unless Lea triggers which can be squirrels for some people depending who you are they can take many forms so a trigger can be anything such as like an alarm or a notification a an article that you've read that's prompting you to do something and there are three characteristics two triggers that make them successful first we actually have to notice them second we have to associate this trigger with a target behavior and third when it actually happens we have to be sufficiently motivated to perform the behavior so it looks like this on a graph basically if this line is behavior anything that happens here will result in a successful behavior and anything that occurs in here will result in an in successful behavior so you can see that the easier something is to do with lower motivation now you're gonna capped it cap get more people but the harder it gets some more motivation you also need to require make sure that it's easy to do if something requires a high level of motivation and it's hard to do very few people are actually going to be able to do it so you keep this in mind when we start to take a look at how our tools use this persuasive technology model to get us to use them and adopt their behaviors so now we need to back up a little bit to the mid arts to take a look at how behavior how our tools utilize this model to to affect our behavior and because we're talking about front-end we don't actually have to go all the way back in time about 2005 is 2007 and there was a lot of sort of rumblings happen in web development we're coming out of the web standards movement in 2000 javascript and CSS at this point in time are really poised for some change it's kind of difficult to navigate the web so there was a bunch of new JavaScript frameworks and they were all aimed at addressing the API inconsistencies that we were experiencing as web developers and in 2006 john resonating released jQuery and it wasn't the first framework that came out we can see that they were actually a bunch of them but jQuery did three things that none of these other tools managed to do in time first had a really really simple solution to Dom manipulation second it released with really good documentation there were libraries that came out before for example of the prototype library that was adopted in rails it didn't have documentation for the first year or so that makes it really hard for anyone to jump in and figure out what to do and lastly when jQuery launched it launched with an invitation for people to participate and to contribute and by the second day someone had already released the first plug-in and this was amazing this was the first time that you could do this and John's response is to say you know what I'm gonna make this a really big thing I'm gonna ensure that we have a place for anyone to contribute their code and that it's easy for them to do it because he realized the value of what was going on so J's jQuery success is the fact that it took a very simple approach which allowed anyone to join even if you had sufficient motivation and at that time period we can say that our motivation was incredibly high it was a nightmare to be working on the web secondly good documentation making making it easy the ability lowering the ability and this invitation to participate perhaps a trigger and perhaps the other triggers were just the articles that were coming out now it's still the number one open source framework in use and there's been a lot of grumbling whether or not we should continue using jQuery I'm not going to go into that in this confidence thing in this talk I leave that up to you to decide but the really important thing is that these three design decisions paved the way for big revolution in front-end development and it led to other projects like node and react and all the amazing things that are coming out in JavaScript now which is why we have these week-long conferences all over the world so contribution has always been a major part of back-end development it's kind of a big tenant of the web right but its foray into front-end development is very very recent and in CSS since sort of the UX world this is even more recent so around the same time that jQuery is kind of picking up speed CSS on the other hand is really ready for its Renaissance let's take a look at where we were about mid odds somehow we had decided that 960 pixels was the best way to design our websites and the only way to design our websites we also had ie6 7 8 9 who knows how many other browsers and we were finally really excited for this thing called css3 that was going to help rid our HTML of a bunch of tag soup but what did that introduce a bunch of vendor prefixes because all the browser's couldn't decide how they wanted to adopt it and who had to deal with that pain we did right so it's not surprising that we wanted new things and additionally here comes the smartphone completely about to change every notion that we have a best practice and we start developing these new techniques for dealing with things like smacks and object-oriented CSS and BEM and conventions that are trying to save our life and so it's really no surprise that preprocessors arrived and much like jQuery and JavaScript there were a ton I didn't know about these but I CSS P P DT CSS a bunch of free processors because our need was was evident but there were two that really edged out and how did that happen the reason is by the same design decisions so SAS was always kind of touted as one of the more powerful ones but it had a really big contender less and less adoption and Jake in excuse me in boot shop is one of the reasons that I think it continued and once SAS picked up the CSS syntax it made it much easier for anyone to come in and to collaborate so we can see that we had the motivation but SAS was a little more difficult to use but it did edge out and last year it won the game changer award and recently there was an article published that said that a 66% a front end people are using SAS today which is huge but it took some other things well SAS was sort of answering our problems for dealing with vendor prefixes and making it easier to write CSS I feel that it wasn't until compass came along and provided a way for authoring writers ourselves to contribute and it was a little complicated we grumbled at first we had to learn Ruby and how to make ruby gems but it ultimately paid off and now it's even easier to contribute this things like libsass where you don't even have to worry about packaging up and creating ruby gems anymore as long as you build an extensible framework your sass file can be included and used anywhere and it's amazing right we now have an amazing amount of tools people are creating new things every day we're experimenting and this was this is new we couldn't do this before we were writing blog posts and trying to share tips and tricks but we couldn't share our code and aside from joining the working group there was no way to really affect change in the language and what's even more incredible is how these tools are now influencing the parent language and there's a bunch of amazing new things coming out in CSS level 4 we've got variables in CSS where did that come from that came from sass that came from pre-processors we have mix-ins we have grids we have blend modes there are so many amazing things and yes I don't necessarily have full insight into the working group so I'm sure that they are developing ideas on their own but I'm also positive that they're looking at the changes in the community to make those decisions you can also see that with recent release of epimer script six and how it took a lot of its new features from CoffeeScript why did CoffeeScript come out because we were tired of writing a lot of j/s and there was a lot of inconsistencies that CoffeeScript nicely packaged away for us so we could do things the right way and this is incredible our tools are lowering the threshold for finding new ideas and by doing this they've opened up tremendous opportunity for finding for for new things we're free to experiment we can get out there we don't have to rely on these larger institutions and this is very new this is this participatory innovation that we're talking about our tools have created a participatory culture and our traditional rules don't really matter anymore because we can move ahead of them and this is incredibly important because it's the ability for collective participation and collective action that are really the necessary ingredients for change our tools have enabled us to try radical things we're creating environments in which people can get things done and we're doing this while being encouraging and supportive and welcoming so it was really fascinating for me is when you start to look at the growth of our tools in the adoption and you can do this in Google Trends we get this really interesting distribution which tends to look like a power log and in network science this type of graph of behavior represents a small world network and small world networks our networks that are built up of many nodes that are connected to each other and they have to incredibly evolutionary advance advantages the first is that they're resistant to damage and the second is that they disseminate information really well they act both as filters and amplifiers so what's incredible is that perhaps without us even really noticing it we've designed our front-end communities for growth and resilience and so given that we are so skilled at creating such a resilient Network one that values the uniqueness of its members and the people within it and given that we can do so in such a short amount of time oonh really is a decade ten years I really believe that we have a lot to contribute back to society beyond just great websites and experiences citizens the world over are already calling for change and I believe along with many others that in order for this change to happen it's only going to come through a participatory revolution and I also predict that we're gonna see a very big change from solving technical problems to more interpersonal problems about the people and who better to take part in this than us we are successful practicing models of participatory culture it's not we may take this for granted but it's really incredible not everyone works this way not everyone has the ability to work this way and so maybe we can put the same design decisions that we've put into our tools into making cities better into improving education systems code literacy holds immense power it's more than just a job or a career change it's this ability to participate in the largest human connected network that's what the web is it has a culture it has a history it has a social structure and it's shaped by each of us so it's really up to us to decide where we want to create these opportunities and what we want to do with them and it'll vary by what we can do it can be as large as organizing this conference and bring us together to talk and share it can be as small as taking the time to mentor someone and help them write a blog post release the plug-in it doesn't matter what it is what matters most right now is that we keep creating because this is what's going to determine what comes next and there's less harm in that so please make up and while we do it just remember to continue to be inclusive and welcoming because if we do this if we will continue to innovate and given what we've just observed I really believe that our innovations will continue to be revolutionary thank you so much