As developers, we recognize when something can be automated or optimized. It begins with a nagging feeling, then develops into mild discomfort, and if left unremedied, grows into frustration and anger.
That's why I'm surprised at the lack of workflow optimization I see in most front-end application development projects. Time and time again I see boilerplate activities carried out manually over and over. So many of these brain-dead pursuits can be automated easily, saving countless hours and adding quality.
As humans, we've evolved a mechanism for dealing with this kind of overwhelming noise: Tune it out and go about our business. I understand the feeling, but I also know there's signal buried in the noise. It's worth getting to, and I'm here to help. Want to get some of that buttery goodness called efficiency in your front-end workflow? Read on.
It all starts with a build
Grunt has tons of plug-ins that will let you do just about anything you want, but simply set up what you need and move on. Sure, you can set up Grunt to ensure you're on the right branch, include all the Git contributors in the header comments, and create a pretty email describing the build -- but why turn this into a yak-shaving extravaganza? If you don't know where to start, then consider the following essentials.
Static code analysis
This is an excellent first step to save you hours of debugging time. A linter will sift through your code looking for syntax errors and common mistakes. Your IDE or text editor should be configured to do this so that you can get feedback as mistakes happen, but include it in the build anyway. In addition to looking at syntax, you can use linting tools to enforce code guidelines. This is particularly helpful to establish consistency when working with a team, but it's also a good way to keep yourself honest when working alone. Check out JSHint for an idea of how it looks and works. Linters, however, don't tell you if your program is working the way you want it to. For that, you need to write tests.
You're not writing clear, easily understandable code for you -- you're doing it for the person who comes in after you leave and has to pick up where you left off. The same goes for documentation, so be considerate. Remember, there's a selfish benefit, too, when working on longer projects and your memory of what you did early on fails you.
Minification, obfuscation, and concatenation
Now that your code is linted, tested, and documentation has been generated, it's time to optimize your app for the end-user. Minification and obfuscation will reduce your overall payload size, while concatenation will decrease the number of HTTP requests needed. The two together boost user experience by improving load times, which is critical for user retention on the Web.
Minification removes all unnecessary characters from your code, such as comments and extra white space. Next, obfuscation renames your identifiers to the bare minimum. I know you think
prepareTextForPosting is a nice, descriptive function name, but
sQ will do just fine for the interpreter. This can shave off quite a few bytes depending on the length of your identifiers.
mangle property set to
true. Since I'm using Grunt already, I'm using the concatenation plug-in built by the Grunt team.
Now stop reading this article and go assess your own front-end stack. Check out some of the links included and start playing with the technologies that are new to you. Lay down a strong foundation for your projects, so they can support you throughout the entire development cycle. Remember, it's less about the individual items you implement and more about attentiveness to your workflow. Even if you just set up Grunt and start linting your code, you'll be in much better shape than before -- and it will be much easier to adopt other optimizations.
This article, "Web app coders: Clean up your act!," was originally published at InfoWorld.com. Keep up on the latest developments in application development, and read more of Andrew Oliver's Strategic Developer blog at InfoWorld.com. For the latest business technology news, follow InfoWorld.com on Twitter.
This story, "Web app coders: Clean up your act! " was originally published by InfoWorld.