 My name is Angie Webchick-Byron and I am here to tell you all about newfangledy frontend stuff that has happened since Grunge was a thing. So if you are someone who, like me, got into web development back in, like, the mid-90s and then got out of frontend development because you didn't really want to deal with Netscape Navigator versus IE and all those kinds of things and you got into PHP or, you know, Sysadmin stuff. And now you're, like, hearing a lot of troubling words from your friends, like these weird names that don't make you sense you like sass and stuff like that and want to know what that's about, that's what this talk is for. A little bit about me, my name, or I'm sorry, I said my name already, I'm a core committer for Drupal Core, so I work with Drees in the office of the CTO at Acquia and my job is to basically make the community go and make awesome things happen. And I originally got started in Drupal as a Google Summer of Code student back in 2005 and my nine-year anniversary with the community was actually yesterday, so that was when I created it. Yeah! So I'm old and decrepit, and speaking of being old, so yes, I was a web developer in 94, I got out of web development and got into back-end development in 99, so this makes me completely unqualified to give this talk, but qualified to tell you to get off my lawn. So while I'm giving this talk, as I mentioned, I got a little bit nervous, kind of got that sinking feeling, like my skills were falling out of date and there's all this new stuff that I didn't know about. And then there was one weekend where I decided to do something with Drupal 8's new REST API and I was like, you know, I'll just give my hand at making a mobile app, because I wonder what that's like, you know? And I found some technologies that we'll talk about later, but basically what I found out is like, oh, this is not that hard, like it sounds really scary, but you can actually do a lot of the same things we used to do back in the 90s and they've just evolved a little bit since then. So I was like, other people really need to know this because it's terrifying from the outside and it's actually not that bad. So what I'm going to be doing is comparing web development then versus now and defining all these newfangled terms as we go that you may hear and we'll talk about it. So travel with me, everyone, to a time in the distant past, the mid 90s, not the 1890s, but the 1990s, which by web technology might as well be the 1890s. So this is what pop culture looked like. You had Nirvana and Spice Girls duking it out over the top 10 lists. Everyone played with pogs, right? The most popular movies were like Pulp Fiction and Forrest Gump and Clinton hadn't been in peach yet. It was like a glorious time, really. It was fun. And then technology-wise, it looked like this. Like Google was essentially this thing called Gopher Protocols. You'd like search with like a text thing. It was fun. Mosaic was like the only thing that qualified as a browser and everything was like gray background, blue links and that kind of stuff. What we called BBSs are essentially like Facebook kind of, you know, it's like where you'd like get on there and you'd share files with your friends and you'd talk and stuff. And we all used what was called the Information Super Highway. Thanks, Al Gore. And then we also used this horrible thing called IRC that we used to talk to each other. Thank God we don't have to use that thing anymore because it was just terrible. And then I look like this back in the mid-90s. So that's another reason I'm glad that the 90s are over. So what I'm going to do is kind of take you through, I think, nine or 10 different aspects of web development and then talk about then versus now and those kinds of things. So when we talk about web design back then, basically every single website looked like this. Yeah. How many people's websites actually looked like this when they, yep, that was definitely mine. It just keeps going and going. Okay, I'll send you four. Okay. But then one day, wow, and this was like before, like this was back like, I was using Photoshop before they were layers, dude. It was like intense. Yeah, boof. Yeah. So like, I think it was Photoshop 3 or whatever, but at some point they introduced the slice tool. This thing was amazing, right? Because you design your really epically, awesomely designed website, right? And then you cut it up into little squares and all you do is you file, save as HTML and then you'd spend like the next 50 hours like fixing the HTML. But you know, it was like, it was epic, right? Like you could actually make designs that looked pretty cool. Nowadays, what we do is we design in the browser again, right? Like that's what we used to do when we do it again. Photoshop is passé, you don't really do that anymore. But in order to make the designs of the browser again look a lot better than they did back in our day, they used a couple of different techniques. So one that I came across was called style tiles. What this effectively is doing is almost like making like fabric swatches for your website. So you say like, here's what a heading style looks like, here's what these kinds of things look like. Rather than like getting pixel perfect mockups on every single page and what it's supposed to look like and then having to make that match in IE and stuff like that, instead what you do is you give them the idea of what the website's gonna look like and then it all comes together when the actual finished product is made. So you can get clients sign off on the smaller design pieces rather than like the whole entire thing. And then a lot of people reference something called Pattern Lab which is an example of creating like a, sort of like a style component guide. So you pick out what are the site colors of your components, how are bulleted lists gonna look, all this kind of stuff. So when people are designing the elements on the website, they just kind of copy and paste from this one type of thing. So that was pretty cool. And I just wanted to point that out. Markup then versus now. So back then these were the biggest techniques in markup at the time. Non, actually who can tell me what that is? Non-breaking space, that's right. So that was when you needed a little bit of white space but like you just like put 30 of those together and you were good to go. How about this, what's that? Oh, there's Groening, I know. This was called a Spacer GIF. So you can have a transparent image that like spanned like 40 columns or whatever to give you just exactly the pixel perfect thing that you needed. Did a lot with frames. We did a lot with tags like center and things to give you alignment. There was the blink tag, watch this. And then our good friend who can never be, hey, what's going on here? Oh, no. Oh, was it doing that? Oh, I don't see it here. Okay, awesome. So yes, I should look at the right place. Yeah, there we go. Marquis, that was the epitome of markup technique back then. So now we use this thing called HTML5. And HTML5 is kind of interesting because there was a movement for a while to do XHTML which was like Uber, like anal, like close all things and put the quotes everywhere and stuff like that. HTML5 actually almost in some ways gets us back to the HTML we were writing back then because it's actually more permissive for the types of code that you write because their main goal is to make this stuff work across all browsers equally. So they have the browser vendors involved talking about like, what do you actually need to define a doc type? And they're like, I don't know. We just look for something that says doc type in it. They're like, perfect. So that's the spec. And so they've been doing a lot of this kind of work. And so what we get out of that is we get some new HTML tags to give us more semantic structure. So things like the header, nav, article, aside. This is all stuff you'll find out of the box in Drupal 8 and it's something that you can also download in base themes in Drupal 7. HTML5 forms, this has also been added to Drupal 8. This is pretty cool because you can say define an input type equals date. And then what it'll do is in a browser that supports that element, it will give you a different input that is more date-like and then it will fall back to just numbers if you don't have that capability. So everything that they're doing in HTML5 is designed with backwards compatibility in mind. So you just get an enhanced experience if your browser supports it. And fortunately, I think all mobile browsers support it or at least all modern mobile browsers support it. So this has been a big enabler in not making mobile browsers have to click into other keyboards and stuff like that, trying to make it really fast. So this is also in Drupal 8. Multimedia support. So back then you had like your object tag to pull in your Swift file and then you had to do embed because Netscape support and embed and IE was object. I don't remember anymore because this is why I left this world. Anyway, now they have tags like video and audio and I think you still have to do that stuff as fallback but where things are going is building multimedia support directly into the HTML language itself which is pretty awesome. HTML5 also has all this other stuff so you can actually do things like you know, graphic manipulation in HTML5, geolocation, trying to figure out where people are and incorporating that into your web applications. Like it's actually getting really, really cool and you know, like tying the web back together is pretty awesome. A couple of things that are in Drupal 8 that might be worth following on is one is called Modernizer. What Modernizer lets you do is do kind of like HTML5 feature detection. So you can say, hey, if this browser supports, you know, RGBA colors then do this, otherwise do that thing and it supports it in both CSS and JavaScript. And then for browsers that don't support HTML5 there's a shiv, also called a shim which I was really confused about but apparently the only difference is one has a V and one has an M. There you go, front end code. It hasn't gotten any saner. So what that does is that like backfills or they call polyfill the old HTML5 features into less capable browsers. I also heard mention of this thing called HTML5 Boilerplate. It's sort of a suite of things about frameworks. There's a lot of framework talk that we're doing in here and what that thing does is basically get you started with like kind of just a basic, basic template that's got all the HTML5 stuff in it, a couple of external libraries to like Modernizer to help you work better. And it's just kind of a place to start rebuilding your web applications. If you are a front end developer, you don't need crap like this but people like me really need it because we have been out of it for a while and we don't know where to start. Let's talk about styling then and now. Back then, we had 256 colors to work with so we had this thing called, what's the D word? Dithering, thank you. Yes, dithering. So you had to like be very careful about using web safe colors and then there was these awesome graphics programs like Kai's Power Tools. You could like make page curls and stuff like. It was epic, let me tell you. And we wrote a lot of code like this where it was like body, background color, in every single HTML file because of course back then, we did a page-centric model and so we had the about page and the contact page and we'd have all this code everywhere but if you ever wanted to change that, like say I don't want the background color to be black anymore, now I want it to be fuchsia, you had to do that in three different places times a billion or how many pages you had so. And then for a while we used this thing called server-side includes which is kind of similar, PHP and stuff evolved around this but it was basically like just include something called header.html that has all that stuff and then do that from every page. So it improved things a little bit but the real big revolution was when CSS came out, right? Because then you could do stuff like just a styles.css where you put all of your colors and your background things and stuff, reference that from each file and then you separate your presentation from your markup which is a good thing to do. Now there's CSS3 which is just an evolution off of CSS and it has some cool things like new selectors and pseudo classes so you can almost do like regular expression parsing saying like I want links that start with this and I want to make those blue. You can do like styling disabled elements differently than enabled elements. There's a bunch of little things that have sort of evolved over time. Columns, anybody remember we're having trying to do columns in CSS? We'll talk about this later but yeah it was pretty terrible. They're trying really hard to make that a lot easier in CSS3. This thing called media queries which we actually had back then. There were like print style sheets and stuff like that but now it's sort of expanded to not only cover printing versus screen but within screen covering like what is the width of the screen? Is it in portrait or landscape orientation? These kinds of things. A lot of that gets into some of the mobile stuff that we'll talk about. You can now do things like these cute little buttons just with CSS. So you no longer need like these corner graphics gift things and like trying to get all that to fit together in a table. Like none of that. You can actually just play a little bit of CSS and they can do a bunch of things like text shadows or border radius, linear gradient all these kinds of things are just like blink code done. It's pretty cool. And the other thing that's kind of neat is you can do the oh sorry you can do CSS animations in Go. There you go. Thank you. And these different effects. So like you'll see I'm using Keynote which is like oh what a dinosaur you are because everybody uses whatever. There's like 18 of them. But yeah, you can actually do presentations with just HTML, JavaScript and CSS now and things like that. So people are writing games. People are writing all kinds of stuff and we don't really need to use Flash anymore because CSS has gotten so awesome. So let's talk about typography then and now. Back then, typography was great. It was so flexible because you could use any font that you wanted as long as it was one of these nine, right? So Arial, Arial Black, Comic Sans, MS, whatever these things. Because Microsoft put out what was called I think a web font pack or something and it ran on both Mac and Windows and so that was like that's all you needed. So that's why there was the you know that's why you see Comic Sans everywhere because that was the only non-serial font I think. No, there might have been a couple other ones. So now you can actually use any font you want. There's this thing. There's a CSS3 property called at font face and this allows you to pull in a web font and actually display it on the page. There's some licensing things there so you can't like just put any old font in there. It's got to be something that's allowed but there's a couple of tools to really help you with that. There's Google Fonts which lets you pull in. They have like a repository of open source web fonts you can pull in remotely. Or if you have a font that you own and license and blah blah all that. I'm not a lawyer. So whatever but yeah. But there's this thing called font squirrel where you can upload the font and it'll create a web font for you that you can use in this thing. So much more prettier fonts so that's pretty cool. There's even more newfangled CSS stuff. Like when I looked into all this stuff it's like it's crazy the amount of work that's been done in CSS. So now this is in Drupal 8 something called Normalize. It's a CSS file that lets basically all the browsers start from the same starting point. So you don't have some that give you a margin offset some that don't give you a margin offset it just puts everything the same. For a while there was something called reset.css that did the same thing but what reset.css did was like remove all of it and Normalize says well let's give you something that kind of makes sense and just make it the same across everything. So that seems to be where things are going. Newfangled term is a CSS preprocessor. Don't bother reading that text I'll talk about what that is. So a CSS preprocessor is essentially a thing that you write your CSS code in in sort of a programming language and then what it will do is it will compile out to CSS because CSS itself doesn't have very many fancy features. So there's sass and there's less and there's stylus. Those are kind of the main three. According to my Twitter stream, Asterisk sass is the most popular one that most people in the Drupal community seem to use but less is also up there and different frameworks use less as well. But they all basically work the same which is you can do things like variables. So instead of like every single style sheet rule having like pound zero zero zero or whatever your font colors it, you define that once in like a dollar sign thingy and then when it gets compiled it will like put it out in the right order. So this allows you to define background color, foreground color, sidebar color, whatever and then write that out and then have the CSS file just automatically put things in the right place which is pretty awesome. Other things you can do are like imports. So if you have a nice reset.css that you like you can pull that into whatever arbitrary sass style sheet you want something called mixins which is the dumbest word in the world. All it means is functions. So don't let those crazy front end people like it. But basically what it is is it's a function that takes a parameter and you're able to change different things about it. So in this case I can pass in a border radius of 10 or 20 or whatever and it will adjust all the different styles to do that. And then there's also something in sass particularly called extending and inheriting. So you can say rather than like redefining a bunch of stuff you can say all of these classes inherit from a basic message class. There's just different types errors and info and whatever and it just saves you having to repeat a lot of code and having to update a lot of code when it's done. And then compass is something that's sort of like a sass framework so it like pulls in a bunch of stuff not only sass stuff and it just makes it easier to kind of set up and use and stuff like that. I heard a lot about compass. I basically asked my Twitter followers like what do you wish you knew about and what do you use that's awesome and this came up a lot sass and compass. All right screen resolutions. Back then it was pretty easy because everyone used one of these. So you basically had three sizes. At first it was only two and then some fancy people got like big old monitors and you had to like okay fine. So you know you do 1024 by 768 now everybody has at least one of these and this is your screen resolution like landscape right? No, so what do people do about that? So back then what we did is there was like a choice between fixed layout and fluid layout. And fixed would be like hard coded pixel sizes and then what would happen if you were on a big monitor is you just get more background but the stuff in the middle would stay the same size regardless of how big the screen went. A fluid width was defined in pixels and the way the pixels would expand and contract is like from ratio size it would always look the same but then the difference in between the steps would be you know like it would get fatter and then you'd all of a sudden be like reading text like this you know because they didn't really account for it. So it was kind of a mess. Now it's still a mess but there's basically two techniques that people use and I should say kind of sequentially. So at first people were using what's called adaptive design and what adaptive design is sort of like fixed width per device. So what you do is on the server side you detect what thing they're coming at the site with and then if it's an iPad or whatever you have a completely controlled visual experience that you do for the iPad versus the you know whatever smartphone thing nexus things that people use I don't know. Responsive is basically acknowledging the fact that I have no idea what you're doing and I couldn't possibly write CSS for every single device out there so what I'm going to do is use those media queries that we talked about before to say okay if the screen gets wider than this width then start laying out the columns like this and if it gets skinnier than here then start dropping the columns down to the bottom and stuff like this and so when you see sites and you like take your browser window and you go whoop whoop whoop and then they like reflow the columns and stuff that's responsive design and that's what triple eight shifts without of the box is the default theme the admin theme there's features and views for creating responsive tables all of that stuff is in Drupal core because that seems to be where the web is going even though adaptive in theory is really nice and then like don't ever get into this conversation with front-end people because there's they'll have this whole thing about like is adaptive really that or is it just a subset of response anyway just don't just use responsive design that's that's what my yeah anyway layouts let's talk about layouts anybody ever do this like accidentally nest of frames yes right that was great so back then we had two techniques for layouts tables and frames that got everything that you needed to do now everyone uses css for this does anyone remember the site css zen garden yeah it's a pretty cool site yeah and css layouts man they were so simple because you know you're just trying to get something like this right and you're like man in the old days I'd have to write this horrible code god it was awful I had to write a table tag and a table row and there'd be columns just awful with css I can write awesome semantic code like this right and it's like left nav top off that's brilliant except you have to write 500 f-ing lines of code like this to make the friggin thing work so this is what got me out of front-end of it now people use what are called grid systems which is actually an old idea in in graphic design but they've adapted it to the web and so essentially what you do and different frameworks work different ways there's ones that do like you know put a special class on it to say it's a column 12 or something like that but you essentially tell the blocks elements on your page how many columns they should span and sometimes how many rows they should span and stuff like that it's actually a lot more organized and streamlined I heard a lot about singularity as a grid framework I had heard of ones of like 960 but like everyone's like nobody uses that crap anymore so apparently singularity is a thing what are other grid frameworks any front-enders have suggestion zen grids is good Susie I've heard of that one okay okay so so zen grids was like the first one then singularity is like zen grids plus plus all right is there anything that has like overcome singularity as the the awesome thing or is that kind of the okay so that's why I found that one so yes singularity is currently the hotness and then there's a lot of people who like said now we don't just need a grid framework and we don't just need a preprocessor and all this kind of stuff let's actually start making CSS frameworks so bootstrap is one example foundation is another one there's several of them and again if you're a hardcore front-end developer like a Morton you will reject this stuff with the haughtiness of whatever however if you're like me and you couldn't possibly write a nicely designed thing to save your soul they're actually really really handy because they automatically have nicely formatted you know like colors stuff so you don't have to think real hard about it you just like pull in whatever you need to style stuff so what you'll find is almost every open source project that you see on the internet today their website is just bootstrap with like a logo in the corner because we don't know how to do this stuff and it's just download it play with it try it out that kind of stuff mobile applications then versus now that's actually a phone from the mid 90s I found a picture which is pretty epic so back then I don't know palm pilots there wasn't a lot right and now you know there's a bunch of things that came out but basically you have iOS and Android those are pretty much the only ones it's sort of like back then there was opera what a scrappy little you know actually there were many things before opera but really only people cared about IE and Nutscape right so it's the same type of deal iOS and Android and if you want to write an iOS app or an Android app you get to choose between Objective C which is all of the awesomeness of C or Java which will make you want to shoot yourself in the face so yeah those are your options although I will say just yesterday iOS released this thing called Swift that I haven't looked I looked at a little bit but it's basically like Objective C with a little bit less syntax but it's still C you know what I mean it's like you need to be like a hardcore programmer kind of person which makes me want to go like this because I took a Java course in school and I didn't like it and I don't want to go back there again so the great thing is there's this thing called PhoneGap or the open source project behind it is called Apache Cordova and what it lets you do is write mobile apps in JavaScript, HTML, CSS the stuff you already know and just compile it out to it's like platform agnostic you can compile it out to Android or iOS or whatever you want and that is pretty cool because you know this is kind of things are going this way there's kind of this interesting tension right now because like mobile like native mobile apps versus just writing HTML5 websites that look really good in everything and it's an interesting like counterbalance because for non-technical people way easier for them to go to the app store and search for something and download a thing and then see a little icon for it so even though I would certainly love for everything to go to HTML5 and kind of open web standards a lot of stuff is nevertheless still heading in the custom app direction scripting then versus now I love this image it's a huge frig off book like this thing called JavaScript and then there's like a tiny little book sitting on top of called JavaScript the good parts that about sums up my feelings all right so here's some stuff I'm going to kind of fire hose some stuff you know but back then we did this kind of raw DOM manipulation does anybody remember writing code like this oh it's friggin awful so you'd like first of all you'd have to check all right am I on IE or am I on Netscape and then if I'm on IE then they use like document.tags or documents I don't know it was a whole friggin pain in the butt now to write this same block of code that we have here we use jQuery and we do it like that hooray right so jQuery is cool because it lets you eliminate all of that you know horrible DOM parsing stuff and just tell it what you need what property you want to need and how to change it the disadvantage of jQuery though is that it is a framework or an abstraction around JavaScript so we're in this funny place where like jQuery makes writing everything super easy so people use it a lot but then for a mobile application or like a mobile device you don't want to spend 400 hours like taking h1 and translating it down into whatever raw DOM the manipulation would be so there's actually this tension in the front end of community go back to writing raw JavaScript over jQuery whenever you can so there you go so all the skills that you learned writing raw DOM manipulation code they're still relevant today and people will think you're a bad ass performant you know front end developer if you use it so we all said this thing called dynamic html which was like this if I never really understood what the heck that was it was like yeah it was dynamic it was whoosh yeah anyway so people use jQuery for that as well there's like little jQuery UI thing that lets you download things and then there's kind of like JavaScript has gone from this little toy language like I remember like alerting things and I thought that was like the most aha look at that's cool and then I stopped using JavaScript because you know nowadays JavaScript is sort of taking the world by storm so what a lot of people are doing is using these what are called MVC JavaScript frameworks so they are throwing out all of the html that we in Drupal work so hard to write all of it they're like I don't want to deal with your crap and what they do is they use something like Drupal 8 to REST API to just get JSON raw JSON output of the data of the site and they write their own custom markup around it so we include backbone in core we're using it for that's sort of a way to centralize like the toolbar in place editing some of those like you know sort of front end features but a lot of people are using things like Angular to just write completely custom front end apps and essentially just using Drupal as a as a data store so it's sort of like what Dries was talking about in his keynote about headless Drupal we already do that in Drupal 7 today and people just throw out all of the code we worked so hard on writing and just write their own stuff there's also this whole class of what are called build tools and I had four or six people try to explain this stuff to me so here's my definition and then people can yell at me about how wrong this is my definition is it's kind of like kind of asterisk kind of like Drushmake for front end stuff okay so it's like you say I want to pull in this CSS and this JavaScript library and this and this and this and this and you run a thing and it will package it all up for you so you don't have to like manually get all that stuff together was that kind of accurate yes I'm getting thumbs up awesome and then I wanted to also talk about a couple of things that are coming soon so there's like web components is this thing which is I don't know what a shadow DOM is but it sounds awesome it's just like I think I think what it is is it's like a way to like write your own thing that is like taking over the page or I don't actually know and then also ECMAScript 6 which is like the precursor or the successor of JavaScript whatever we use now anyway and that has some new features as well yeah so those are what I researched and what I found and I'm curious to hear from people in the room like are there other things that you guys have come across recently that have either made your life awesome or you know like remind you of horrible things that used to do back then anyone otherwise this is going to be a quick talk which I'm happy to let you all go early okay so I covered every single awesome thing in front-end development yes all right so everyone can go there that's awesome yeah that's a good point so yeah one one thing that's different about front-end development today is that SAS stuff I was talking about which is you know pretty cool at everything SAS requires you to run Ruby in order to do that compilation from the from the you know dollar sign thingies to the RIS thing yep and no JS to run the grant no JS is interesting because that is JavaScript for both the server side and the front-end code so basically if you know PHP you're the new COBOL programmers great yeah I know that hits too close to home honestly yeah visual basic yes you know visual basics are it yeah yeah so so the difference between SAS and less is that less does this all in JavaScript so you don't need external tools for that kind of stuff but SAS you have to use stuff but it's interesting because a lot more front-end developers are familiar with these kind of command line tools like NPM install and stuff like that so we used to in Drupal think of front-end developers as like these poor timid little people we have to protect them from themselves so let's add 30 wrapper divs and you know a bunch of classes so that they can figure it out and it's really moving more into the direction where like front-end developers are becoming like developer developers and just in different languages and with different tool sets and stuff like that so it'll be interesting Morton did you want to talk a little bit about your theme initiative for Markup and then and I'll take some questions first of all I'm wearing my American socks today too on all of the American developers who have pissed my life off the last seven years in Drupal no the one of the new things that now and yes one of them figured out oh wait front-end developers actually complicated one of the things we have figured out is if you come into Drupal 7 today you're going to go what theme should I use and then 20 people are going to yell at you and tell you what kind of theme you're going to use and one of the reason for that is that Drupal 7 built up a way of theming that was based on hey themer we're going to protect you from the code and we're going to give you this and you're going to have some class names and do it and then a lot of us came in and rewrote the whole theme engine in all kinds of ways so we ended up instead of using our time together and building stuff we built each our own system I'm I'm one of them and I'm today not proud of it it's kind of dumb so for the last two years we have been busting hard to get Drupal 8 figuring out what Drupal 8 should do we're changing the theme system theme layer and all that twig you who you who that does not solve the basic problem we have and that is if we don't sit down as front enders I actually figure out what it is that we want to do so so the next time Andy comes in she only have to learn Ruby and Node.js and figure out how ground works and setting all that up and then she can build her theme there's a whole ton of stuff that as you can see now we're going to have in we need to figure out how we get that into Drupal 8 from the get go so when you guys who's not comfortable about doing all this front end stuff we're not just going to drop you out in the middle of the water so doing this Drupal con we are going to figure out we're taking all the theme leaders whatever we call this those of us who have been yelling too loud and they're going to sit down in the room and figure out make a plan make a strategy for it and then we really need the input on it right on it so if you meet me at some place basically at the bar and have opinions on this I had like hey this is the issue I stopped into because what we have been done differently in Drupal 8 is we got asked very early on what we wanted that was how we ended up with Trick and if you want to know how all that Drupal 8 stuff is going to work come to my session tomorrow at four o'clock where we're running a two hour talk around Drupal 8 and all the new front stuff there is and how many how many good things we have built in so if you're nervous about how Drupal 8 works from a front end perspective you will not be that if you're running a company that does Drupal front end training I'm sorry we're going to make it so easy you don't have any classes to run and that's kind of the basic point so that was just that plug-in so we're actually trying to make a strategy now for the front end trying to figure out a way to make it work so at least us front enders are agreeing on it and so we can move forward so we're actually going to act a little bit like developers and I'm not so happy about that but it kind of needs to happen so so bottom line is if you want to get involved in that initiative come talk to Morton on Friday at the sprint so that is my talk I apologize I had like 95 slides and I was like there is no way I'm going to get through that in an hour and I got through it in a half an hour it helps if you talk really fast so so I saw a hand earlier yes oh is there a micro oh there's a microphone just yell it now repeat it in the mic I don't think that was a question but it was a good statement but yeah so I think I'm going to try and repeat that but it was very long so the gist was that Jesus talk Jesus keynote this morning which if you haven't checked it out you should check it out online was it was very powerful and it painted this picture of where the web is going and where the web is largely going is you have kind of like these these companies like Google and Amazon and Facebook and whatever amalgamating all of this data and amalgamating all of these services that they can push together in order to get well depending on your perspective either really really helpful or really really creepy with your day to day life so the question was you know as a as a community of activists which is what a lot of us in the Drupal community are what can we do to fight that amalgamation and or at least like not get sucked up into it where we can create like our own shadow DOM anyway but anyway and sort of like create our own space that sort of is like the anti that where it still preserves the open web is that a fair summary yeah but it's tricky because I think you know he hit on some things that you know like and I worked with Dries on that keynote and it was funny because he had this theory going into it that's like brands aren't going to like this we'll get somebody to talk about how like oh it's horrible Google taking over kind of thing and then found out that was not true like brands maybe necessarily don't love it but they accept that hey it's the same as selling my phone into Best Buy or whatever that kind of a thing so I think what we do as web developers and like people who are also working on the future of the internet is I mean there's a number of different things one is working on privacy technology so things like Tor things like you know alternative to stuff like Twitter and some of these centralized services I think that's an area that we can be helpful with I think we can be helpful with when when Dries talked about integration it's like making Drupal better integrated with those things I think Drupal also has its power traditionally as a community building tool and I think making Drupal websites it can bring the people working against this thing together and make us function more as a team and as a group when we're doing this kind of thing I think we're in a world though where like it's not like Google is going to go away I think the best thing that we can do is create open and free alternatives to things like Google and you know I get excited about I actually do get excited about Drupal providing this kind of technology in a free and open source way so that businesses can use the power that Google has but use it for good and use it for their own ends like nonprofits being able to understand who's coming to their website and you know how to reach how to connect them with someone who needs help in another country and doing those kinds of things so I don't really know it's interesting to see how it's all going to play out I also think to Dries's point and he talks about brands wanting to protect their brand but I think it's really about identity there's people companies nonprofit organizations everybody who want to protect their identity and they don't want to be sucked into these big box stores of the web and I think everything that we do to make Drupal 8 easier to use that we make it to more power to non-developers these kinds of things I think those are all moves in the right direction to let people retain their freedom and participate in that world or not as much as they want to does that help? hey okay yes so the yeah that's a good question the question was after doing all of this research do I feel more empowered to work on the front end or do I feel even more like oh my god there's all this stuff to learn was that basically the yeah I would say I actually feel I would I'm always an optimist I feel cautiously more empowered because what I found is like I had kind of worried that things had moved so far afield from what I knew that like I would just I'd be like learning programming from the hello world again and what I found more was like all of the basics that we used in the 90s are still built on today it's not like we use a different thing than CSS now or a different thing than JavaScript we still use all the same stuff it just is more betterer and and it's cool to see like the things that directly cause pain points back then like people were like yeah that sucks let's fix it and it's actually embedded in language now a lot of time things like semantic tags for HTML things like the font face stuff like I know like there's got to be people in here like rolling their eyes and laughing but it's like I was like amazed I was like oh that's great you know because I was so frustrated with trying to put a nice looking website together back then so I think it's a little there's definitely more stuff to learn but the stuff that there is to learn is more in my wheelhouse you know things like build tools things like you know some automated testing for JavaScript things like that is all stuff I used on the PHP side so it's more like finding JavaScript equivalents of what I already know so in when I put this talk to your eyes actually feeling good because all this stuff sounded so opaque and scary to me that when I actually dug into what looked it was like oh that's just what we used to do plus dollar signs great you know what I mean or whatever this kind of thing so maybe that's because I didn't dig in enough to get scared enough but that's sort of where I ended up so yeah how about you how do you feel about that so so what David said is that you know that he kind he has a front end developer not as a back end developer he feels like the front end community is is moving further afield and that as they specialize in thing and you're talking about like the MVC framework stuff or just everything yeah mostly yeah everything yeah we're moving to a world where like where the front end code back in Drupal five and six it was like embedded in the CMS application that made a lot of sense we're moving to a world where Drupal is sort of tangential to the front end development experience and it's like it's great that there's something out there providing me data I'm never going to use that thing I'm going to build in my front end tools here so it's almost like they're becoming further apart so dang well now I'm bummed does anybody have a good like they don't even have a nice like happy question we can no I'm just kidding but yeah it's true and I think in in some ways like when Dries was talking about things that make us more useful to Google or whatever and that's stuff like you know turning headless Drupal data repository stuff like this those also make us more useful to people like you who are like I want to just use the latest greatest front end cool stuff and letting Drupal just get out of the way and let you do that and I don't I don't know that there's anything wrong with that because you know Drupal's strength has always been you know as a as a CMS that you know people could use without knowing how to code so we've still got the little entity forms for them and then for developers it's always been about getting out of your way letting you do whatever crazy thing you wanted to do and giving you the extension points for that so I actually feel like if that's where front end is going I would love Drupal to support that in any way we can so oh thanks man so Morton said he's giving me props I was so nervous to give this talk like I can't even expect it was like because I'm like there's all these words I found out if you Google any word any word you can think of and put JS at the end of it there's a goddamn framework for that I swear to God anyway but yeah what I'm kind of interested to see is I feel like I feel like doing this research in 2014 is kind of like doing CMS research in like 2002-2003 like you know so not when PHP Nuke was the only thing but back when there was like I don't know movable type and there was like you know there was like there was literally like you know and then there was like 87 forks of PHP Nuke because there is like you know post nuke and Zariah and you know Nuke Nuke Nuke Nuke I don't know but it was like all of these things and like a CMS selection process was a huge and then like nowadays really in an open source world it's basically wordpress Drupal and Jumla you don't really hear about a lot of the other ones you hear about them but they're not like the big three I feel like for most people if they use something else then like Silver Stripe or you know one of these other things it's it's sort of justifying why not Drupal or wordpress instead of that front end frameworky things as far as I can tell are nowhere near consolidated like there's a new front end framework spinning up every other week people are trading best practices back and forth so it's kind of an exciting time to see them really curious to like you know kind of I'm still not planning it in front of development right now but waiting another five years and seeing what it looks like then because then I wonder if by then there will be some consolidation and deciding that this thing is the thing to use and something else that we do Jesse Beach you're shaking your head never never okay that's cool you know they always learning new things and stuff but uh yeah yeah so anyway it's been it's been interesting though because you know it makes it very challenging as an outsider to understand what the landscape looks like because you know it's it's basically talking to a bunch of people and asking them what they use and then you know like people you know are kind of clued into stuff so it was funny because that's probably what it looks like for people coming outside to the back end community it's like what is all this crap about PHP unit and symphony and you know stuff and I'm like ah it's cool anyway yeah so I thought that was it was a it was an interesting thing to research and yeah when you knew newbies in the room did you learn something about how horrible web development was back then yeah it was pretty bad yeah yeah I'll post some on the session node so they'll be up later and and also you should evaluate my session that's what this slide says so when you evaluate my session you can hopefully download the slides later on this afternoon yes you mentioned about yeah that was a good question so earlier I said it's kind of a combative thing where I said like if you're a PHP developer it's the new cobal because Node.js is JavaScript everywhere that was that was like not a literation was the thing when you like hype hype hyperbole yes that was that you know it's not actually that bad and the Node.js community is so incredibly fragmented that it's it's really hard to find out what to use when but I think it's interesting because the idea I mean the idea goes back to like .NET right or whatever it was like learn one or Java as well it's like learn one language and then you can write it everywhere that kind of thing it's it's the same type of thing applied to front end code but a lot of people really excited about it because you know it's new it's cool it does what you need you don't have to learn like there's no mental separation between front and and back and so the idea is really interesting Drupal actually already does integrate with Node.js in a lot of ways what Node.js is really good for is things like say you're writing a chat room app if you write that just in PHP it's going to be really frustrating because every single time you post you have to go back to the server and back and back to the server and back Node.js my understanding is it sort of creates this like queue of things that's just processed constantly so you can like fire off things and let it process and come back to you so I know there's chat room apps that are using Node.js there's there's like a Node.js module that integrates with Node.js so you can write the parts of your application that makes sense to do in a quick front end language like that but then still use PHP for your data storage and other kinds of things like that so it's definitely worth checking out it's you know and it's it's it's really popular in the front end world particularly for kind of package management and stuff like that but I wouldn't I wouldn't actually get threatened as a front end developer because the tooling is not quite there yet and the maturity is not quite there yet but it's definitely something to look at if you haven't dealt with JavaScript since the only thing you can do is alert tags if that makes sense well actually I mean I use Node.js oh you do use Node.js oh awesome I was wondering yeah how it integrates quickly yeah yeah yeah there's there's modules and I'm not sure exactly what they're doing if they're um if they're pulling out like well we could look I think I have internet I think it's funny though for um for Drupal people who did not know Node.js was a thing they thought you were talking about modules slash Node slash Node.js and they were like why does everyone talking about this thing it's kind of awful but you know like and then it's like oh I get it it's something else but it's funny because I'm like yeah we had Node.js like back in 2004 like we were all on top of that so this is the project oh right we changed this whole thing around ugh I know there's an eight version that's fancy I think Bejivas is here so we should just ask him about this kind of stuff but um so it looks like what it's doing is creating an endpoint for the Node.js to talk to Drupal and like send it JSON information that it would then parse out into stuff happening on the screen that is my eight second read of the readme.txt say that again they coexist well they do coexist well yeah I mean Drupal's one of Drupal's biggest strengths is the ability to integrate with whatever so like we have like MongoDB extensions we have Node.js extensions Oracle I don't think it works but you can do it if you really want to like these kinds of things so yeah but no there's a whole there's a whole bunch of developers in the community really excited about Node.js and they do they do do integration work with it and maintain modules around and stuff so don't worry about that any other things that I can help people with yes sorry two questions for you yeah and I apologize because one of them is actually sort of a statement with what do you think at the end of it okay sure yeah so the real question the one that's actually a question is it seems like a lot of the things you talked about are ways in which front end development is becoming more like a programming language right with variables and loops and all that did you get the sense that did you get it also seems like while it's developing those concepts it's diverging from pretty standard like programming like mixing instead of function and so on did you did you get the sense that like the two were moving together like that there was like collaboration or like that front end people were sort of like cribbing from programming or that they were like inventing their own thing do you have any thoughts about yeah so his observation was like you know I talked about the fact that that it it seems like front end developments moving more into where it'll like actual development like things like you know sass with with variables and mix in functions and things like that and then the question was like do we feel like the front end development and the developer developer communities are moving more in line with each other or are they just kind of like inventing their own things separately I don't feel like I have the context to answer that question my gut feeling is it's kind of separate that there's a lot of people I see this a lot when I go to like Drupal chicks meet us or whatever there's a lot of people who consider themselves front end developers or whatever but not a real coder and so I think I think I suspect that in a lot of cases these are like the one the couple ones like the pattern lab thing that was a collaboration between a front end designer and a back end developer because the thing is actually like really crazy it like has like static html generation tools and all this other stuff but when you talk about sass and mix in this stuff I'd like I just I don't know enough about that part of the history but you know I do feel like I definitely don't feel like front end developers feel like they're growing closer to developers I feel like they're inventing their own thing that works for them and but it's still being treated as separate even though when I look at the 10,000 foot view it's like coming a lot more in line with like what I know and I'm excited about that but yeah I don't I don't feel that but I don't know Jesse or Morton do you have any insight on yeah oh funny so Morton said like from his perspective he started out as a designer which in the Drupal community can be misinterpreted to mean like database designer because he did a bop around that and three database guys showed up which is interesting or architectural design but a graphic designer is his background and so he came from the graphic design world wanted to make websites and then just sort of had was forced to teach himself these things like coding and PHP and stuff like that and I think I think that rings true for a lot of people which is one of the reasons twig is so cool which I didn't talk about actually twig is moving you away from having to be a PHP developer in order to change markup and stuff so like if you look twig oh you can't see this at all ah you couldn't see the other thing I was doing either geez that's sorry here you go yeah so I'm sorry so the thing I was showing on my screen but not on anything you could see was there's a there's a project slash no JS and that's that's where the integration code is and then there's a bunch of modules that require it in order to pull in no JS features but anyway this is twig Dries talked about this a little bit in his keynote as well so in order to theme in Drupal 7 and below asterix except for Drupal 4.6 but that's a whole thing but anyway you had to be a PHP programmer because all the template files were in PHP so you had to go up the learning curve not only of like how do I get my HTML to talk to this dynamic content generating thingy but also how do I do it in this weird language with a lot of dollar signs and semicolons what twig does is that it's an abstraction over that so you still do the PHP in a module or in a theme preprocess function or something like that but the actual template files are literally HTML plus a couple of these like special code formatting thingies similar to smarty or similar to mustache or some of these other ones that you may have heard of and the reason why I'm excited for that is it helps the next Morton who is coming from a graphic design you know I know how to make things in Dreamweaver type of deal be a lot more proficient in in doing that kind of thing without having to go up all of the learning curves in the world so that's why twig is kind of a big enabler what we're hoping this can do is help bring in a lot more designers to the Drupal community because it eliminates that barrier and it also eliminates the problem not that anyone has ever seen a site that does this but you go into like fix someone's performance on their site and you find out their node.tpl that PHP has like 400 lines of SQL in it has anybody ever had that problem? Anyway you can't do that anymore and now you have to put that in a module or something where it belongs so so yeah so that's that's twig and it's sort of trying to keep people in whatever path they want to be comfortable in so if they want to make the jump to a developer developer that's totally fine they can go into preprocess functions and start mucking around with things in there but if all they want to do is add something so it's three pixels to the right they can do it themselves so that's kind of the gist but you didn't actually answer the question which was do you feel like you know front end developer and back end developer are becoming more synonymous with one another moving towards each other or do you feel like they're in silos and not talking sorry developers in the room so yeah so morning is saying like back when he joined the project which was in or earlier in mid 2000s 2006 it was like the front enders what you know and so he got a bunch of people I was actually at this meeting in DC where it was like it was like it was like a big coming out party it was like this room and there was like five I don't know 15 16 people there and they were like oh my god you're a designer and you work with Drupal I'm a designer I didn't think there was anyone else like me out there and like you know oh you know like anyway it was really it was really cool so he was saying that he started an organization organization being a a collective a group of angry people called front end united and what they have tried to do is sort of like make advocate on behalf of designers and get their concerns known in front of developers because we don't we we oftentimes have blinders for that because we're like I don't know it's not fatal airing it's good to go you know so that's that's kind of a thing so I'm just checking the time it is two o'clock and I want to make sure people have time to pee and all the things that you do in between sessions so thank you very much everybody appreciate it