• What?
  • Who?
  • Contact Jonathan Jeter
  • Privacy Policy

Jonathan Jeter

Director of Application Development

  • Jonathan Jeter on Google+
  • Jonathan Jeter on Facebook
  • Follow Jonathan Jeter on Twitter
  • Jonathan Jeter on LinkedIn
  • Jonathan Jeter's rss feed
Home Web Development JavaScript Managing a Large Front-End Project with Automated Build Tools

Managing a Large Front-End Project with Automated Build Tools

February 2, 2013 By Jonathan Jeter Leave a Comment

by kperch at HTML5 Texas Conference in Austin, TX

How do you manage a huge web application’s front-end when you have a diverse team of programmers, and javascript is not a strong suit for all of them? How do you handle both new and old code from multiple developers, and make sure only quality code makes it into your repos? Automated tools such as Yeoman and Grunt are not just for packaging your web project in a performant and clean package. They also allow you to enforce code quality and consistency through automated quality checking, testing, and beautification. This talk will go over the case study of a large web application in need of a refactor and test suite, and how tools such as Yeoman and Grunt allow you to implement a plan to bring projects like these back from the brink, without losing your sanity in the process.

Managing a Large Front-End Project with Automated Build Toolsgruntjs.com (runs on node) – you just need JSON and grunt commands

works with growl

pulls everything together, combines, concatenates and minifies.

styles.stylus combines css

You can set up watch tasks and it will check for errors as you code, but be careful because it can slow down your system if you’re trying to watch too much.

gruntjsIt has tons of plugins for jade, Markdown, YAML, Browser Refresh, Templates, Handlebar, dot, Compass, LESS, SASS, Stylus, Mocha, Jasmine, Beautifier, JSHint/Lint, Appcache Generation and more. Available on NPM.

How does this help with existing projects? Educate – Automate – Enforce

Educate team members about project standards and patterns

  • At a team meeting, set the agenda in advance
  • Bring reasons and support for views on standards
  • Put it in writing, put it somewhere public to your team

Automate common build steps and quality control

  • Even if you don’t use grunt, just automate it!
  • It’s important that everyone uses the same process

Use the new automation tools to enforce the standards

  • Automated processes = easy commit hooks
  • Peer reviews allow for team accountability

Case Study – what we have

  • Large legacy project
  • multiple js files

what we want

  • modular js

Step 1 – Educate

  • get the team involved
  • JSHint – promote cleaner JS
  • Module system/automated build

Step 2 – Automate

  • Builds – concatenation, minifications
  • Quality Control – JSHint, Unit test runner

Step 3 – Enforce

  • Automation – easy commit hooks
  • peer reviews

Take it in stages

  • Enforce quality assurance on new files at first
  • Refactor, then add to JSHint Lint
  • Take it one step at a time

Automation is a tool

Automation helps, but it doesn’t substitute for proper planning and framework

grunt is ready and simpler to use than yeoman

You can do automated testing against the dom using browserly

Related articles
  • Good & Bad Patterns in Development and Operations
  • Automating tasks with Grunt.js
  • Precognitive Build Servers
  • Tips: Keep your javascript code under control

Tell someone about this:

  • Email
  • Print
  • Twitter
  • LinkedIn
  • Facebook
  • More
  • Reddit
  • Pocket
  • Tumblr

Like this:

Like Loading...

Related

Filed Under: JavaScript, MVC, Web Development Tagged With: accountability Case Study, Automate Builds, Automate common build, Automated Build Tools, automated testing, Automated tools, Browser Refresh, browserly Related articles, Build automation, case study, cleaner JS Module, code quality, Code refactoring, conference notes, diverse team, easy commit hooks, Enforce Automation, Enforce Educate team, framework grunt, growl pulls, grunt commands works, Grunt.js Precognitive Build, HTML5 Texas, HTML5 Texas Conference, huge web application, javascript code, js files, JSHint Lint, Large Front-End Project, large web application, minifies. styles.stylus, modular js, multiple developers, new automation tools, old code, Operations Automating tasks, process. gruntjs.com, project multiple js, project standards, quality assurance, quality checking, quality code, quality control, Software quality, strong suit, team meeting, team member, team members, test suite, Texas conference, time Automation, tool Automation, Unit test runner, Unit testing, web app, Web application, web project

About Jonathan Jeter

Jonathan Jeter has been creating websites since 1997. He is currently Director of Technology Services and Digital Development at TracyLocke, a shopper marketing agency. You can follow him @mywebthoughts, on LinkedIn or connect on Google+.

What do YOU think? Let me know...Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Stuff I Like to Talk About:

  • Business
  • Digital Imaging
  • Internet Marketing
    • Email Marketing
    • SEM / Paid Search
  • Life
  • Other Stuff
    • Health
    • Taekwondo (TKD)
  • Sports
    • Football
  • Technology
    • Augmented Reality
    • Awesome or Scary?
    • Marketing Technology
      • Data / Analytics
      • Omnichannel
    • Mobile
      • Android
    • Virtual Reality
  • User Interface / User Experience Design
  • Web Development
    • Browsers
    • CSS
    • Front-End Development
    • Google+ (Google Plus)
    • HTML5
    • JavaScript
    • jQuery
    • Mobile
    • MVC
    • Responsive Design
    • SEO
    • Social Media
    • UI/UX
    • WordPress

HTML

  • HTML Entities

JavaScript

  • MEAN.js

My Sites

  • Head Turning Media
  • Jonathan Jeter (Brand Yourself)
  • My Humor

Online Experts

  • Bryan Eisenberg
  • Danny Sullivan
  • Duane Forrester
  • Keith Brown
  • Louis Gray
  • Matt Cutts

UI / UX

  • Jared Spool
  • Paul Jeter
FreshBooks
Genesis Framework for WordPress Premise Landing Pages Made Easy

Most Popular

  • Contact Jonathan Jeter
  • Verizon Wireless – My Favorite Mobile Provider
  • Social Farming?
  • Exploring Standard Ad Unit Sizes: Google AdSense…
  • In Data We Trust
  • A Brief History of the Complete Redesign of Google…
  • Mike Lee – AARP: Designing a Strategy for…
  • Who?
  • What?
  • Exploring Standard Ad Unit Sizes: Google AdSense 300…

Copyright © 2025 Jonathan Jeter

 

Loading Comments...
 

    %d