What is this? From this page you can use the Social Web links to save Top Tools to build a web 2.0 app from scratch: the ultimate guide. to a social bookmarking site, or the E-mail form to send a link via e-mail.

Social Web

E-mail

E-mail It
May 17, 2007

Top Tools to build a web 2.0 app from scratch: the ultimate guide.

Posted in: php, javascript, css, design, web 2.0

You have a brilliant idea and want to bring it to life through a nice web 2.0 application on the web. In this guide, we suppose you already have access to a dedicated or shared server. For this example I’m supposing your web server is running a debian linux distribution (like sarge). There are plenty of web hosting companies and it’s not the goal of this article.

So here are all the steps to ensure the best application:

1 - Install the system

If you have a ready to use system (shared hosting server) just skip this part go to the next step.

The best coding ecosystem for me is the LAMP one which composes of PHP 5 for coding, Apache 2 web server and Mysql 5 database. It’s open source, reliable and you’ll find plenty of support, forums, and discussions to solve almost any issue you could encounter on the web. If you haven’t these already installed on your system (in case of a dedicated server usually) just follow the very good guides you find on the Internet:

Don’t forget security issues if you have your own dedicated server. Install updates and a reliable firewall like iptable.

2 - Choose an application development framework

When you use an existing framework to build up your application . There are many advantaged of using a framework especially if you’re new to web programming , php, security, session handling, url rewriting, etc. These frameworks have everything built-in. It also speed up the coding process and even more it separate different functions so that you improve the coding using usually a MVC model.

  • My favorite is Code Igniter. Read the user guide, watch the tutorial videos and read the forums. You’ll find this framework very efficient.
  • You can use other frameworks like Symfony, Cakephp, etc.
  • You can find a complete list here.

The good thing is that you won’t need to use complex libraries like pear or write complex code for forms, security, sessions, etc. It’s all integrated in the framework. It’s all improved for web development. These tools have been tuned with web architects or designers issues in mind.

It basically separates the logic of the application (core coding) from the database (SQL Queries) and the final display template (HTML, etc.)

3 - Choose a AJAX library

There is no web 2.0 wihout ajax. To easily implement ajax you have several choices. Here is my list:

4 - Choose a javascript framework/library for nice effects

These libraries can contain also ajax functions. There are really powerful when you learn to use them.

  • Mootools is my favorite. It is a compact and modular, Object-Oriented javascript framework, designed to make the process of writing extensible and compatible code more efficient.
  • Jquery, a lightweight JavaScript framework that emphasizes the interaction between JavaScript and HTML.
  • Prototype, a JavaScript framework that provides an Ajax framework and other utilities.
  • Yahoo! UI Library, a set of utilities and controls, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.
  • Dojo Toolkit open-source Javascript toolkit.

5 - Choose a good integrated development environment

There are plenty of choices here:

  • I personally use Zend Studio even if it’s quite slow.
  • But you can compare it with the other tools.
  • You can also use simple or advanced text editors that usually integrate code highlighting for PHP.

6 - Always refer to good and recognized user guides and references

7 - Find nice CSS, DHTML, AJAX tricks and tutorials.

I recommend using these as example to inspire yourself. You should then adapt it to your needs and to what you want to achieve using the javascript library you chose before. Avoid using too many libraries on the same page.

Roundup techniques:

8 - Use tools to help web development and debugging

Design tools

Color tools: these tools will help you harmonize colors, choose them, test them etc.

Fonts: These resources provide lots of useful fonts (free or commercial).

Development tools

Browser Compatibility testing: This is really important as one very difficult aspect of web designing is too make sure every one is seeing it the way wanted to and if possible the sem way.

CSS optimization: Compress, tweak, improve your css.

Javascript optimization: Compress your javascript code to make faster to download.

Starting with these tools will considerably accelerate your developments. You can concentrate more on your own project instead of wasting time on recreating already nice existing implementations.

Return to: Top Tools to build a web 2.0 app from scratch: the ultimate guide.