Chapter 1
Training Overview
During this training we will be using many of the popular front-end tools such as NodeJS, NVM, NPM, Gulp, and others. Follow the instructions below to set your local environment up.
The component based development training is broken down into 3 parts:
Building stand-alone components in Twig using KSS Node.
Building Drupal's back-end
Integrating components with Drupal.
Why Components?
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 much closer to reality.
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.
Building a website using the component-based approach can dramatically improve collaboration among teams, making the code more reusable, 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 this training covers
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: KSS Node is a modern documentation syntax for CSS (link is external), which is intended to be readable by humans and machines. KSS Node allows us to create a living style guide which we will use to catalog components built on a website. These components will be the single source of markup, styles and javascript behaviors which Drupal will use when rendering our website.
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.
Theme Generator: Thanks to the hard work Mediacurrent has put into creating a theme generator system that provides a scaffold for a theme with all the latest tools, plugins and automation, we can create a brand new custom theme in a matter of minutes. This theme complies with today’s standards and best practices to easily integrate with Drupal. It’s worth noting that the scaffold provided by the theme generator can also be used in a non-drupal project.
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 is training for
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. 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:
- Laptop computer
- Text editor of your choice
- Drupal 8 installed and running
Automated environment
For your convenience, we have put together a lando-based local environment which will build and setup everything you need to complete this training. Follow the instructions here:
https://github.com/mariohernandez/component-based-development
Go to Chapter 2.