Web Development – The Next Level

Don’t forget to visit our new site, tonysgeektips.com! You can view this exact post at our new site here.

So you know HTML, CSS, maybe a little JavaScript. If that’s as far as you want to go in your web development skills, then great. But if you’re like me, then you’re looking for something more. You see all of these incredible web sites, like Amazon or Ebay, and you wonder, “How in the world do they do that?”. That was the question that opened up a whole new world for me.

If you take a look around at the modern Web 2.0 experience, you will see all sorts of really neat things. Technologies like AJAX, Server-side web applications, data-driven content, and so much more. The web is becoming more and more like the desktop every year. It truly is an incredible platform, with the ability to connect users to data and even users to users from all over the world.

The rate at which it is all changing and improving is another incredible aspect. Bill Gates, while addressing the University of Washington in 1998, said:

“Sometimes we do get taken by surprise. For example, when the Internet came along, we had it as a fifth or sixth priority. It wasn’t like somebody told me about it and I said, ‘I don’t know how to spell that.’ I said, ‘Yeah, I’ve got that on my list, so I’m okay.’ But there came a point when we realized it was happening faster and was a much deeper phenomenon than had been recognized in our strategy.” (Source: http://en.wikiquote.org/wiki/Bill_Gates)

Now it is, some would contend, the primary place most do their computing. From email, to social networking, even to online banking, this is an incredibly diverse platform. It would be foolish for serious web developers or programmers to ignore the web as not only a place to store online brochures (i.e. the classic 4 page “home, about us” website), but as an incredible programming platform.

But how does it work? How are web applications made? For those who have only done HTML and CSS, you will find a whole new world awaiting you. In this post I will explain at a basic level how web applications run. I will keep this as platform specific as possible (although I am horribly biased toward a certain family of technologies)

Introduction Into Web Applications

First, let’s define a web application. Turning to Wikipedia:

“In software engineering, a web application or webapp is an application that is accessed via web browser over a network such as the Internet or an intranet. It is also a computer software application that is coded in a browser-supported language (such as HTML, JavaScript, Java, etc.) and reliant on a common web browser to render the application executable.” (source: http://en.wikipedia.org/wiki/Web_application)

So a Web application is simply an application that is on the internet. I will explain it in a slightly more technical way then Wikipedia does:

“A web application is an application that is hosted on a web server that renders content that it processes to the user in common browser languages (e.g. HTML). Due to the page content being processed on a server (as opposed to the client), the server handles the “thinking”, instead of being limited to whatever variety of resources are on the client’s system.” (source: Jack Chapa)

Think about what this means. In traditional web sites, you would need to be sure that everyone could use your application by ensuring that the user had the necessary technology to do so, forcing you to go to the lowest common denominator. With server-processed web applications, you can use all of the technology that the server has. The server will send the HTML to the user. Basically, the server is the brains of the application, instead of the user’s system.

Here is a diagram that will help explain the differences:

programming-server-diagram

The ability to harness the full power of the server instead of relying on the client enables much more powerful applications.

Examples of Web Applications

All of this theory is well and good, but how about some solid examples? I won’t go into actual coding in this article, as my purpose is to provide a very, very high-level introduction into what web applications are.

The first example I will use is the website. It is powered by the WordPress software. Take a look at the URL of this article. It probably looks something like:

http://www.tonysgeektips.com/index.php?p=696

If the “index.php” part isn’t there, don’t worry about it. Because “index.php” is the default page, it is assumed that the URL address is referring to it.

Okay, so what does this have to do server side programming? Take a look that last part, the “?p=696”. Without going into all of the details, the “?” symbol tells the server that from here on out, everything in the URL will be a “query string”.  The query string is a place to set values that the server will/might need. In this case, the query string tells the server that that the browser is requesting the page “index.php” and that “p=696”. When the server recieves the request, it loads up the index.php page. The page then has some logic that looks to see what the value of “p” is in the query string. In this case, “p” is referring to the ID of the page. Where is the id/page stored? In a database, which is a place located on the server that stores information. So you see, one of the applications of server side programming is that you can have one page that displays differently depending on what is passed in via the query string. All of this happens on the server, not the client. Do you see how powerful it is?

Of course, the query string is only one example of the vast number of possible uses of server-sided applications. Other examples include e-commerce, RSS feed generators, or CMS systems (like wordpress) to name a few. The sky is pretty much the limit.

Wow, This is Pretty Slick Stuff. How Do I Start?

I’m glad you asked. There a many different technologies out there for web application development. The technology you should choose depends on what you are trying to get done. I won’t go into many details on each individual technology, as each one is incredibly vast. Here is a list of the most popular ones:

  • Microsoft .Net
    • .Net is a framework containing technologies such as ASP.Net, C#, VB.Net, and SQL Server. This is what I personally use in my development, and couldn’t recommend it more for an all-purpose, well-documented, platform. From a foundational level, it was incredibly easy to learn, but has tremendous power as you get more advanced.
  • LAMP
    • The combination of Linux Apache MySQL and PHP make up the core of the open-source family of web development. I have worked with this a good bit, and it has some pluses and minuses. I would never personally use it for my own applications, but by saying that I open up a whole can of worms. =D
  • ColdFusion
    • This is Adobe’s platform for application development. I like Adobe and don’t doubt that this a high quality platform, but I haven’t seen this one widely used, so I would use caution before choosing it. I have never used it myself, so I can’t offer much on it, however.
  • Java Server Pages
    • Web sites using the popular Java platform. Again, I have no personal experience with this, but have a lot of respect for the Java platform.

In addition to those, you also have Ruby on Rails, Perl, and many others.

In Conclusion

I have only barely thought about scratching the surface with this article. In order to really begin, you need to do a lot of research and get a book. A great place to start with the .Net world is with the Microsoft Visual Web Developer Express Edition (don’t worry about the other express editions for these purposes) and a book (Beginning ASP.NET 3.5 in C# 2008 is a good one). For PHP, all I can do is direct you to www.php.net and recommend you getting a book. Do an Amazon search for “PHP 6”.

Please feel free to ask your questions and share your experiences and suggestions in the comments.

Advertisements

One Response to Web Development – The Next Level

  1. jarat says:

    good info.thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: