10 Ways to Cut Down Web Development Time

In today’s development environment: faster is better. Present-day buzzwords and buzz terms like “rapid application development“, “Agile“, and “Asynchronous JavaScript and XML” (we can’t even wait for web pages reload anymore) gives you an insight of the fast-paced world we live in. But getting things done rapidly doesn’t mean working harder – just working smarter.

In this article, you’ll find 10 general, time-saving tips to cut down on your development time.

1. Use frameworks

Frameworks abstract regular code to provide you a structure and foundation for developing web applications. A classical example of a framework is Rails, a web application development framework for the Ruby language. By providing pre-made packages of code (for example – user input validation methods) – not only do you save time from writing your own code in Ruby – but you’re also assured that the packages have already been tested and inspected by other developers, saving you trouble in extensive testing as well as potential bugs due to the lack of testing.

The same goes for JavaScript frameworks like MooTools; it saves you time by providing you methods that have been already been widely tested by the core developers and the community for cross-browser support. Other options for client-side scripting frameworks include jQuery, Prototype JS, and YUI. If you want to use a less mainstream JS framework, check out this list of promising JavaScript frameworks.

For server-side frameworks: check out CakePHP, CodeIgniter, Zend, or symphony (for PHP), or if you like writing in Microsoft-supported languages like VB and C#, consider the .NET Framework. You can even use CSS frameworks like 960 Grid or BluePrint to standardize and rapidly write your styles and web page structure.

2. Use an Integrated Development Environment

Yes, you can create web applications and web pages using a simple text editor like Notepad and an FTP, but I think most would agree that it’s not the most time-efficient way of developing complex and robust web projects. An Integrated Development Environment (IDE) is an application that brings you all the tools you’ll need to create and manage even the largest web projects. IDE’s vary in features, but some common features include:

• project management and team collaboration features
• debugging and diagnostic features
• syntax suggestions and auto-fill (it guesses what you’re trying to write)
• syntax highlighting
• built-in FTP that syncs your local and remote files

“IDE” is a fancy term that some might be unfamiliar with, but most have probably heard of Adobe Dreamweaver. Dreamweaver can be considered as an integrated development environment because it has the features above and helps you write code faster (it’s typically used for front-end authoring but it supports server-side languages like PHP and ASP.NET). There’s plenty of IDE’s out there, and all you’ve got to do is pick one for you (or your team).

Some popular, fully-featured IDE’s include Eclipse, Komodo IDE, NetBeans, Visual Studio, and Aptana Studio. If you’re still intent on just using a text editor at least check out this collection of text editors for coders.

3. Modularize (appropriately)

Modularization is a key practice for creating maintainable, complex and scalable applications. It essentially means authoring code in components rather than big files. Modularizing has its initial time costs (since you have to put more careful thought in the design of the file structure), but you can save time in the end when you need to change certain components or scale your application.

Modularization also keeps bugs contained; if something breaks down, you will have an easier time finding the particular issue. But too much modularization can lead to bloated code and too many unnecessary include‘s that can slow down your application drastically. So try to hit the sweet spot between too much and not enough.

Some modularization patterns include the MVC and PAC model.

4. Debug front-end issues more effectively with browser tools

Nothing’s worse than cross-browser incompatibilities and rendering issues. It can drive you nuts and wanting to destroy something in frustration. But using in-browser debugging tools makes finding and diagnosing front-end issues much quicker and more efficient.

Firebug and Web Developer are essential time-savers and is a staple amongst front-end web developers. Firebug can easily inspect the DOM to see how things work, tweak CSS/HTML/JS on-the-fly, debug and profile your JavaScript, and help you promptly find what’s causing your scripts to break. Web Developer gives you access to useful tools like being able to click on an element to see what style declarations affect it and allows you to quickly disable JavaScript and CSS to see how your pages work without either one disabled by the user.

If you need to debug in Internet Explorer, check out the IE Developer Toolbar which is similar in function to Firebug and Web Developer. Some more in-browser tools for IE that can help you cut down on debugging in IE can be found here.

5. Code for reusability

If you find yourself doing the same thing over and over again, chances are you should rethink your code’s structure. Consider learning about common design patterns that help you create methods, functions, and objects that are flexible and reusable. For example, if you frequently connect to a database, you may want to create a Database Access Class to handle connection, querying, and rendering of data.

6. Collaborate and track project status online

Chances are – you don’t work alone. Whether you’re working as a development team or working for someone (perhaps managers or clients) – you should take advantage of collaborating and tracking your project’s status on the web. The less time you spend on administrative tasks and being stuck in endless meetings (or worse – traveling for a face-to-face meet) – the more time you have towards writing code.

Tools like Basecamp, Lighthouse, and activeCollab give you a “one stop shop” for team collaboration and keeping track of the project’s status. You can set milestones and project goals in your collaboration application – so that everyone’s always in sync, saving you time from answering frequent emails and status-check meetings asking you how everything’s going. These tools also help you prioritize things and keeps things organized and documented in a centralized location.

7. Automate code formatting and standardization

You need to standardize all of your code’s formatting, not only because it’s good practice, but also so that you can quickly understand your code when you go back to them later on. Automated code formatting gives you the ability to format your code with a click of a button instead of going line by line and making sure you’re following your authoring guidelines consistently. Automation also reduces the risk of errors due to manual correction.

There are many tools out there to help you do the job, and many are even web-based. For CSS, a popular open source solution is CSSTidy (Clean CSS is an online version based on CSSTidy). For HTML, there’s HTML Tidy.

For scripts, there’s PHP Source Code Formatter, Ruby Script Beautifier, and Code Beautifier Plus (which formats C#, ActionScript, and Java).

8. Invest time in requirements-gathering and planning phases

An ounce of prevention is worth a pound of cure. Though some schools of thought emphasize on not wasting too much time on planning out the path from start to completion – it’s still essential to appropriate enough time in making sure you’ve gathered all the information you need to know. Not committing time to requirements-gathering can also lead to feature creep because of unanticipated feature requirements.

9. Use code that’s already written

There’s no need to re-invent the wheel. If you’re thinking of a particular feature that you’ve seen somewhere else, chances are someone’s already written it for you (well, not just for you, but for all of us). For PHP, PHP Classes Repository provides a collection of classes and scripts that you can use and download.

Hot Scripts provides scripts in many languages. If you want code snippets, you can check out devSnippets. Beware, though: this only really works when you know what you’re doing and have enough experience to tell the difference between good and bad code.

Otherwise, you might find yourself with a buggy or poorly-written end-product.

10. Have fewer features

You have to evaluate the need for certain web application features and if the time-investment of building in the feature is worth it. Do your users really need a custom RSS feeds for categories of an infrequently updated CMS? Do you really need to have a style switcher that detects where the user is geographically?

Make feature incorporation an uphill battle; features that don’t help the end-user in any way not only costs unneeded development time, but also complicates the interface.

What’s your tip?

Share your thoughts and your own methods of saving development/production time with us in the comments.

Related content

• Awesome Things That Firefox’s Web Developer Extension Can Do
• Web-Based Tools for Optimizing, Formatting and Checking CSS
• Cheat Sheets for Front-end Web Developers
• Add Ratings, Polls and Reviews in Minutes Without Programming
• 10 Promising JavaScript Frameworks