Using Node and Grunt to create an awesome workflow

1,468 views

Published on

At Ally, we used Node.js along with Grunt, Yo and Bower to develop a custom developer toolset for Ally's front-end development teams. The toolset had to be crafted in a way that allowed us to take a forward approach while still supporting the use of some legacy code and not-so legacy code. In the end, we created a toolset that separated new and on-going development tasks, gave living documentation and usage examples, and also allowed us to focus on maintainable and testable code. In this talk, you will get an overview about problems we tackled as well as solutions we found and approaches to creating a more maintainable codebase.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,468
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Using Node and Grunt to create an awesome workflow

  1. 1. Using Node and Grunt to create an Awesome Workflow Vernon Kesner
  2. 2. Who is this guy? Keep it short, buddy.
  3. 3. Developer Advocate Ally Financial Inc.
  4. 4. What are we going to talk about?
  5. 5. First, let’s look at a few problems that we faced
  6. 6. Our problems… • Pretty big team (around 30 in development) • Tightly bound code • Enhancement work & New Projects going on at the same time; including rolling maintenance • Support of legacy, kinda-legacy and new code
  7. 7. “How can we create a more maintainable codebase?”
  8. 8. “How can we automate common tasks?”
  9. 9. “How can we make debugging easier?”
  10. 10. “How can we create 
 living documentation?”
  11. 11. Not every tool in the bag, but key parts of the foundation.
  12. 12. Importance of the full-stack being JavaScript… • Back-end folks under a completely different team and in a different space • Needed tooling that could be managed by our front-end teams
  13. 13. Grunt.js Organization matters Separate your custom tasks & configurations http://www.thomasboyt.com/2013/09/01/maintainable-grunt.html
  14. 14. Solutions!
  15. 15. Solution #1 Creating a more maintainable codebase
  16. 16. Maintainability Component based architecture • jQuery UI Widget Factory • Linting, Testing and Style Guide • Handlebars templates, Sass & Compass
  17. 17. Reusability Separating concerns • HTML Conventions • Configurable components • Reusable layouts
  18. 18. Solution #2 Tooling focused on creating an efficient workflow
  19. 19. Two Unique Workflows 1. Testing cycle, hot fixes, etc. 2. New and Enhancement efforts Both workflows use common components but the approach is distinctly different.
  20. 20. Testing cycle, hotfixes, etc. grunt preview • Reverse proxy against 25+ environments • Live data sources • Ability to localize any asset or data response • Selective compilation • Source maps to aid in debugging
  21. 21. New and Enhancement efforts grunt local • Rapid development of components & layouts • Live previews that can be developed quickly • Living Style Guide • Yo for scaffolding
  22. 22. Solution #3 An intelligent and simple build system http://www.flickr.com/photos/stewf/191501992/
  23. 23. Intelligent build system Automate as much as possible • Selective build for faster build times • Several steps managed by one main task • • JSHint, QUnit, Uglify, Sass, and image optimization Dependencies • Sass • JS with Uglify
  24. 24. Node and Grunt have allowed us to rapidly increase efficiency in every phase of development
  25. 25. Thanks! ! Twitter: @vernonk Email: vernonkesner@gmail.com www.ally.com

×