efficient, error-free drupal development with js build tools
TRANSCRIPT
Efficient, Error FreeDrupal Developmentwith JS Build Tools
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 SwitzerDevelopment Director
elevatedthird.com
Tanner LangleyFront End Developer
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.
elevatedthird.com
OUR DEPENDENCY MANAGEMENT JOURNEY
Dependency management from ad-hoc Ruby to Javascript
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
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
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
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
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
elevatedthird.comelevatedthird.com
PACKAGE MANAGEMENT: NPM
● Node's package manager
● Manage dependencies via JSON
● Easily manage from command line
● Large library of node packages
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
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
elevatedthird.comelevatedthird.com
HOW GULP WORKS
● Plugins ( each plugin does one thing well )
● Streams
● Tasks
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
elevatedthird.comelevatedthird.com
BOWER WORKFLOW
1. Start a Project
2. Add New Package
3. Install All Dependencies For Project
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
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
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
elevatedthird.comelevatedthird.com
TRANSFORMATIONS
● Concatenate
● Sourcemaps
● Minify
● Livereload
JS
● Concatenate
● Sourcemaps
● Minify
● Livereload
● Compile Sass
● Add autoprefixer
Sass
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
elevatedthird.comelevatedthird.com
Q&ATIME FOR