 Awesome. How's everybody doing today? Good. Awesome. Awesome. Let me talk about a topic that is really dear to me. I've been working with this type of system for the last year and a half and after going through a lot of the pain points and growing pains of iterating through a project using other methodologies and other theories, this is really just a big relief. So, let's dive into it. My name is Joshua Giauea. I'm a senior front-end developer at a company called Code42. We created a crash plan, a software called Crash Plan, which is basically an endpoint and backup solution for enterprise customers. Some of our big clients are Microsoft, Nike, Georgia University is one of our clients actually as well. Hello. Come on in. Feel free to connect with me. I'm on LinkedIn, Joshua Giauea, or you can email me at yo at jgdesign.com. All right. This is what we're going to cover today. What is modularity? How do you achieve it? How do you get there? How do you define it? Why change your approach? What are the benefits of not creating templates to represent designs handed to you by your designer? The process, so when you start thinking about developing modularity, you have to first start with the design process. So, we're going to take a look at atomic design, which is a concept created by Brad Frost to break your design up into more consumable and reusable chunks. I'm going to demo the website we created for Code42 using the strategy. I'm going to show you the admin interface and the rendering and why it's beneficial. And then I'm going to get into how do you implement this in your workflow today. We're going to go through some code samples and also have a repo up that you can pull down and get started with it right away. Talk a little bit about Gutenberg. I'm not going to get too deep into it. Essentially, with the new advent of Gutenberg and the core, this strategy is really going to play nice and I'm just going to kind of cover why I think that is. Legos. You guys remember these things, huh? Great. These little blocks can create almost anything from a boat to a ship to a plane to whatever you can imagine. And this is the kind of way we want to start thinking about development is how do we make these blocks that we can implement in all these different designs using these different content patterns to execute a cohesive design pattern. I just want to throw this in there. I'm from Minneapolis. This is the Mall of America. These things are huge. I mean, there's three stories tall. It's just it's amazing. But when you think about us creating blocks or us creating modules, we're building things just as big as complex as these things that they build here. We're just doing it in code. So if we can break that down in more consumable chunks, it's awesome. Atomic Design. Atomic Design is comprised of five distinct parts. And those parts are atoms, molecules, organisms, templates, and pages. Templates we're all familiar with as WordPress developers. But we want to start thinking about scaling back from the template and how we can take a look at a design and say, I see multiple reusable parts throughout my template. Let me break that down into a chunk that I can pull in and pull from at any time. Here they are again, just kind of outlined. Atom, molecules, organisms, templates, and pages. Let's take a real world example. See what that looks like. Here we have Instagram interface. You got the atoms are broken down into iconography, typography, thumbnail images, and a molecule is comprised of two or more atoms. So when you start seeing two atoms that could go into a design piece that can be used to represent an organism, now in the context of design organisms represents one Instagram post and everything attached to that Instagram post. All the information and content you need to know about that post. In the design, in the development phase of it, we refer to this organism as a module. And then obviously you got your templates here and your pages. We're going to break this down one more time using a familiar UI. I'm sure you guys have all used Yelp. I consider myself a foodie, so I'm always on Yelp. You got to cross-reference some of the stuff, though. I don't know that I can trust all the reviews. So right here, we see we have some atoms just broken down into smaller chunks. That creates this molecule. And there's a lot of power in this. There's a lot of power in understanding this. But I believe the real power comes in to when you understand where to start and stop an organism or create a module. Because see, now this module has been repeated throughout. And this organism has been repeated throughout. And what's nice about this is if you do it correctly, you can omit some of this content and still get a good design layout. So if it doesn't have a comment, I could not display it. If it doesn't have a rating yet, I could not display it and still get a good design flow. Just a couple more examples of where these atoms and molecules play out. But you can start seeing that if they developed each one of these as templates, they'd be repeating themselves a lot. They'd have to do it again in this view, right? They'd have to recreate that molecule in this view. So modular design is comprised of two patterns. Content patterns and display patterns. A content pattern is a solution to a reoccurring design problem such that you could use a solution many times and never use it the same way twice. So going back to my previous slide, a Yelp listing with a comment or not a comment. Those are two different design problems, but they're being used differently. So that would be a content pattern. And the display pattern describes a specific rendering of a content pattern. So this is taken directly from the Yelp style guide. And you can kind of see it just kind of reinforces the point that I just put across which is we only need one module, one organism to display these different content patterns because not much has changed or added throughout this. And if you start thinking about it this way, you'll have a lot of reusable components. Here's just some more examples of that same content pattern. And again. So what are the advantages of moving over to modular design methodology or atomic design strategies? You don't repeat yourself. You don't create a template that is, you know, main template one, no sidebar, main template two, with sidebar. You don't need that. You start using chunks. And in fact, we only have one template. It's called page. And all it does is loop through the modules. But we'll get into that later. Dry code, not repeating yourself. Another big advantage of this from a development standpoint is you can ship your markup for your module and your SAS file for your module, keep those interlocked. And that way, when you start a new project, you can always pull from your old module library. You're not starting a new, more collaborative and iterative process. Code 42, when we embarked on creating the new website, all we had from our design partner at Zeus Jones was wireframes. Normally, during this phase of a project build, there's nothing really you can do. Just have a wireframe. You don't know if it's approved. You don't know what's going to change. You're hesitant to get into the development part because you know you'll be changing something or something's going to change. So with this process, what it allows you to do is start to set up the data, right? I knew that each module was going to have certain content or certain fields mapped to it, so I could set that up. And what that allowed me to do is pass it along to my content editors and let them play with it. And then they start to see, oh, actually, we might need another theme or actually we might need another field, right? And so I can iterate through that process with them and they can iterate with that process with the design and we can all continue to work in tandem. So when we finish the project for Code 42, they do a lot of marketing and they create a lot of landing pages and I'm sure you guys are all familiar with landing pages. They vary slightly depending on what they're trying to convey as a company and normally there's dev interventions for each one of them. Each one of them has slightly different content and they need to develop her to edit, pen, change that content and change the look and feel. At Code 42, we have produced over 500 landing pages without any dev intervention, so the content team has just run wild with it and they have so many different layouts because of the module library of more than 20 modules that it doesn't look stale and it all looks fresh and new to the user. So yeah, just some gifts kind of reinforcing what I was just talking about. All right, let's go through the process here. The first thing you're going to want to do is identify patterns and you can do that right away when you get the wireframe. You can start seeing, oh hey, that's a call to action button. Oh hey, that's a slide image and you can start to think about how are we going to represent that in our admin interface. You're using advanced custom fields. I'm sure you're kind of already acclimated to the way you would do that with advanced custom fields. If you're using some other field management plug-in as well, you can just start mapping those things in your mind or also just start developing those things and then categorizing the patterns. Right, so it's a design pattern or a content pattern. So this is what I was referencing earlier. This was our first look at what Zeus Jones was creating for us and we were able to start developing at this point once these wireframes were approved. So if it's a content pattern, it's probably going to be an advanced custom field or a field plug-in of some kind or if you roll your own meta boxes, that as well or if you're already experimenting with Goodingbird, that's probably a block. Design patterns, we handled our design patterns using SAS. If you use SAS or if you use straight up CSS, doesn't really matter. But when we use SAS, it made it easier because we could use a naming convention to map each one of the modules to each SAS file that it represents. So this is the way it broke down for us. I guess my slide is a little off here, but these atoms turn into this slideshow, turn into this module or organism for us. And then the page templates iterating through each module. So we've got a hero CTA module right there. That's a primary text module, slideshow module, three-up module. And you can start to see if you reconfigure some of these modules, you start to get a whole different layout. So this is the way we organize our SAS. The atoms we kind of thought of as color typography and iconography. The molecules, that was some more themed layout and utilities overall. So padding margin, how are we wrapping these things? How are these atoms sitting in a div next to each other on top of each other? And then organisms. And they were represented by a SAS file for each module. I think I'm going to get into a demo now. Let me pull it up real quick. Alright, so I created this little test page using our modules. And remember, we want to solve multiple content problems with our design. And so the application of our corporate website at Code 42 and this WordCamp, they're two totally different applications of content. But I was able to create something with the modules that I believe represents the content. We'll just take a look at what those modules look like. So this is a hero CTA module. And through other modules we found that there were different conditionals we wanted to add throughout the process. So are we going to use a background image or a background video? And then we also put themes around a lot of the modules. So if it's a light theme, the text is dark. If it's a dark theme, the text is light. And there's some different color changes that cascade due to those overarching theme styles. So that's what a hero CTA looks like. But one of the big powers of using this strategy is the ability to just drag and drop content. And this is all done with advanced custom fields flexible content. So we can take a look at what this page looks like or not. Let's see if I can get it better on the page for you guys. Alright, so we're able to add that content to these modules. And I feel like it conveys information about this pretty well. So I think we accomplished what we're trying to do there. We had two different content problems and we solved them with one design solution. I'm sorry you can't hear me. So we had two different content problems and we solved them with one design solution. Better? No. Can you recap the content problems that you were addressing? The content problems that I was addressing? Well one of the content problems was for us at Code 42, our corporate acquisition site. And the other content problem was how do we display content that is in line with this conference. So how do we accomplish this? We use get template part. I'm not sure. So show of hands familiar with get template part, use get template part. Okay, it's a built-in mechanism in WordPress that allows you to pull in smaller chunks of PHP. If you're familiar with get header or get footer, it's kind of that but for your page content. I actually did the demo. So to achieve this, what do we need? We need advanced custom fields. We need flexible content and we need this thing called a module loop and it's very easy to achieve. So I get this template part. It's called module page and at which point I find out if my custom flexible field modules has rows. If it has rows, I find out if get fields exist because that's important. You're not going to be able to get the fields without that. And then we call a function called module loop. What the module loop does is it takes the name of that row, which is your layout. And so in the hero CTA context, it'll be hero CTA, alternating row will be alternating row. And we say this is the name of our row in advanced custom fields. We need a corresponding module file or template part. And we got to do a string of place on that. What we don't have to advanced custom field by default does an underscore and we named ours with a dash. So then we call a function called the module and all that's going to do is locate the template and render it. So just goes through, make sure it's not empty. When we pass that parameter, it locates it. It knows the module name because we just gave it to it. And then the false parameter is so you can load multiple modules on the page or else it would only require once. And after the first module is loaded, it would no longer load. We throw a fallback in there to get content if these modules don't exist. That way the user will always get something and that's always better than nothing. So if you guys want to get started today with this application, this theme using advanced custom fields, the module loop, and I base this theme on Sage theme. So if you're familiar with that, it incorporates grunt and I think it's a good starter theme. You guys can go here and download this repo. Another thing I want to talk about and how many people are familiar with AFC dash JSON, the folder. Okay, so this is another big component of this is there's something you can do when you have advanced custom fields, which is define an ACF JSON in the core of your theme. And what that does is it writes all of your fields that you've defined to JSON. And why that's important in the context of this is if you're sharing modules with different developers or you want to reuse the modules across different projects, you can automatically get to field definitions by just sinking in the back end of your WordPress admin. And you don't have to rewrite those fields every time. So that's what makes that powerful. One more thing I want to talk about, which is Gutenberg. So how many people here are familiar with Gutenberg? Have you guys nice? Nice, good, good. Have you guys used it at all? Delta block? How many people built a block? Okay, okay, cool. Yeah, that's awesome. That's awesome. So this concept of modular development or atomic design is going to play very well in the future of WordPress. And the reason being is because Gutenberg breaks each one of its blocks down very similarly to what I just showed you. And you can configure and reconfigure. Another powerful thing about Gutenberg is you have reusable blocks. Now, what a reusable block is, it allows you to find a block somewhere, anywhere in any post or any page, and then access that later. Anywhere and change it at any time from any poster page. So let's just say it's a call to action. And it's for the main WordCamp US page, and it's in a sidebar. And this week, it's Atlanta, and next week, it's wherever. And they want to change that and they want to change on every page, which is represented, they can do that on any page. So it's a very, very powerful tool. That's pretty much it for me. You guys have any questions? Yes? In relation to your ACM workflow, you build flexible content. You build each module as a separate field group? Are they all in flexible content? Great question. Great question. So we did do it all in one. But if you're using version control, it really becomes a problem. There's almost a merge conflict every time you try and merge that monolith of ACF JSON. So what we ended up doing is we create a field group for each module. And then we name space, or we name that as a clone. And then we clone it into our repeater. And that way, it makes it a lot more manageable. I read this book, and the modular loop that you're using. Is that something similar to how to create a field WordPress? I guess what I'm trying to say is, did you take the way that he created it, the way that he's using it on systems that are not WordPress, and utilize their own WordPress system? Got it. Yep. Yep. So our question is, Brad Frost has an implementation of how to use or loop through the organisms in another application that isn't WordPress. She wants to know, did I pull from that in creating this solution? The answers, no. I didn't pull from that. However, looping through a bunch of modules is probably a well-known application of how you would reach that. Any other questions for Josh? Josh, are you going to have your slides posted anywhere online? Yeah, they're actually online, so I could tweet that. Do you have your Twitter handle up anywhere? I'll tweet it from my handle. I can tweet it on the Word Camp in Atlanta. Yep, perfect. Awesome. Yeah, thank you.