Drupal Frontend

Drupal Frontend

Drupal Front End Or Backend
Drupal Front End Developer Jobs
Drupal Front End Developer Job Description
Drupal Front End Developer Interview Questions
Drupal Frontend Editing
I recently read Front-End Architecture for Design Systems by Micah Godbolt (BK1). It is a fantastic evaluation of front-end architecture and strategy. The book isn't specifically for Drupal developers, but the concepts laid out in the book are relevant to all front-end developers and they are easily applicable to Drupal 8 projects. In this post, I want to build a couple of components and discuss different front-end architecture approaches for Drupal 8 projects, specifically using the concepts in Godbolt's book.
Modular ContentThe concept of atomic design (often referred to as component-driven design), popularized by Brad Frost (BP5), has become a very popular approach to front-end architecture because it strongly reinforces DRY principles, it makes it much easier for front-end teams to collaborate without conflicts, allows your front-end team to be more agile and, when paired with a living styleguide, your back-end team and front-end team can work simultaneously with far less concern of conflict. For those of us on very small teams, you might all be full-stack developers out of necessity, but I think that this approach can still be advantageous, but ultimately that should be decided during the discovery/early phase of a project.
Proficiency in core technologies for front-end development (CSS, Sass, HTML, and JavaScript) Recent experience for all aspects of Drupal theming including UI familiarity, configuration, and basic site administration, creation/manipulation of template files, preprocessing,. The purpose of this cookbook is to allow for an automated frontend spin up experience to exist. The goal is to utilize best practices in the community to help speedup and unify the experience of dev-ing in a Vagrant world. The most preferred front-end framework on the list, Angular JS, is a developer's favorite when it comes to interfacing with Drupal. It lets you create feature-rich dynamic web applications and allows Drupal to work more efficiently, resulting in a dynamic, secure and a gripping Drupal website.
Atomic design is all about breaking down design into the smallest components and building larger and larger components from those smaller components until you have a complete webpage. In Drupal 8, you can fully customize/create your own HTML markup for your components (BP18). Furthermore, you can use a unique class for each component and apply all of your styles for that component to that unique class (BAD4). This approach has some great advantages, like keeping HTML elements out of CSS selectors, avoiding nesting and ambiguity in CSS/SCSS, and, I feel, it forces you to write more modular CSS.
I'm going to demonstrate how you could build a staff listing page throughout this post. I am going to use Phase 2's pattern-lab-starter theme (THE4) since I'm already familiar with it and I think it is a great choice. In each section, I will try to only demonstrate the pieces relevant to that section. I hope by the end of the post, you will understand what goes into building a component, how to use existing components to create larger components, the advantages to a component-based approach, and some of the options you have to implement a component-based approach.
Here is an example of the completed staff listing component (medium up viewport).
TwigDrupal Front End Or BackendDrupal 8 uses Twig as its templating language (CR13), like Drupal 7 used PHPTemplate (CR16). I won't go to much into Twig here, but it is important (as always) to write semantic markup. There are plenty of good resources available to learn and refine your Twig skills, whether it be Drupal-specific or not (BP15)(BP16).
Drupal Front End Developer JobsIt is very important to write modular Twig files, I suggest one file per component, so that you can build bigger components using Twig's include and embed. There are some good ‘starter' examples of modular Twig components in the open source, component-based Drupal 8 themes (THE1)(THE2)(THE3)(THE4)(THE5).
Lets consider the staff listing example I mentioned earlier. What we will do, is build the Twig template for a single staff member, and then we will use that template to generate the grid of staff members that you saw in the screenshot above.
So, here is the Twig template that we will use for a single staff member:
staff.twigI'm not going to go into great detail about this markup yet, but note that this represents the entire markup for a component. Every instance of this ‘staff' component will use this exact markup everywhere that it is displayed. Also, please note that I am not involving Drupal in any way at this point. Just consider this as a stand-alone Twig file for now. I will discuss how Drupal becomes involved later.
staff–dark.twigI'm going to create a 'dark theme' of the Staff component also, which is really easy now that we have staff.twig.
This is a pretty trivial example of a variation of an existing component, but I want to show some example of how you can do this. This 'dark theme' will just change the background color and text color.
Here is the Twig template that we will use to produce the grid of staff members that I showed you in the screenshot above.
staff-grid-block.twigThere are some Twig components in this code snippet that you probably aren't familiar with because they are defined in Phase2's pattern-lab-starter. So, lets walk through it.
We start off by embedding a Twig template called _smart-grid.twig, and we pass the embedrowItems: { medium: 3 }. If you are not familiar with Twig's embed tag, I highly recommend you review the Twig embed docs. So, before explaining what's going on technically, it is important that you know that this entire Twig template is just saying, 'Use the staff.twig Twig template we just created to make a grid of staff members. For a medium-up viewport, it will be a horizontal grid with 3 staff members per row, otherwise, it will stack them vertically.' I am obviously ignoring some of the details, but that is essentially what is happening. Now lets talk about how/why.
So, here is what's happening:
1. embed the _smart-grid.twig file (I will discuss the '@base/grids/' part later)_smart-grid.twig is a file given to you in Phase2's patter-lab-starter. Lets take a look at what's going on in it:
_smart-grid.twig2. pass it the rowItems parameterFirst, take a look at the rowItems.small down to rowItems.xlarge lines. These are the lines that will handle the 'For a medium-up viewport, it will be a horizontal grid with 3 staff members per row, otherwise, it will stack them vertically.' part that I discussed a couple paragraphs ago. Since we are passing rowItems: { medium: 3 }, you can see that if rowItems.medium will be true. So, our first html element will be 
.
3. override the gridItems blockMoving down to {%blockgridItems%}. Twig blocks are important for inheritance (http://twig.sensiolabs.org/doc/tags/extends.html). In this staff listing example, the staff-grid-block.twig is a child template to the _smart-grid.twig template since we embed the _smart-grid.twig template in the staff-grid-block.twig template. So, in our child template, we are ‘filling in' the block(s) defined in the embedded template. That is exactly what is happening in our example. You can ignore all of the content within the gridItems block in _smart-grid.twig for now because we do not pass demoItems or items in this example, so we will just be filling in that block with the content we pass in.
4. for each s in staff put a staff member into the grid using staff.twig, and pass each parameter from each staff member s to the staff.twig fileThis one is pretty simple now that we've covered how embed works. I know that you might be wondering where the staff variables is coming from in the for loop. I will talk more later about how to populate the staff variable with data. It is much easier to talk about it once we start talking about PatternLab and how the Twig templates in PatterLab can be used in Drupal.
staff-grid-block–dark.twigWe could also create a 'dark theme' version of the staff-grid-block.twig file. You could just replace theme: s.theme for theme: 'staff--dark'. NOTE: I haven't demonstrated how to include PatternLab templates in Drupal .html.twig files, but it is important to note that you wouldn't include this particular PatternLab template in one of your Drupal .html.twig template files. Instead, you would include staff-grid-block.twig and pass the staff variable where theme is set to 'staff–dark' for s in staff. This promotes DRY. So, I am creating this staff-grid-block–dark.twig file simply for the purpose of viewing it in PatternLab.

CSS MethodologiesLets take a look at what the SCSS looks like. If you haven't used BEM (Block Element Modifier), you can read/listen/watch about them using these resources (BP24)(BAD4). Very briefly, BEM is a CSS methodology that is great for efficiently organized styles. Generally speaking, it is very effective on larger, more complex projects because of its strict organization of code. In the chunk of code below, staff will be our ‘block', each of the __* will be the blocks.
BEMstaff.scssExhausted Documentation (Styleguides)Living styleguides, like PatternLab and KSSNode, have become a popular topic in the Drupal community with the adoption of Twig and projects like Component Libraries module (MOD3) that provide a relatively seamless pairing of your Drupal 8 site and your styleguide. Living styleguides are very helpful in implementing an Agile workflow on front-end teams. You can constantly work on individual components, ‘always be shipping', and be in constant communication/feedback with clients. Furthermore, when used properly, these living styleguides leave very comprehensive front-end/design documentation for clients and your own team.

CSS MethodologiesLets take a look at what the SCSS looks like. If you haven't used BEM (Block Element Modifier), you can read/listen/watch about them using these resources (BP24)(BAD4). Very briefly, BEM is a CSS methodology that is great for efficiently organized styles. Generally speaking, it is very effective on larger, more complex projects because of its strict organization of code. In the chunk of code below, staff will be our ‘block', each of the __* will be the blocks.
BEMstaff.scssExhausted Documentation (Styleguides)Living styleguides, like PatternLab and KSSNode, have become a popular topic in the Drupal community with the adoption of Twig and projects like Component Libraries module (MOD3) that provide a relatively seamless pairing of your Drupal 8 site and your styleguide. Living styleguides are very helpful in implementing an Agile workflow on front-end teams. You can constantly work on individual components, ‘always be shipping', and be in constant communication/feedback with clients. Furthermore, when used properly, these living styleguides leave very comprehensive front-end/design documentation for clients and your own team.
PatternLab provides you with a directory structure/hierarchy for your patterns. You can view a demo on their website. So, you can see that the patterns are organized into top level categories: atoms, molecules, organisms, templates and pages. You start by building atoms, then use those to form molecules, then organisms, etc. you get the idea. So, lets continue with our staff listing example.
Here are the staff listing related files we've created so far:
staff.twig
staff–dark.twig
_staff.scss
staff-grid-block.twig
In PatternLab, lets create a Staff molecule and a Staff Grid Block organism. First, we can create a staff directory in our molecule directory source/_patterns/02-molecules to contain our staff.twig, staff--dark.twig and _staff.scss files. Obviously, you can mkdir and touch to create the directory and files, but Phase2 has a nifty Yeoman script in their pattern-lab-starter repo (THE4), aliases as npm run new, that will do everything for you (See: ./scripts/new-component/index.js)! So, create both the Staff molecule and Staff Grid Block organism. We need a .twig and .scss file for the Staff molecule and only a .twig file for the Staff Grid Block organism. Also, move all the source code into the files you just created.
After just issuing that npm/yeoman command and putting the code into these files, look at what we have accomplished!
staffstaff–darkstaff-grid-blockstaff-grid-block–darkAt this point, you can see each of these components in their entirety without even touching Drupal! If you're doing client work, this is a great way to demonstrate design/front-end functionality to your clients without having to even involve backend development or ‘site-building' at all. Clients could approve an entire design/website before a backend developer even creates a content type, paragraph type or whatever else. This means that backend developers don't have to go back and change data structures if clients completely change their mind once they see a design.
This is also great for front-end developers though! Front-end developers hate having to fuss with Drupal-isms while creating their designs, and now they barely have to. (MortenDK) lol
'Obviously I'm being sarcastic – but not that sarcastic, to be honest with you'
PEOTUS
Comprehensive TestingPerformance TestingThis section of Godbolt's book was pretty enlightening for me. Having worked entirely in HigherEd and on a small team, I haven't had a project with an explicit ‘perfbudget'. We obviously check the performance of our sites, but we've never looked into automating performance tests.
Godbolt uses Grunt in his book, so he suggests these two Grunt packages for automating performance tests: grunt-pagespeed and grunt-perfbudget. I am more of a Gulp man myself, and I was already rolling Gulp on the d8 test site I was using to follow along. So, that being said, I did not try either of those Grunt packages. Instead, I tried gulp-sitespeedio.
The gulp-sitespeedio plugin was incredibly easy to install, configure and use, which is exactly what I was looking for as a n00b to automated performance testing. The brief Getting Started on the repo is seriously all you need to get started. Just run this to install it:
Here is what I added to my gulpfile.js:
And here is the output I got when Gulp ran the task (you can click on the image to see a larger image of the output):
Wait, wasn't this supposed to be about Drupal?So, now we have everything and it's awesome, but we haven't even touched Drupal.
I'm going to start by creating some Paragraph Types (MOD2). If you haven't used Paragraphs yet, I highly suggest it. It is a great module for creating flexible, re-useable pieces of content. It also provides a really phenomenal experience for site-builders and anyone who creates and/or edits content.
StaffBuild paragraph type in admin interfaceDrupal Front End Developer Job DescriptionI'm not going to go too far into how to use the Paragraphs module in this post because this post is already 10 times longer than I intended and there are plenty of good resources on Paragraphs (I'll try to put some in my Sources section below).
Download and enable the paragraphs module, go to Structure > Paragraph Types and click '+ Add paragraph type'. Adding fields should be familiar to anyone with previous Drupal sitebuilding experience. I'm going add a screenshot of my completed paragraph type here so you can follow along.
Create .twig fileThis file, paragraph--staff.html.twig will go in your themes /template directory.
Drupal Front End Developer Interview QuestionsStaff Grid BlockBuild paragraph type in admin interfaceCreate .twig fileThis file, paragraph--staff-grid-block.html.twig will go in your themes /template directory.
How to use your awesome new paragraph typesOkay, so now go to Structure > Content Types > Basic page and add a field. You'll be adding a Paragraph field. ‘Type of item to reference' = Paragraph and ‘Allowed number of values' = Unlimited. Save field settings. Scroll down to the Reference Type fieldset on this next page. Keep the Reference method as Default. Now you can select our Staff and Staff grid block paragraph types and click Save settings.
Now, if you go to the node edit form of any Basic page on your site (create a Basic page if you don't have an existing one), you will see a Paragraph field that will let you either Add Staff or Add Staff Grid Block! Give it a shot and you will notice that the styles and markup are exactly what we created in Patternlab. Now you have an entire component that can be used anywhere in your Drupal site, and you have that same component documented in Patternlab, your living styleguide.
ConclusionI hope that this post was helpful, and I hope that it will inspire many of you to look at Godbolt's book. It was definitely a great, thorough resource and it introduced me to some new ideas.
I am not, exclusively, a front-end developer so if you are a front-end expert and you see a mistake, or something that could use clarification, in my post, please point it out in the comments. I am using this ‘architecture', or at least many pieces of it, on a project now and even by revisiting it, I have already learned a lot compared to my first read through the book.
SourcesI did not use every one of these sources in my post obviously, but I have used all of these resources in some capacity and I wanted to generate a comprehensive set of front-end sources since this post was so expansive. Also, I just want to thank all of the people who kindly share knowledge!
UPDATE (01/17/17)I made a mistake and listed Aleksi Peebles and John Albin on the same line. below you will find the updated, and accurate, sources. Thank you, Aleksi, for notifying me of my mistake.
Books (BK)Credit: I am using the phrase ‘four pillars of front-end architecture' from Micah Godbolt's book below. Thank you for an awesome book!
Blog posts (BP)Video tutorials (VT)DrupalCon Dublin 2016 (DUB)DrupalCon New Orleans 2016 (NO)BADCamp 2016 (BAD)Open-source Drupal 8 themes with PatternLab or KSS-Node integration (THE)Drupal modules (MOD)Drupal Frontend EditingSelected 8.x Change Records (CR)