using node and grunt to create an awesome workflow
DESCRIPTION
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.TRANSCRIPT
![Page 1: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/1.jpg)
Using Node and Grunt to create an
Awesome WorkflowVernon Kesner
![Page 2: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/2.jpg)
Who is this guy?Keep it short, buddy.
![Page 3: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/3.jpg)
Developer AdvocateAlly Financial Inc.
![Page 4: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/4.jpg)
What are we going to talk about?
![Page 5: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/5.jpg)
First, let’s look at a few problems that we faced
![Page 6: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/6.jpg)
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
![Page 7: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/7.jpg)
“How can we create a more maintainable codebase?”
![Page 8: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/8.jpg)
“How can we automate common tasks?”
![Page 9: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/9.jpg)
“How can we make debugging easier?”
![Page 10: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/10.jpg)
“How can we create living documentation?”
![Page 11: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/11.jpg)
Not every tool in the bag, but key parts of the foundation.
![Page 12: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/12.jpg)
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
![Page 13: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/13.jpg)
Grunt.js
Separate your custom tasks & configurations
Organization matters
http://www.thomasboyt.com/2013/09/01/maintainable-grunt.html
![Page 14: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/14.jpg)
Solutions!
![Page 15: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/15.jpg)
![Page 16: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/16.jpg)
Creating a more maintainable
codebase
Solution #1
![Page 17: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/17.jpg)
Maintainability
• jQuery UI Widget Factory
• Linting, Testing and Style Guide
• Handlebars templates, Sass & Compass
Component based architecture
![Page 18: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/18.jpg)
Reusability
• HTML Conventions
• Configurable components
• Reusable layouts
Separating concerns
![Page 19: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/19.jpg)
Tooling focused on creating an
efficient workflow
Solution #2
![Page 20: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/20.jpg)
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.
![Page 21: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/21.jpg)
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
![Page 22: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/22.jpg)
• Rapid development of components & layouts
• Live previews that can be developed quickly
• Living Style Guide
• Yo for scaffolding
New and Enhancement effortsgrunt local
![Page 23: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/23.jpg)
An intelligent and simple
build system
Solution #3
http://www.flickr.com/photos/stewf/191501992/
![Page 24: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/24.jpg)
Intelligent build system
• 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
Automate as much as possible
![Page 25: Using Node and Grunt to create an awesome workflow](https://reader033.vdocuments.net/reader033/viewer/2022052601/558c8ad8d8b42a5c678b45cf/html5/thumbnails/25.jpg)
Node and Grunt have allowed us to rapidly increase efficiency in
every phase of development