Headless Drupal is coming amidst a torrent of heavily Javascript dependent front ends. Whether your display layer is an angular app or a JS-infused Drupal theme, it's time to get serious about managing the various dependencies and processes involved with the complexity of your theme layer. Join the team from Elevated Third to review several topics like: - Using Gulp as a task runner - Bower to manage dependencies. We will touch on a number of items that will help you to be sure that you’re getting the most out of your site's front end without leaving the rest of your team in the dust.

1. Efficient, Error Free
Drupal Development
with JS Build Tools

2. elevatedthird.comelevatedthird.com
Elevated Third is an independent,
full-service digital marketing agency
based in Denver, CO.
Founded over 10 years ago, our
agency has a single purpose: to
solve marketing and technology
challenges for startups and Fortune
500s alike.
Nick Switzer
Development Director
elevatedthird.com
nswitzer@elevatedthird.com
Tanner Langley
Front End Developer
tlangley@elevatedthird.com

3. elevatedthird.com
DISCLAIMER
Error free refers to getting new
members of your team up and
running with the same tools. We
won’t be focusing on testing in any
form.

4. elevatedthird.com
OUR DEPENDENCY MANAGEMENT JOURNEY
Dependency management from ad-
hoc Ruby to Javascript

5. elevatedthird.comelevatedthird.com
DISCOVERING NEW FRONT END TOOLS
● We found and incorporated a lot of Ruby-based tools
like Sass (and it’s many extensions) for theming, and
Capistrano for deployment
● They worked great in the short term, but current
projects grew, new projects started and updates were
released; long-term maintenance and dependency
management quickly became problematic
● We realized we needed an automated, scalable solution

6. elevatedthird.comelevatedthird.com
RUBY TOOLS
● After some research and testing, we settled on RVM and
Bundler to manage the required dependencies of our
Ruby tools
● Problem solved! We had a versioned, easily repeatable
way to make sure any developer who needed to work on
a project with Ruby dependencies could be up and
running in a matter of minutes
● After 2+ successful years of using those tools, we
decided to revisit our needs

7. elevatedthird.comelevatedthird.com
● A unified system to add/compile javascript and sass,
dev tools, libraries and other front end
dependencies
RE-EVALUATING: OUR REQUIREMENTS
● Automated frontend workflows
● Flexibility to try new things
● Fast, simple and consistent dev onboarding
● Faster SASS compile times
● Improve Drupal CSS/JS compression
● Common Sass/JS structures and workflows

8. elevatedthird.comelevatedthird.com
JAVASCRIPT TOOLS
● Leverage a language everyone on the team was already
very familiar with and using on a daily basis
● Incorporate something that will have value outside of
Drupal use

9. elevatedthird.com
TOOLS
THE

10. elevatedthird.comelevatedthird.com
THE LANGUAGE: NODE
● JavaScript on the server
● Can be used for full web applications but we’re just using it for
the developer tools
● Node vs io.js
● Node 4.0 released
● Use NVM to upgrade

11. elevatedthird.comelevatedthird.com
PACKAGE MANAGEMENT: NPM
● Node's package manager
● Manage dependencies via JSON
● Easily manage from command line
● Large library of node packages

12. elevatedthird.comelevatedthird.com
NPM WORKFLOW
1. Start a Project
2. Add New Package
3. Install All Dependencies For Project
Creates a package.json file
Downloads package and saves it to package.json
Downloads all dependencies listed in package.json

13. elevatedthird.com
EXAMPLE PACKAGE.JSON

14. elevatedthird.comelevatedthird.com
TASK RUNNER: GULP
● Plain JS over configuration
● Faster than Grunt
● Large library of plugins
( not as large as Grunt )
● Quickly increasing in popularity
● Automates common tasks

15. elevatedthird.comelevatedthird.com
HOW GULP WORKS
● Plugins ( each plugin does one thing well )
● Streams
● Tasks

16. elevatedthird.com
EXAMPLE
GULPFILE.JS

17. elevatedthird.comelevatedthird.com
FRONTEND PACKAGE MANAGEMENT: BOWER
● Similar to NPM but only handles
frontend dependencies
● Quickly download/include/remove
frontend dependencies in your
project
● Only includes one of each
dependency for all packages

18. elevatedthird.comelevatedthird.com
BOWER WORKFLOW
1. Start a Project
2. Add New Package
3. Install All Dependencies For Project

19. elevatedthird.com
INTEGRATION
DRUPAL

20. elevatedthird.comelevatedthird.com
DRUPAL + JS BUILD TOOLS
1. Only included as part of the theme directory
● Intended for theming use, large chunks of custom functionality
should be part of a custom module
● Better organization for development, better performance
for production
2. Adds an automation layer where Drupal
doesn’t have one OOTB

21. elevatedthird.comelevatedthird.com
DRUPAL + JS BUILD TOOLS
● Improve minification and concatenation
● More efficient workflows with watch and sourcemaps
3. Should augment, not replace, existing Drupal
functionality
4. Bower vs. Libraries API
● Does your Drupal installation need to be aware of the plugin you’
re adding?
● Bower dependencies can be concatenated with theme assets

22. elevatedthird.com
THEME ASSET STRUCTURE
● Treat all front end
assets in a similar way
● Focus on semantically-
named files
● Compile to a single,
optimized, production-
ready asset

23. elevatedthird.comelevatedthird.com
TRANSFORMATIONS
● Concatenate
● Sourcemaps
● Minify
● Livereload
JS
● Concatenate
● Sourcemaps
● Minify
● Livereload
● Compile Sass
● Add autoprefixer
Sass

24. elevatedthird.comelevatedthird.com
PULLING IT TOGETHER
● Use drupal_add_js() and
drupal_add_css() to add assets
● Use conf variables in settings.php
for added control

25. elevatedthird.com
LIVE
DEMO

26. elevatedthird.comelevatedthird.com
Q&A
TIME FOR