Using Node and Grunt to create an awesome workflow
1 like1,526 views
The document discusses the challenges faced by a development team at Ally Financial and presents solutions using Node.js and Grunt to improve workflow and maintainability. It highlights the need for a maintainable codebase through component-based architecture, efficient tooling for testing and new development efforts, and an intelligent build system. Key features include live previews, automation of tasks, and separation of concerns to enhance productivity and debugging capabilities.
Using Node and Grunt to create an awesome workflow
- 1. Using Node and Grunt to create an Awesome Workflow Vernon Kesner
- 2. Who is this guy? Keep it short, buddy.
- 4. What are we going to talk about?
- 5. First, let’s look at a few problems that we faced
- 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. “How can we create a more maintainable codebase?”
- 8. “How can we automate common tasks?”
- 9. “How can we make debugging easier?”
- 10. “How can we create living documentation?”
- 11. Not every tool in the bag, but key parts of the foundation.
- 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. Grunt.js Organization matters Separate your custom tasks & configurations http://www.thomasboyt.com/2013/09/01/maintainable-grunt.html
- 14. Solutions!
- 16. Solution #1 Creating a more maintainable codebase
- 17. Maintainability Component based architecture • jQuery UI Widget Factory • Linting, Testing and Style Guide • Handlebars templates, Sass & Compass
- 18. Reusability Separating concerns • HTML Conventions • Configurable components • Reusable layouts
- 19. Solution #2 Tooling focused on creating an efficient workflow
- 20. 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.
- 21. 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
- 22. New and Enhancement efforts grunt local • Rapid development of components & layouts • Live previews that can be developed quickly • Living Style Guide • Yo for scaffolding
- 23. Solution #3 An intelligent and simple build system http://www.flickr.com/photos/stewf/191501992/
- 24. 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
- 25. Node and Grunt have allowed us to rapidly increase efficiency in every phase of development