Training: Component-based Development Workshop

Date: Friday, August 2, 2019
Time: 9:00am - 3:00pm

With the component-based approach becoming the standard for Drupal 8 development we’re beginning to see some slick front-end environments show up in Drupal themes. The promise that talented front-enders with little Drupal knowledge can jump right in is now a reality and we at Mediacurrent are experiencing this firsthand already.

In this training, we will put into practice one of the latest trends in development: components. Building a website using a component-based approach can help make code more reusable, dramatically improve collaboration among teams, while improving flexibility and long-term maintenance of your project. We will work on building a living style guide which will become the single source of truth for markup, styles, and javascript behaviors.

Topics we will cover

The component-based approach

Contrary to the top-to-bottom theming we have been doing for years, the component-based approach enables us to build websites by breaking down the UI into self-contained, reusable parts. This presents several advantages over traditional theming including faster development time, more sane CSS structures, less risk of regressions, and more!

A living styleguide

A living styleguide is a powerful tool to add to your project because it gives you a quick look at the components you are building and most importantly it becomes the single source of truth for your markup, styles and javascript code. In some instances, a style guide can become the preferred way for clients to perform quality assurance testing as well as being able to see how the project is progressing. Pattern Lab will be used to generate this styleguide.

Twig

Drupal 8's new templating system is a themer's best friend. Twig’s easy to read and learn syntax can be leveraged to write powerful logic in your theme without resorting to traditional PHP templates.

BEM and SMACSS

While building components we are given the opportunity to architecture markup in the best way possible to ensure our components are as flexible and lightweight as possible. Using BEM to name our CSS classes and SMACSS for structuring our theme we can achieve tremendous control and organization of our themes, markup and styles.

NPM, Node and Gulp

The theme generator is built on Node and offers the latest plugins for today’s front-end applications including Drupal themes. NPM allows us to easily install packages or dependencies as needed and Gulp makes it easy to automate the repetitive task we perform while building websites (i.e. sass compile, image compression, JS/CSS minifying, etc.).

Who should attend this class?

This training is intended for front and back-end developers who are building websites in Drupal 8 as well as site builders and designers who often have to work across disciplines or collaborate with other departments and/or vendors  to manage, update, and improve their websites. A good understanding of HTML, Twig, CSS/Sass and command line is recommended but not required.

What will attendees gain from this workshop?

After this training, you will have a solid understanding of how to build and theme site components in a living style guide and be able to integrate those components into Drupal with a single source of truth for markup, styles, and javascript.

Prerequisites

Basic understanding of Twig and Drupal Theming is helpful. 
Component based theming experience is helpful but not required.
Site building experience is helpful but not required.

Curriculum

https://mariohernandez.gitbook.io/components/

Drupal Camp Colorado Training Team

Mark Casias - Senior Software Engineer

Mark brings a fifteen year programming background and six years of Drupal experience to his role as Senior Drupal Developer at Mediacurrent. Highly involved in his local web community, Mark runs the ABQ Webgeeks Group and started the Albuquerque Drupal Users group.

A former radio personality, Mark switched careers to become a programmer when he realized he could have a fun job and eat. (No seriously, kids, radio pays horribly). But as a nod to his days as in radio, Mark hosts the bi-weekly Mediacurrent Dropcast show and the Friday 5 video series. Prior to Mediacurrent, Mark first dove into Drupal to convert dreamincode.net to a better CMS than it had. Through that he was sent to Do It With Drupal in New Orleans, where he met the great people of the community. From that point, he was hooked. 

Mark resides in Albuquerque, New Mexico. When not in front of the computer, he enjoys playing hockey, tennis, bass and a good craft beer- not necessarily in that order. 
 

Eric Huffman - Senior Front-end Developer

Eric has over seven years of experience working with Drupal as a developer, themer, and site builder starting with Drupal 6 in 2008. His passion lies in designing and building web front ends, but over the years he has also supported programmers and often played a role in bridging back-end and front-end teams.

Eric holds a BFA degree in Illustration from the Savannah College of Art and Design (SCAD), and spent the beginning of his career as a graphic designer before moving into web design and development full time over 10 years ago. Prior to Mediacurrent, Eric worked as the Web Manager in the Communications office at the Georgia Institute of Technology where he served as the lead front end developer, and led a team in supporting the top-level web properties of the Institute, including a major migration to Drupal 7.
Away from the digital world Eric enjoys cycling, hiking, and spending time with his wife tackling various projects around their 90+ year-old home in suburban Portland, OR.

Sponsored by:

Mediacurrent Logo