Web Development Best Practices

Choosing a Technology Framework

Does it really matter if you use ASP.NET MVC, Struts 2, Yii, or Rails? Well it might, but for many websites these modern frameworks are just as competitive as the next. Use the stack that is most appropriate for your customer’s situation and is the best choice at the time. Since this is the real world, it will probably change a couple of years in the future.

Leverage Community Extensions

Each framework out there has libraries of modules, extensions or plugins that enhance functionality and provide features that would you otherwise would need to write yourself. If it exists, and it’s in good shape, don’t write it yourself, leverage existing extensions that are appropriately licensed for your project.

Future Proof your URLs

It no longer makes sense to have a web site with extensions, be it .html, .php, .jsp, or .whatever you can think of. Arstechnica even created their own .ars, for no reason that I could tell. Yes the web started with .html because websites were simply serving static files, but that is no longer relevant anymore.

If you build a website with .jsp as the suffix to all URLs, and then a couple of years later your boss wants to re-write the website in python, does that mean you change all URLs to be .py, and setup mass url re-writing schemes to handle the old URLs? No, this would be a nightmare. Protect your future self by completely leaving the actual technology used to build the website outside of the URL.

Another bonus is that these URLs also end up being more SEO friendly!

Use a JavaScript Framework (maybe)

If you are building an AJAX heavy website such as GMail or Facebook, use a JavaScript framework. This is not relevant for many sites that simply use JavaScript to provide some enhanced functionality, but for websites that are heavily dependent upon JavaScript and simply cannot function without it.

I’m not talking about jQuery or Prototype, while those are good libraries that abstract the differences between browsers and provide easy to use functions, they are not built as a comprehensive framework. I’m suggesting you use a framework like JavaScriptMVC, SproutCore, or Spry. These frameworks can be used in tandem with jQuery, but go much farther in helping you organize and control your JavaScript code.

Watch a demo video of what JavaScriptMVC can do for you.

Google Hosted jQuery

Google provides hosting for many of the most popular JavaScript libraries. I’m a big fan of jQuery so I’m going to show you how to use Google’s hosted version of jQuery and thereby removing resources from your web server and speeding up site performance.

Performance can be increased because your user is going to download the jQuery file from Google’s CDN network and not from your server. Also, it could be even faster if the user visited another website that also uses Google’s hosted jQuery. If that is the case then your user won’t need to download it again and will use the exactly same cached version.

There are two ways to do this.

The fastest and simplest is to link directly to the Google’ hosted jQuery file:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

The second approach has more features but there is a slight delay while the jsapi loads the correct version of jQuery. If you want the absolute best performance use the first version.

1) Signup to get your own API key

2) Add the following code to your layout:

<script type="text/javascript" src="http://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");

  google.setOnLoadCallback(function() {
    // Put you init code here instead of using $(document).ready()
  });
</script>

You can also specify the latest version of the 1.4 branch:

google.load("jquery", "1.4");

Ruby Subversion Bindings

Subversion has bindings for a variety of languages: Java, Perl, Python and Ruby. Of these I am most interested in the Ruby bindings as I’m building a Rails application. Unfortunately the documentation is completely lacking and bits of it are scattered throughout the web. This is an attempt to provide the code and how-to for the most common tasks.

Before we get to the code, validate you have the Ruby Subversion bindings installed correctly by running irb from a terminal:

irb(main):001:0> require ‘svn/client’
=> true

Onto the source code. Start it off by including the required svn modules:

require "svn/core"
require "svn/client"
require "svn/wc"
require "svn/repos"

Then setup the context with your subversion credentials:

ctx = Svn::Client::Context.new()
ctx.add_simple_provider
ctx.auth_baton[Svn::Core::AUTH_PARAM_DEFAULT_USERNAME] = 'username'
ctx.auth_baton[Svn::Core::AUTH_PARAM_DEFAULT_PASSWORD] = 'password'

Now you can run any of the following commands on a remote subversion repository.

SVN Info

repos_uri = 'http://svn.website.com/project/trunk'
revision = 50
begin
  ctx.info(repos_uri, revision) do |path, info|
    puts("Url: #{info.url}")
    puts("Last changed rev: #{info.last_changed_rev}")
    puts("Last changed author: #{info.last_changed_author}")
    puts("Last changed date: #{info.last_changed_date}")
    puts("Kind: #{info.kind}")
  end
rescue Svn::Error => e
  # catch a generic svn error
  raise "Failed to retrieve SVN info at revision " + revision.to_s
end

SVN Checkout

repos_uri = 'http://svn.website.com/project/trunk'
output_dir '/home/billy/project_name'
revision = 50
begin
  ctx.checkout(repos_uri, output_dir, revision.to_i, nil)
rescue Svn::Error::CLIENT_UNRELATED_RESOURCES => e # revision doesn't exist
  raise "No such revision " + revision.to_s + " at " + repos_uri
end

SVN Log

repos_uri = 'http://svn.website.com/project/trunk'
ctx.log(repos_uri, 0, 'HEAD', 0, true, nil) do |changed_paths, rev, author, date, message|
  puts("Revision: #{rev}")
  puts("Author: #{author}")
  puts("Date: #{date}")
  puts("Message: #{message}")
  puts("---------------------------")
end

SVN List

repos_uri = 'http://svn.website.com/project/trunk'
ctx.list(repos_uri, "HEAD") do |path, dirent, lock, abs_path|
  if !path.blank?
    puts("Path: #{path}")
  end
end

That should get you started with the ruby bindings. If you want to know how to do anything else let me know in the comments.

Debugging Form Errors in symfony 1.3+

Symfony 1.3 (or symfony 1.4) provides an incredibly helpful feature to help debug forms. This new feature is included in the developer toolbar and shows valuable information about the forms on the page. To access the detailed form information, click on the view button, click on the template or partial that the form is in, and then click to expand the form. It lists each form widget and if any errors for a given widget exist they are shown right under it. Errors are also highlighted to make them easy to spot.

The symfony debug toolbar will look like this when there is a validation error in one of the forms on the current page. This is one of the most incredibly useful features I’ve seen and greatly improves productivity while building forms in the symfony framework. Congratulations to the symfony developers who came up with this tool!

Have symfony 1.1 or 1.2? read catch symfony form errors.

What Will Web Development Look Like in 5 Years

Developing applications for the web has changed significantly over the last 5 years. Since 2005 the term AJAX has been coined, Ruby on Rails is now an open source web application framework, jQuery was created and has subsequently revolutionized JavaScript development, and now HTML5 is the top buzzword of the day. I believe the next 5 years will hold just as many improvements for web developers.

I foresee a new framework will be created to make developing fully interactive AJAX applications as easy as it is to write current MVC applications. Current frameworks like Ruby on Rails and Symfony provide everything you need to develop a modern application without having to build plumbing infrastructure; however, they do not provide nice components for interactive applications. In addition to a robust server core, this new framework will have a client side JavaScript component that simplifies the process of building interactive web 2.0 applications. Some critical components would be:

  • Form Validation. Libraries do exist to validate forms in JavaScript, but they don’t integrate with the server side form validation. In this new framework you won’t have to write form validation code twice.
  • Paginated Lists. Almost all web applications have at least one page where data needs to be searched and listed with pagination. We need to have this same functionality in JavaScript to skip a full page reload and provide local caching of the results.
  • Animation Library. While script.aculo.us and jQuery have made simple animations and visual effects much easier to do, I believe we can go even farther. Web applications also need to gain that fluidity and soft animations that desktop applications such as Exposé have had for a couple of years.

I also see huge resources being directed towards mobile development because ALL current generation smart phones are built for an incredible web browsing experience. As home users have switched from desktop computers to laptop computers in the last few years, people will slowly start switching to hand-held devices for their primary communication and Internet needs. Most likely this will have one primary effect: web frameworks will have a mobile optimized version of the site done automatically. Little to none developer intervention will be required as only resolution, text sizes, and layouts will be modified for the mobile version.

Lastly I see tools and libraries around 2D and 3D drawing elements. Most likely these libraries would be rendering to a Canvas or a WebGL element but something better could be created. Both of these are young standards right now that show a lot of promise on delivering the ability to draw pixels directly in a native HTML web page. While they will be used first in simple computer games, I am very interested to see what libraries are created to facilitate these elements being used appropriately inside next generation web applications.

What do you think the next 5 years will bring?