What You Need to Know About Web Apps, Part 2

Investing in technology that is already obsolete is a bad business strategy. In the second post of this series, we’ll explore an obsolete way of developing web apps as well as a transitional approach that has become popular. It’s important for you to understand these two paradigms of web application development to truly understand the benefits the next generation of technologies that are emerging.

We can break up the history of web apps into three broad phases:

  • First generation (Server rendered / Round trip web pages)
  • Second generation (Server rendered / Ajax apps)
  • Third Generation (API / Single Instance Apps)

These are generalization. They have to be, the Internet is old and its history complex. Arguably, you can find conceptual traces of the Internet back in Murray Leinster’s 1946 short story, “A Logic Named Joe.” Early experiments with internet’s primordial form, ARPANET, go back to 1969. The World Wide Web (“The Web”) was proposed in 1989. Regardless, the nuanced specifics of the web’s history aren’t important for our immediate goal. You need to learn just enough about the last fifteen years of web technology so that you can make the right decision for your next project.

First Generation Web Apps

By early 2001, the 12 year old Web had already given birth to the idea of Software as a Service (the broad term for web applications). Sure, the underlying concepts go back to earlier days, but the Internet presented a new opportunity for Application Service Providers to distribute their services. Let’s pick this as an arbitrary line in the sand as to when First Generation (Gen-1) Web Apps came onto the scene. The exact year is irrelevant.

Gen-1 web apps were born during a time when web standard technologies like HTML and Javascript were relatively young. You had a variety of web browsers made by fierce competitors. The 1990s had given birth to Mosaic (later Netscape), Internet Explorer (IE) and Opera. By the early 2000s, Internet Explorer dominated. Later, you would have Firefox and Google Chrome, but for the moment it was Microsoft’s time in the spotlight.

Unfortunately, Microsoft’s market domination temporarily stifled the evolution of web technologies as is evidenced by their browser’s release schedule in comparison to its market share:

(Note that by 2015, international usage of IE  is down to around 18.91%)This period of sluggish innovation meant that Gen-1 web apps were largely limited by less than consistent aging standards. Alternatively, a company could use a third party proprietary technology like Adobe Flash. Flash allowed companies to create rich browser based applications, but it wasn’t an open standard, so adoption was significant but not complete.

Server Side Rendering

Gen-1 apps can be characterized by the use of Server Side Rendering that results in browser refreshes as the user’s interaction with the app causes round trip requests to the server.
gen-1-web

For example:

  • The user’s browser makes a request of the server, passing along some data from the user (1)
  • The server processes the information, compiling some useful data for the user from the Database (or whatever other data source it has)
  • The server binds that data to HTML, creating a complete description of what the screen should look like when it’s rendered by the browser
  • The server returns a complete description of the interface (2) that the browser simply renders in its window
  • This process repeats any time the user interacts with data

Your browser is just collecting information, passing it to the server and asking the web server what to display next.

With Gen-1 web apps, the server does all of the heavy lifting and the browser acts as a fairly “dumb” terminal that’s primarily responsible for gathering information and displaying results from the server.

HTML is the way information is encoded so the browser knows how to display that information. This page that you’re reading is defined using HTML, which has been translated by your browser and then rendered onto your screen. HTML is not a programming language. It’s a markup language that is primarily concerned with the structure of information. It defines things like:

  • that the text you’re reading is grouped together in a large white box
  • that the total width of the page will change depending on the width of your browser
  • that the image above should be place before the text you are reading
  • that this list is bulleted

Javascript is the programming language of browsers. It has been around since 1995, but its evolution was fairly slow until the last ten years.

Gen-1 apps use Javascript for their browser side programming language, but the implementation is largely limited to validating input (e.g., making sure you put an email address in the email box, etc.). Or, it is used for trivial interface tasks like animating your menus or making sections of the page disappear and reappear depending on whether or not a button was pressed.

Gen-1 web apps are pretty obvious when you’re using them. If you enter some information, press a button, then see your browser refresh the entire screen with some results… you’re working with a Gen-1 application.

Gen-1 Web Apps are obsolete, but they’re far from irrelevant. You likely encounter them on a regular basis, and amazingly, they are still being developed for new web applications!

What’s wrong with a Gen-1 web app? Nothing. It was a great technology for the time and there are plenty of useful web apps that still function under this paradigm. But why would you want to develop a new application platform using technology essentially from the late 1990s? The reasons to avoid this will become even more apparent as you gain an understanding of the benefits of Gen-2 and Gen-3 web apps.

Examples of Gen-1 technologies include traditional ASP.NET and PHP.

Second Generation Web Apps

Gen-2 web apps officially came onto the scene in 2006 when certain web standards needed for the technology to gain wide adoption were released in draft form. These open standards combined with the release of the iPhone, which did not run Flash, eventually led to Adobe Flash becoming an obsolete technology for web app development. You can find primitive examples of Gen-2 apps dating back to the late 1990s, but really Google Gmail and Google Maps were some of the first major products to take this approach in 2005.

ajax-unicornThe key to Gen-2 web apps is that they use a group of standard technologies and practices to create a more dynamic interaction with the user. Without getting too technical, Gen-2 web apps largely revolve around a set of technologies that are collectively called AJAX (Asynchronous JavaScript and XML).

In a nutshell, these Gen-2 web apps are still partially rendered on the server, but once they are loaded by the browser, something unique happens. In Gen-1 web apps, Javascript was primarily used to validate information before sending it back to the serve. With Gen-2 web apps, the page loads with a more robust set of Javascript code. It knows how to render certain elements of its interface on its own, independent of the server.

gen-2-web

Consider the revisions to the illustration above (differences from Gen-1 web apps are bolded):

  • The user’s browser makes a request of the server, passing along some data from the user (1)
  • The server processes the information, compiling some useful data for the user from the Database (or whatever other data source it has)
  • The server binds that data to HTML, creating a complete description of what the screen should look like when its rendered by the browser
  • The server includes some more robust Javascript that knows how to update this interface in various situations based on what the user is doing
  • The server returns a complete description of the interface (2) that the browser simply renders in its window
  • The user then does something that causes the browser to need more information from the server. Things now change. Rather than doing a full round trip to the server to request additional data bound to an updated interface, the browser instead does a small background call to the server requesting just the data (3)
  • The server returns just the data (4). The Gen-2 web app has enough intelligence to know how to take that data and bind it to the interface in a meaningful way without the help of the server

As such, on a Gen-2 app, if you request some more information, your web app knows how to go back to the server in the background, request just the data, and when that data is sent back, it knows how to update its own interface with that data.

This changes quite a bit. It starts to place the UI burden on the browser. The server is still responsible for generating a lot of the HTML, but the browser is now more intelligent about being able to modify its interface and it requests data updates from the server instead of requesting entire refreshes of its interface.

This has the advantage of creating much more responsive feeling apps. Data just magically appears when you request it. Your screen doesn’t flicker and refresh constantly as you’re going about your business. And since you’re only requesting data updates, you’re using less bandwidth so Gen-2 web apps feel snappier in low bandwidth situations.

AJAX web apps (what I’m calling Gen-2 web apps) led to a revolution in web application development. You could now create very robust applications in the browser that felt more like desktop applications. Think about this for a second. Before Google Gmail, you probably used a desktop email client of some sort (Outlook, Thunderbird, Apple Mail). Web based email was largely a backup just in case you were somewhere you needed quick access – but no one liked it because it felt like a web site, not a robust application. With Gmail, things started changing. Now, a large part of the population does their email exclusively through a browser.

Examples of Gen-2 technologies include things like Microsoft MVC and JQuery.

This is all overly simplified, but hopefully it has helped to surface the difference between Gen-1 and Gen-2 web apps. The next post will talk about the emerging possibilities with Gen-3 web apps.

I’d love to hear your thoughts or questions about this post. Comment below!

Leave a Reply

Your email address will not be published. Required fields are marked *