Andre's Blog

Personal blog of Andre Perusse

Web Development in 2012: This Ain't Your Daddy's HTML

For the first 11 years of my professional career I designed and built applications using HTML. When I first started out, I mostly just specified the application design, having other people much smarter and talented than me do the coding and graphic design, and I would write the HTML myself (back in the day web "programming" was done in C in the form of CGI scripts which was nothing I wanted anything to do with). With Microsoft's Active Server Pages I graduated to performing the coding, too, which was a boatload of fun.

Over the years I considered myself pretty darn clever at web application design (truthfully, I was just a hack but I "thought" I was clever). In 1998 I was using Internet Explorer 4 and Microsoft's Remote Scripting feature to refresh data on a web page without doing a full server refresh. This was years before AJAX became a known term much less a popular feature. A few years later I was using the XMLHttpRequest object to do the same thing. Naturally this required a firm grasp of JavaScript and the browser Document Object Model (DOM), though fortunately I wrote internal corporate applications and cross-browser compatibility wasn't much of a concern (and Microsoft had soundly destroyed Netscape by this time anyway).

I continued honing my JavaScript and DOM knowledge and skills up until about 2007. You remember 2007, don't you? Well, let me refresh your memory anyway. There was no Google Chrome. Mozilla Firefox was barely an up-and-comer. Internet Explorer had only reached version 7 three months ago (October, 2006). Hell, even Facebook had just opened itself to public registrations in September, 2006. AJAX was pretty much a solidified term, but its use wasn't very wide-spread yet. Web services were all SOAP-based (no REST for you!) and jQuery was just barely starting to gather some traction as the de-facto JavaScript abstraction library. HTML and the browser DOM had stagnated for so long that developers were clamoring for a better future.

Enter the era of the Rich Internet Application (RIA). Adobe Flex 3 was released in June, 2007 with a much improved developer feature-set and no longer carried a server licensing requirement. It was way more powerful than the state-of-the-art HTML being used then and many, many web development projects were transitioned from HTML to Flex. Flex's popularity grew for several years and inspired Microsoft's own RIA entry, Silverlight. It seemed as though the future of web applications would be written for browser plug-ins. My own career took a slightly different turn at this point, and for two or three years I worked on .NET WinForm applications but have now found myself on a Flex project for the past little while.

Recently, I've had the opportunity to return to my roots and begin working on a brand new web application. Ah yes, HTML - my old friend. I cracked my knuckles and sat down to dig into everything that was new and wonderful in the world of web development. Even though I had made it a point over the years to stay up-to-date on the terms and technologies being used and advanced in the HTML world, I had no reason to actually learn about them in any depth. So I started to bootstrap my new application, and I have been awash in the staggering number of current techniques that are employed in modern web application design. This ain't your daddy's HTML.

Well, actually, HTML itself hasn't changed too terribly much. The latest version, HTML5, has some new tags, sure, some to help with semantic markup and the Canvas element itself seems poised to open a whole new world of capabilities. It also has its own Video tag to replace Flash videos and adds local isolated storage. But the real changes are with CSS3, JavaScript libraries and frameworks, and the server programming model itself. CSS3 has just about turned into its own programming language, no longer satisfied with simply defining static layout and appearance. While it's unfortunate that complex CSS must still make use of the benefits provided by pre-processors (like LESS), CSS attributes now support complex 3D transformations and even the rule selectors now have a dizzying array of capabilities. Some animation requirements can now be completely defined in CSS without the need for any JavaScript at all. And I thought having rounded corners without images was cool!

And speaking of JavaScript, wow - has it ever come a long way since 2007. Today, only a fool writes JavaScript to directly manipulate the DOM and update HTML elements. jQuery is the de-facto standard library for not only abstracting away the confusing and aggravating differences in DOM implementations across all the various browsers and versions, but also for adding some truly amazing capabilities to JavaScript. And its "fluent" API construction provides the ability to perform multiple operations with a single line of code. It is completely AJAX-aware, making rich client-side interfaces a breeze to implement. jQuery UI, while somewhat less popular that jQuery itself, builds on top of jQuery to provide some user-interface goodies I could only dream of back in 2005.

But jQuery isn't the only JavaScript change in town. JSON (JavaScript Object Notation) has seemingly out of nowhere replaced XML as the preferred inter-platform data exchange format. Like XML it is "human-readable" but it comes without all the heavy tag "weight" of XML and is immediately consumable by JavaScript code without the need for any kind of parser. Marrying data to HTML elements is a new class of JavaScript frameworks that implement the MVC or MVVM patterns, like Knockout.js. These frameworks simulate the automatic model-binding architecture available in other UI frameworks, such as Windows Forms, Silverlight, and Flex.

So, the world of web application development on the client has become much more complex. While there are now a lot of tools out there to help put together a truly advanced UI experience, they continue to be disparate and must be implemented individually. There is yet another class of "utilities" out there that aim to alleviate this problem - the web application template. HTML5Boilerplate calls itself "A rock-solid default for HTML5 awesome" and includes many of the above JavaScript frameworks and a set of cross-platform CSS rules to give developers a strong starting point for new apps. While it brings a lot under one single download, there is still a ton of technology to learn.

And it's not over yet. The server programming model that I came to know and love, ASP.NET, is completely unrecognizable these days. While the old WebForms model still exists and is still getting some love from Microsoft in the latest .NET 4.5 release, the current wonder-child is ASP.NET MVC (which stands for Model-View-Controller). Today, you would be ruthlessly ridiculed if you started a new project using WebForms. ASP.NET MVC does away with the old server control and viewstate style of development and developers now (one could say "again" since the old Active Server Pages framework had the same benefit) have complete control over the HTML output rendered by the server. And the MVC system aims to provide a better "separation of concerns" among the various classes on the server, ostensibly making automated unit-testing a much easier task. Unfortunately, all the skills I learned about handling the WebForms Page object and event model are now completely useless, and so are all the third-party server control libraries I used. But hey, I wouldn't be in this business if there wasn't something new and exciting every other week.

Speaking of new and exciting, what about tooling? Visual Studio 2012 is now out in release-candidate form and this release is all about web development. It seems with Apple's refusal to allow Adobe Flash to run on iOS, and Microsoft's similar stance on eliminating browser plug-ins in the Windows 8 "Metro" version of Internet Explorer (which means no Silverlight, either), we have just experienced the RIApocalyse (a term recently coined by Dan Wahlin) and the whole world is swinging back to HTML development. Visual Studio now ships with jQuery and much work has gone into improving the JavaScript development experience, including vastly improved Intellisense. Add a better CSS editor and a new feature called the Page Inspector and you have a very capable design-time experience. And don't forget the addition of NuGet - a package manager for automatically adding and updating various frameworks, utilities and extensions to your IDE and application projects.

I'm already exhausted just writing this post, and I haven't even mentioned Entity Framework - Microsoft's latest data-access technology du jour. So if you're like me and used to be a web developer back in the glory days of the mid-2000s, then moved into other work and are now back in the HTML world, prepare yourself for a lot of re-learning. The game has certainly changed, but I don't think there's ever been a better time to be a web developer. More capabilities, more utilities, more frameworks, more power!

Comments (2) -

  • Darth Mac

    7/18/2012 8:08:47 AM |

    Ah yes, that's all well and good, but does the BLINK tag still work?