Efficient, Error-Free Drupal Development with JS Build Tools

  • Published on
    22-Jan-2018

  • View
    1.355

  • Download
    0

Transcript

  1. 1. Efficient, Error Free Drupal Development with JS Build Tools
  2. 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. 3. elevatedthird.com DISCLAIMER Error free refers to getting new members of your team up and running with the same tools. We wont be focusing on testing in any form.
  4. 4. elevatedthird.com OUR DEPENDENCY MANAGEMENT JOURNEY Dependency management from ad- hoc Ruby to Javascript
  5. 5. elevatedthird.comelevatedthird.com DISCOVERING NEW FRONT END TOOLS We found and incorporated a lot of Ruby-based tools like Sass (and its 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. 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. 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. 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. 9. elevatedthird.com TOOLS THE
  10. 10. elevatedthird.comelevatedthird.com THE LANGUAGE: NODE JavaScript on the server Can be used for full web applications but were just using it for the developer tools Node vs io.js Node 4.0 released Use NVM to upgrade
  11. 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. 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. 13. elevatedthird.com EXAMPLE PACKAGE.JSON
  14. 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. 15. elevatedthird.comelevatedthird.com HOW GULP WORKS Plugins ( each plugin does one thing well ) Streams Tasks
  16. 16. elevatedthird.com EXAMPLE GULPFILE.JS
  17. 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. 18. elevatedthird.comelevatedthird.com BOWER WORKFLOW 1. Start a Project 2. Add New Package 3. Install All Dependencies For Project
  19. 19. elevatedthird.com INTEGRATION DRUPAL
  20. 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 doesnt have one OOTB
  21. 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. 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. 23. elevatedthird.comelevatedthird.com TRANSFORMATIONS Concatenate Sourcemaps Minify Livereload JS Concatenate Sourcemaps Minify Livereload Compile Sass Add autoprefixer Sass
  24. 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. 25. elevatedthird.com LIVE DEMO
  26. 26. elevatedthird.comelevatedthird.com Q&A TIME FOR