Efficient, Error-Free Drupal Development with JS Build Tools
3 likes1,485 views
Elevated Third is a Denver-based digital marketing agency specializing in efficient Drupal development utilizing JavaScript build tools. The document discusses the agency's journey through dependency management, transitioning from Ruby tools to a more automated and scalable JavaScript-based system with tools like Node, npm, and Gulp. The enhanced workflow aims to improve developer onboarding, optimize front-end assets, and maintain better organization for their projects.
Efficient, Error-Free Drupal Development with JS Build Tools
- 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 [email protected] Tanner Langley Front End Developer [email protected]
- 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
- 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
- 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
- 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
- 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