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.
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
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
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
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
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
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