Using Node and Grunt to create an awesome workflow

Slide 1

Slide 1 text

Using Node and Grunt to create an Awesome Workflow Vernon Kesner

Slide 2

Slide 2 text

Who is this guy? Keep it short, buddy.

Slide 3

Slide 3 text

Developer Advocate Ally Financial Inc.

Slide 4

Slide 4 text

What are we going to talk about?

Slide 5

Slide 5 text

First, let’s look at a few problems that we faced

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

“How can we create a more maintainable codebase?”

Slide 8

Slide 8 text

“How can we automate common tasks?”

Slide 9

Slide 9 text

“How can we make debugging easier?”

Slide 10

Slide 10 text

“How can we create   living documentation?”

Slide 11

Slide 11 text

Not every tool in the bag, but key parts of the foundation.

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Grunt.js Separate your custom tasks & configurations Organization matters http://www.thomasboyt.com/2013/09/01/maintainable-grunt.html

Slide 14

Slide 14 text

Solutions!

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Creating a more maintainable codebase Solution #1

Slide 17

Slide 17 text

Maintainability • jQuery UI Widget Factory • Linting, Testing and Style Guide • Handlebars templates, Sass & Compass Component based architecture

Slide 18

Slide 18 text

Reusability • HTML Conventions • Configurable components • Reusable layouts Separating concerns

Slide 19

Slide 19 text

Tooling focused on creating an efficient workflow Solution #2

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

• Rapid development of components & layouts • Live previews that can be developed quickly • Living Style Guide • Yo for scaffolding New and Enhancement efforts grunt local

Slide 23

Slide 23 text

An intelligent and simple build system Solution #3 http://www.ﬂickr.com/photos/stewf/191501992/

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Node and Grunt have allowed us to rapidly increase efficiency in every phase of development

Slide 26

Slide 26 text

Thanks! ! Twitter: @vernonk Email: [email protected] www.ally.com