Using Node and Grunt to create an awesome workflow
-
Upload
vernon-kesner -
Category
Technology
-
view
1.221 -
download
0
description
Transcript of Using Node and Grunt to create an awesome workflow
Using Node and Grunt to create an
Awesome WorkflowVernon Kesner
Who is this guy?Keep it short, buddy.
Developer AdvocateAlly Financial Inc.
What are we going to talk about?
First, let’s look at a few problems that we faced
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
“How can we create a more maintainable codebase?”
“How can we automate common tasks?”
“How can we make debugging easier?”
“How can we create living documentation?”
Not every tool in the bag, but key parts of the foundation.
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
Grunt.js
Separate your custom tasks & configurations
Organization matters
http://www.thomasboyt.com/2013/09/01/maintainable-grunt.html
Solutions!
Creating a more maintainable
codebase
Solution #1
Maintainability
• jQuery UI Widget Factory
• Linting, Testing and Style Guide
• Handlebars templates, Sass & Compass
Component based architecture
Reusability
• HTML Conventions
• Configurable components
• Reusable layouts
Separating concerns
Tooling focused on creating an
efficient workflow
Solution #2
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.
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
• Rapid development of components & layouts
• Live previews that can be developed quickly
• Living Style Guide
• Yo for scaffolding
New and Enhancement effortsgrunt local
An intelligent and simple
build system
Solution #3
http://www.flickr.com/photos/stewf/191501992/
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
Node and Grunt have allowed us to rapidly increase efficiency in
every phase of development