Simplify and Expedite Front-end Web Development

February 24th, 2012 by Kyle Kellogg

Front-end web development projects can be difficult at times, but they don’t have to be. Every project is unique and each brings new and interesting challenges. These challenges are frequently presented by the very technologies we choose or must use on the aforementioned projects. Although using them is a great way to become more skilled, sometimes they can stand in the way of the project at hand. Mitigating these challenges through a process which can be repeated serves to not only improve the project and it’s schedule, but also your work.

Many, if not all, of the examples that follow are technologies or methodologies that members of Infrared5 have used before, but they’re in no way a comprehensive list of what is available or a recommendation as to what to use. Figuring out what works for you, your team, and the project is an important piece of this repeatable process.

The most important thing you can do is to plan ahead. That may seem obvious, but it can be easy to overlook doing it properly. Planning doesn’t have to be absolute and it doesn’t have to be too granular, but the more you plan for the more you can prepare for. Have you had things go wrong in the past? Make sure you account for similar situations in any new plans you create! You’ll never be able to perfectly account for everything, but you can account for most things.

Decide which technologies you’ll use. Remember, use the right (or best available) tool for the job. Think about what your browser, device, and screen size support will be like for the project. What javascript framework or toolkit, like jQuery or Dojo, will you use, if any? Will you be supporting HTML5 and CSS3? Will you be using any external libraries at all? All of these considerations will be important throughout the project and it is best to decide upon them early and stick with them in order to maximize your efficiency.

Start with something and build up from there. You can utilize HTML5 BoilerplateBootstrap, or whatever other starting point you feel comfortable with. You can use Initializr help set up an entire project, if that’s what makes you feel comfortable. Personally, I like to start with just the 1140 CSS Grid and jQuery.

Have your content and designs ready before you need them. Also make sure your designs are done based on whatever grid you’ll be using for your layout so that you don’t have to retrofit the design to the layout. Getting a running start on a project is all well and good, but breaking the up the development with blockades can make everything take longer than it has to.

You’ve got lots of technology at your disposal, so make it work for you. Your layout grid should serve as a flexible base upon which you can build without constraint. Lean on it’s support for your layout needs when you can, including responsive resizing. Use LESS or Scss/Sass to style faster and in a more organized way with less repetition. Break your javascript up into self-contained, self-cleaning, interconnected modules to help reduce the chances of memory leaks and unexpected errors. Document your javascript as you go so that everyone on the project can easily keep informed of what’s going on. Finally, use an IDE that helps you be more efficient. For me that’s Espresso, but for other developers at Infrared5 it’s Sublime Text 2.

I want to expand upon the modules I mentioned in the previous paragraph. These modules allow you to break functionality into smaller pieces, focus on them, and then combine as a whole to get the job done. Think of it as a loose implementation of feature-driven development. This allows your code to be more organized, more readable, kept in context, and focused on in a feature-by-feature way which, for me, helps development get done quicker.

Another piece of the development process I cannot stress enough is to use version control software and use it often. I prefer git, because Keith Peters turned us all on to this process which has helped reduce conflicts while working with a team. Use whatever you like though, because at the end of the day it’s all so that you don’t lose any work you’ve done.

Separate your development cycles so that your brain isn’t trying to do too many things at once. Do your development, then any and all enhancements, and then whatever bugs there are. This process may need to go through several iterations, becoming something like the spiral model.

Lastly, wrap it up by condensing and publishing a final product. Minify and concatenate your javascript and css, obfuscate if you must, in order to wring every last drop of speed you’re able to get out of the browser. Publish whatever documentation you’ve built up for client use, if applicable. Hand it off. See? Not so difficult after all.

Leave a Reply