In this workshop we will cover how to leverage the powerful features of Drupal as a Content Management System to build the back-end architecture and infrastructure to provide filtered content that lends itself to a component-based front-end. We will then spin off a Gatsby website to serve as the front-end interface for this Decoupled architecture.
Topics covered during this training include:
- Setup Drupal’s JSON API and create new EndPoints for data retrieval
- Use GraphQL to query data from Drupal at build time
- How Gatsby and React make use of components
- Building Gatsby Components and styling them Sass
- Gatsby’s createPage function to build pages at build time.
- Gatby’s Link and Gatsby Image components which are two powerful features of Gatsby for building blazing fast websites.
- Install and configure Gatsby Plugins
After completing this course you’ll come away with knowledge of:
- Building a simple Gatsby site using any Gatsby started to discuss all the pieces involved in a typical gatsby site
- How to plan for a decoupled architecture
- Building Drupal’s infrastructure in such a way that it lends itself to a decoupled architecture
- How to create one or multiple endpoints using Drupal Core’s JSON API module
- Setup Gatsby to consume data from Drupal to build pages and components
- How to build basic and complex Gatsby components from scratch while adding logic and flexibility to improve reusability of components.
- How to use GraphQL’s playground to query data from any source
- In-depth understanding of Gatsby Link and Gatsby Image components which are in part responsible for for Gatsby’s great performance
- Installing and configuring Gatsby plugins
- How to setup Sass in Gatsby to style your projects
What you can expect from this course
Best practices and standards are at the core of this course. This means you will be exposed to the latest trends, processes, and tools used on today's web development to build responsive, accessible websites.
Prior to training
Our team of trainers has put a lot of effort into making sure your training experience is successful before you step foot in the door (or in these days of distance learning, before you login to the training platform). This means we will provide guidance and support to ensure you are ready for training with your local environment and any questions you may have. In addition to providing a detailed set of instructions for setting up your local environment, we will hold a virtual call, prior to the training day, to assist anyone who needs help with their local setup.
Since this will be a virtual training, you will have our team at your disposal to answer questions and help you if you get stuck. You will be able to ask live questions and discuss issues related to the topic at hand. If necessary, you will be able to share your screen to help you debug your issues so other students can benefit from this opportunity to learn something new.
In addition to providing you with world-class training material that can be accessed at any time, even after training has passed, we will share the recordings of each of the lessons we do. This is a great way to reference the training at your own pace afterward.
Who is the training for?
This training is targeted to beginners-to-intermediate audiences who are looking to learn the basics of a decoupled architecture. This includes back-end and front-end developers as well as site-builders.
In addition, managers or IT folks who wish to learn basic concepts of a decoupled architecture will find this training very insightful.
For this hands-on training course, the following is recommended:
- macOS or Windows Pro
- Latest Docker and DDEV
- Latest stable (LTS), version of NodeJS with NPM
- Github account
- Good understanding of HTML and CSS
- Familiarity with running commands in a command-line tool is required
- Knowledge of cloning a repository from Github
- Basic knowledge of Dev tools
- Familiarity with Drupal concepts such as Node, fields, relationships
Mario Hernandez, Head of Learning at Medicurrent
Tobias Williams, Director of Front End Development at Mediacurrent
Mario is the Head of Learning at Mediacurrent with over 10 years of public speaking and training experience. He is a regular speaker and trainer at tech conferences across the states. Mario is a co-host of the Mediacurrent podcast where guest speakers discuss Open Source solutions.
In his role as Director of Front End Development at Mediacurrent, Tobias Williams strives to learn something new every day, and keep an open mind to new methods for front-end solutions. He has eight years of experience as a Drupal designer and developer.
Tobias is a University of Southampton History Graduate. In 2005, he moved from the UK to the US and began working for a digital media publishing company. He became a Flash designer, and discovered that he loved the relationship between design and development. Tobias built his first Drupal 5 site in 2008 to house his Flash portfolio, and was hooked on the CMS. In his role as a Flash Developer, he continued to design and build Drupal sites in his spare time. In 2011, he took a position as a web developer for an established regional newspaper where he continued to hone his Drupal skills.
When he’s not busy attending Drupal events (he owns a Drupal t-shirt for every day of the week, for several weeks), Tobias enjoys working on home repair projects, playing with his extensive collection of board games, and home brewing beer with his wife.