 Good afternoon. Welcome. My name is, well, we'll get to that in a second. Welcome to Streamline front-end development with pattern lab and twig. We have the slides and it'll also be on the last slide. So we'll start off with the introduction. Who am I? It's actually who are we? I originally did this session in New Orleans with my colleague Chaz Chumlee who unfortunately could not hop across the pond. So but a little about us. We both work for forum one which is based in Alexandria, Virginia. We work largely with non-profits and NGOs. Basically our motto is if the company does good in the world, the agency does good in the world then we want to work with them. I'm a senior front-end developer and Chaz is a technical architect and triple evangelist and we both have kind of fun, interesting, not quite hobbies but extracurriculars. He's a DJ and I sing opera. Who is at the pre-note? Who got your butts in the pre-note? Yeah, thank you for showing up. That was fun. And I also am a student of Kung Fu. And I've been doing Drupal since about 2009 and web development in general since 1998. I've done everything from logos to database schemas and worked with some really big clients. Oxfam is a project I did recently. We did a facelift on their internet while it was live. Kind of like open-heart surgery. So a little more about forum one. We're a full-service digital agency that crafts solutions for the world's most influential organizations. Here's a smattering of our clients and let's just get to the heart of the matter of the agenda. So we're going to talk about the gist of what are we talking about with this streamlined front-end development? What tools are we using? How are we going to put the tools together? What's our recipe? I'm going to give you a demo. It's very simple but it's a proof of concept and then we'll open the floor to questions and I imagine there might be a few. So never bolt your door with a boiled carrot. This is an Irish proverb and not exactly on topic but nonetheless solid advice. So let's give you a little history. So back at DrupalCon in LA a few years ago I had a question. If Drupal 8 used twig templates and the new pattern lab used twig templates could they be the same twig templates? For those of you who have used pattern lab before you probably know that the original version used mustache templates and there's been this version been available for about a year, year and a half now that it also uses twig. Now they're not it's not quite the same how it's put together in pattern lab versus how Drupal 8 uses them but there are some similarities and there are ways to using a pattern lab twig starter kit for a theme that you can begin to parallel the two and create mappings so that Adams in pattern lab we'll get to component-based design and atomic design if you're not with me here but Adams mapped to fields molecules to view modes organisms to views oh excuse me and so on. So what are the ramifications of this approach? Well first front-enders we can take full control of the markup who has worked so far in Drupal 8 with the all right so that you know that you're using twig we don't have to deal with display suite or views or panelize or clean markup to really get control of the markup you can do it all in the templates whether or not you choose it with that wire you put in configuration that is a whole other issue which we will not be dealing with today. What's also great about pattern lab is that it can be used as a version that the client can see a version of the website that the client can see really before and they can see and improve you can demonstrate responsiveness and this can happen all before development actually even begins. Later on we'll give you a little brief demo of pattern lab in action in that way. Who here has used pattern lab? All right so that's good a good chunk of you. So in theory we can build a site out in pattern lab theoretically before development has even started and then you can install your theme in D8 and then presto change-o the site's already themed so that's the gist it's fun right? So it's not a delay to stop and sharpen the side and apparently side icons are very difficult to come by so we have a wrench so let's take a look at the tools we're going to be using. Many of you have used any and all of these we have twig we have Drupal 8 we have pattern lab so let's go back so has everyone in the room touched Drupal 8 so far? Yeah and therefore and how many of you are front-enders let's get to actually feel front-enders back-enders site builders project managers full stack I do everything including take out the garbage yes all right so and then um pattern lab maybe those of you who have used pattern lab is like this is the smallest small screw so I'm probably being incredibly redundant here but twig fast secure flexible templating engine from sencio labs the people who brought a symphony Drupal 8 which we as we know adopted twig as it's a templating language to more clearly separate presentation and content layers and pattern lab which is defined as a custom static site generator that constructs an interface by stitching atoms molecules and organisms together to form templates and pages what we love about it is uh in addition to other things I listed before is that it's a philosophy parallel several core tenants of object-oriented programming uh don't repeat yourself and keep it simple stupid those are OOP DRY and KISS so since pattern lab is the least well-known we're going to go okay this is going to be fun if I can figure out how to pattern lab can you all see this so this is the pattern lab which we did for forum one.com which is in Drupal 8 and we launched the earlier this year I'm going to give you a rundown of what we have here so this is the all page this is what it defaults to and we have I'm just going to scroll for a little bit and then I'm going to show you some of the more fun things in pattern lab um we have color palette fonts headings this is how you can go ahead it's it kind of at this point looks just like a style guide block quote but going further down you can get dates you can do image tiles image formats and then start to put those together into article byline you can do teasers you can do like literally every element of your website can be pattern lab and then put together and I'm going to show you that works so over here we're looking at all base uh you can like I was talking about team image this is what the team image is not there that's fun there we go there's an image but that's not as that's not interesting just like intro a little bit of text also not interesting but when you put atoms together and you can look at what's a sample you can start to put view modes together right that's the event hero you have an event teaser we got we'll call them postcards that's not showing up for some reason this is book this is all in pattern this is all been themed and now we can go just to give you some context this is the actual form one website and we go for example to events and you can look at the event teaser let's go back to the event teaser aside from the fact that you don't have the margin over here that's exactly what it looked like this was done first before there was any Drupal install before there was any data this got done and one of you can do all sorts of fun things we can I really can't see this small don't get old people it's annotated keep your shortcuts page that's not what I want to code code there it is so down here we now if you can see that low this is actually the markup that's the markup that was created and this shouldn't say that because this was this was actually done in the version no the with the mustache this was actually done before we started using the one in any case what's also fun about pattern lab is you can test responsiveness let's go back actually to page to pick a page you can actually play around make sure everything works well and responsively this can all happen outside of Drupal right questions about pattern lab yes sir no this is this is pattern lab.io where it lives it's free it's a basically a templating engine that you can set up to mimic the markup of a Drupal site or any site really to help practice component-based design I will demonstrate I'll show you how what you work with the templates when I do my demo for the streamlined part later okay there's another question back here yes sir yes I will I will show you we get to that yeah all right let's see we're sorry sorry I should have rehearsed this part so many of you and myself have used pattern lab and let's say Drupal 7 where you parallel in Drupal but without twig but the catch is that anytime you get a design change any change you make in pattern lab or in Drupal has to be done in both right and this is fine it's just you're doing everything twice in addition it's harder to keep track of greater chance of error in Drupal 7 if you're making this kind of a change if you were making this kind of a change you were doing the change in either display suite the markup in Drupal you're changing in display suite or panelizer or any number of places and it's really hard to keep track you're practically practically playing front and developer and site builder at the same time not impossible but it can get more complicated but if you think about what if you think about having twig in common between pattern lab and Drupal that would be uh kind of amazing that would be um kind of delicious which is why it brings us to the recipe who here is uh enjoying the Irish food Irish stew like my favorite go-to meal that and Guinness really good stuff all right so it could fire makes a speedy cook so what if I told you that pattern lab and Drupal can in fact share templates that you could theme it once and be done not repeat yourself keep it simple that you can own all the markup you don't have to negotiate uh markup with your developers how many of you ever had to like sit down with your developer and hash out the markup you wanted in a view mode versus what they were able to give you you guys are really only just a few of you it I've had some stubborn developers you're lucky so or we'll we'll paraphrase Morpheus over here you take the blue pill in the story ends you wake up in your bed and believe whatever you want to believe or you take the red pill and stay at Drupal con and I show you how deep the twiggy hole goes so these are the ingredients that this is what we're working with today we have a pattern lab integrated Drupal 8 theme out of the box there's this gentleman named Alexi Peebles who we owe a great debt to most of the work this session is inspired by his work and indebted to his work form one is also we have our own theme Gesso which we're working on updating into this method it's not quite ready yet other things you need to be comfortable using npm and composer Bauer used to be involved these are all packaged into dependency managers in the the Shaila theme uses gulp as the task runner at form one and Gesso we use grunt lots of battles have been fought over the two they both do the basically the same thing they they run JavaScript tasks in order or call on each other and so on etc they can compile sass build out build out templates clear the Drupal cache etc and the piece of magic here also from Alexi is this data transform plugin that the gist of what it does is this so we're used to in twig we have the dot notation now it doesn't matter whether it was an object or an array content dot field name dot length or however down the chain you want to go right well in pattern lab there's also a similar setup using JSON per one JSON file per twig file such that you can also inject content into your into your pattern lab files to have certain content show up and not necessarily hard-coded all in the template but what this data transform plugin allows for is it allows the pattern lab variables to mimic the twig pattern lab twig variables map or a mirror of the Drupal twig variables so it's the exact same variable names one pulling in Drupal from PHP into the template the other pulling from pattern lab and JSON into the twig template so they can be the same twig template and so this is the special sauce and it's like get us but not as delicious so again thanks to Alexi we really this this next generation of streamlined front of development is really really thanks to him that's his blog and you should visit it so now it's tea time and another Irish proverb life is like a cup of tea it's all in how you make it so now we'll take a look at what is possible this is exciting here is a pattern lab of a very simple homepage this is a site nav this is a pattern for a teaser view for speaker with you can simply see here the speaker and I have an image in another div with an h4 and the company name it is super basic because like I said before this is just a proof of concept and if uh oops I need to switch themes so we're gonna make bar tick our default there out of the box this is Drupal with I have speakers with speaker name company name and a picture so this is my instance here running on a vm uh to keep things simpler so streamlined is it bigger here let's see if I can but you want bigger over here as well working is this legible now not quite no I know I'm trying to figure out how to make that bigger as well but I'm not sure I can I'm gonna I describe it as I go so this is the public folder public themes Shaila dist is the folder from the starter kit uh this is basically where uh pattern lab is living the rest of the theme is normal templates and your normal theme files over here I've got a patterns organisms node I created a new folder called node dash dash speaker dash dash teaser and there's a little style that goes with it this is this is the the new template this is what's different than the default article teaser or default teaser template I've already made it different but this is in please look here I don't know if you'll be able to see this this is in themes Shaila dist patterns o2 dash organisms nodes this is in pattern lab this is a pattern lab template yeah here's the JSON which I'm telling you what classes to have node title for the title this is just for the pattern lab side you won't see this on the Drupal side in this and one this uh we're extending node speaker teaser dot hml dot twig that's how pattern lab and Drupal get the same the same thing so back over here right let's say you get a request from the client they want to change the speaker name which is currently an h4 let's say they want to make it an h3 so we're going to go over here I can show you the gulp file in a little bit but all it's doing is it's compiling sass it's really small isn't it basically it compiled sass did a pl generate now we're going to go back over here you say what about Drupal it's slow I know go to the Drupal version and here you actually won't see any change because this is Bartek and not Shaila but no change because this is actually still an h2 like it was in the other kind of template right there it's an h2 because this is not Shaila this is the default teaser you're getting with any theme out of the box but we're going to go back to appearance Shaila our default to the site and you can see here that's an h3 we know it because it's blue that's how I themed it right h3 to make this point I'm going to go back let's say the client changes their mind again because that never happens back to h4 right so we're going to rerun gulp refresh here we'll expect it to be an h4 and gray again and there it is and the same thing here and that is what we're talking about theming it once and done it's not as simple as just taking a theme out of the box there's definitely some setting up to do I can talk briefly about that but who here sees the power that's possible with this yeah who is who here is as excited as I am about the possibilities here yeah okay yes sir that's fine but if you have a theme that you do not have a pattern lab instance for to go ahead to go back oh sorry keep doing that to go back and put a to create a pattern lab instance of a existing site is a lot of work and not necessarily I'm think you might have some trouble convincing a client that there's value in that uh it depends on if the client understands component-based design and if they're a long-term client and that all of them a lot of factors involved sir so that is that's the structure that alexi has in his shyly theme uh there are several major differences in how we're going to be implementing things with our jesso theme uh I don't think that you should it's one way to keep things organized uh to have a per component one s one scss file one sass file and do it that way in general we also have one sass file per component but we like to keep them separate so I me personally that's not how I would do it but we're not the the jesso theme isn't as far along in this in getting it set up for production uh so which is why I chose to use the shyly theme today so it's an excellent point and I don't have a great answer for you just that it's a choice any more questions on that yeah no it's not it's actually it's a it's a starter theme it's it's really really out of the box it's incredibly minimal it doesn't even like that background color I did or is it here I basically threw together the the background color up here and it's here let's actually just aside from that I can take you look at some of his other templates like a page article it's super super basic it's I put this together just as a to show you what's possible not to show you how fancy my theming skills are yeah so yeah this is it's a very very basic theme let's I think so that was a demo which was awesome so we're coming up to lots more questions so if you guys have them but this is uh these are some links uh you can also uh the you can take a picture or the link to the uh slides is available it'll be on the last slide but here are some if you want to get involved in pattern lab want more information about the shyly theme the jesso theme and there's a pattern lab chat room on gitter.im anyone else wants to take a picture do that give y'all a second um for those of you interested in going to Greece in May uh front end united has anyone ever been to our front end united conference yeah what was that I think we had this logo first but and also ours has a little chunk out of it I'm not the creative brains at forum one I just I just make things look pretty someone else makes it someone else thinks up the pretty stuff and I put it on a website it's really simple so but anyway yes does it as I guess it is kind of similar so but anyway front front end united it is in next May in Greece um it should be great uh and very warm and I don't know if I can get there but I would love to go because you know Greece now um now we can go back and are there more questions sir I think I think that would totally be possible I've not done it that way but the you know the generic field markup for Drupal field it's not that different you know if you have your extending Drupal you know twig Drupal field twig templates then yeah you just add an extra class and you could make you know your orange background field or however you're you're doing it and of course you third time's the charm Adam and of course you could use it from one project to the next because a lot of these the templates the markup itself isn't necessarily changing it's the the CSS you're applying and you could choose to do it like uh Alexi and group them together in a directory and copy it over I mean that's full that's you're you're fully capable of choosing to do it that way and I don't even it might even be a great way to do it I've just not tried it that way but yeah that that is one of the things that's possible is you can really componentize you have the way you choose to use a search bar with you click it and it slides into the animation why would you choose to like redo that from scratch every single time yeah sir I think that there's different shops deal with the division of labor in different ways some uh at forum one we have some themers who are not capable of site building you have some themers who are capable I also do back end work sometimes uh it depends on what a project needs so in some shops choose to keep them separate to to to keep the themers out of the site building and that's one way of doing it and that's totally it's possible with pattern lab it's one of the things that pattern lab really helps make easy the the the femur can just say here I've done it in pattern lab here's the markup I want give it here the developer this is where it is in pattern lab go make it you build it this is the pattern this is the markup I need or you can go and do it all yourself like I do sometimes both are possible over there in the blue yeah there has to be communication between the front ender and the back ender about what what are the field names what are the variables uh and if they're going to be doing the making sure that on the Drupal side everything looks right so this is I don't know if you can't read this this is forum one dot com slash theme slash gesso slash pattern dash lab slash public question mark uh p equals whatever the pattern is and you can send them like for the homepage you just send them this link and they can review it this is not the live site this is just pattern lab it's for us we place pattern lab inside the theme because we want them to share css but that's a choice also sir I'll get to you next yes so the question is is it a little more time consuming to do things in pattern lab first rather than just theme the Drupal site it is but the things that allows you to do the for example pattern lab loads faster than a Drupal page you know it doesn't you don't we're not waiting seconds it's it's I mean I'm just going to refresh this and the only hit is the is the only hit is the image whereas what was it's a little slow actually it's not that slow but but the point is yes uh it does it does take a little longer but you are building out components that can be reused that already work responsibly uh that don't have to be tested again once they're used as part of Drupal just question back here so uh to keep costs down minimal overhead uh instance of pattern lab that's an excellent question um I'm not sure that that's a necessarily the best solution for a smaller client you know if there are certain for and I don't even I couldn't even come up with a number I could make something up I don't know less than 50,000 less than 100,000 it wouldn't make sense it'd be too much of a take too much of the project but yeah no it's definitely definitely a concern that I'm sure some clients or shops might have yes Tom I can't speak for other themes Gesso was designed by Denny Yard who is if I'm not mistaken both legally blind and legally deaf he is one of the champions of uh of accessibility um and he is brilliant and it's an honor one of the things I like about form one is I'm by far not the smartest person at this company he's he's one of my uh he's the head of the front end development uh and he's he's he's super knowledgeable and yeah so Gesso our version is completely accessible like a hundred percent it's totally capable of supporting pattern lab can support any theme you know um it's a it's a tool that you can we took Gesso and we put it in a pattern lab for Drupal we have Gesso for WordPress you use this pattern lab too the three are it's kind of like a a triangle that they don't necessarily all lean on each other but they they do support each other question sir the data transform plugin isn't providing the variables it's pulling the variables from the JSON file that is associated with the twig template and pulling them in to pattern lab just like so that the template is the same as the Drupal one which is getting its variables from PHP from symphony so it's the it's the uh basically the here let me show you again that JSON file yeah so this is field speaker image and I just hard coded it here in pattern lab you could easily just create just as easily create another component and call it to be pulled in here I was just trying to save myself time but this is field speaker image this is field company and here we have content dot field speaker image and content dot field company yes no you're not using them in Drupal you're just using them you're using the variables that you're from JSON to display in pattern lab so that you have dummy data to show which which would lower maybe some text or or whatever to because if you oops I don't need to open Viber nice Adam because no because if you look because if you look here this is all dummy text this is all speaker name company name this is the same image this is the same teaser pattern lab component four times no no you could pull in you can yeah this example I chose not to do that just keep it simpler for me but yeah you can totally that is basically what pattern lab does let me just to give you speaker listing the speaker listing just to it's pulling in my organisms node speaker teaser four times that's why it's showing up four times if I took the one of these out it would show three times that's just how pattern lab works if I put an extra one in there would show four times five times question yes yes uh it's actually so it's it's Drupal's using the same file because of that extra so here is the dot html.twig which both which uh which is what Drupal is using and this which extends it is what twig is using but it's basically saying use the same one so you're only you only have making the change once you're making the change here because Drupal can Drupal can find any twig template inside your theme directory because that's what Drupal does just searches it sir yes actually that I was about to go there is a way to is it no that's I had it up before um Drupal I have not yet gotten to play much with this component libraries but this is something else uh which basically it kind of does the opposite allows you to pull Drupal actual content in Drupal into pattern lab using um uh twig namespaces and I don't I do not uh like I said I don't complete to understand how this one works I've not used it yet but apparently it pulls the data from pattern lab and pulls it into Drupal um this is definitely uh chas uh brought this to my attention last week I've not had time to uh fully digest it but it looks very promising and it's entirely possible that the way what I've demonstrated today won't be the way the forum one does it maybe we'll use component libraries we're going to find the best solution that allows us to theme it once and be done in the back I'm very familiar with them they're doing very similar work as well yes they're really they're the same there's one instance of the template and whether you do it one way or the other I don't know which way is ultimately the best way I think they both have strengths I know that my supervisor one of the things he really likes about the way we're doing it now is that doing theming something in pattern lab only like a gentleman over here was was mentioning you don't need to actually have any real Drupal knowledge you can really just be a front end on your own and depending on what your team is like that might be a good solution if you're doing everything maybe you want I gotta step step back if if if you do if you are a full stack developer maybe you want to have the control maybe you want to be pulling the Drupal stuff into pattern lab or vice versa but when you have junior developers who are just wrapping their heads around pattern lab and that's how we do things with forum one the junior developer maybe needs to be not confused by anything Drupal so they can just they have the design they have pattern lab and they're going to build it out they're going to say to the developer here's the pattern lab here's the markup we need please go make that happen it really just it really depends on your team it's never I don't think it could ever be completely cut cut and dry it's going to depend on who you have in your team what their skill sets are etc sir I don't know I would assume I don't see why not you might have to have a separate instance for each theme it would depend on how you architected I just I can't top my head I don't know yes sir ah so using you're saying I just repeating this so I understand so using this this phase two it's the component libraries or it's something else only their starter kit so it's actually using their starter kit is keeps pattern lab separate and the Drupal templates pull in the pattern interesting yes you can actually do this do that same thing here you I didn't do it in this particular case but you can extend you can use yeah you could know but you could also break it down that way you could have just content and then pull in there's ways in json to to pull in content into your content variable lots of different things just not how I chose to do it just because I wanted to demonstrate some custom markup which sometimes because if you're not doing the the markup changes in your twig template where are you doing them if you're just trying to pull in variables that's one thing but if you're actually trying to do some sort of special markup which is what the power of twig is then where do you do that now I mean do you do it in where do you change the markup where do you what if you need to have a special class on a div yes this can it's interesting you should write a session on it I go I'll go I'll attend got it I don't completely follow that but I've been up since 5 30 so we'll have to have another conversation any more questions before we close it out and I just say thank you all right so thank you how much can I like to present present there you go um boom so down here the slides if you want to take a look and also the link to the eval um so thank you all and hope you all enjoy dribble con thank you