SOLD OUT | Component Based Development

Date: Tuesday, April 9
Time: 9:00 am - 4:30 pm
Cost: $450 $500 (Coffee and lunch included)

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.

The challenge for developers is trying to keep up with the latest changes. How do you find and learn about the best tools and techniques? And even after we've learned a new tool, it can feel like our skills are soon outdated.

In this training, we will put into practice one of the latest trends in development, components. Building a website using the component-based approach can dramatically improve collaboration among teams, making the code more reusable, while flexibility and long-term maintenance of your project becomes easier. 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
Components:
Contrary to the top-to-bottom theming we have been doing for years, Components allow us to build and theme our websites by breaking it down into pieces. This presents several advantages over traditional theming including reusability, better CSS structure, limited CSS nesting, less risk of regressions and more.


Styleguide:
A living styleguide is a pretty powerful tool to add to your project because it gives you a quick look at the components you are building and most importantinly it becomes the single source of truth for your markup, styles and javascript code.  In some instances the styleguide becomes the prefered way for clients to perform quality assurance testing as well as being able to see how the project is progressing.


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. A good understanding of HTML, Twig, CSS/Sass and command line is recommended but not required. 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.


Training requirements:
Please be sure to return to this page for instructions on setting up your local environment.