Introduction

This article is about popular challenges in web application development and their solutions.

Modern web applications could easily be decomposed into two distinct code bases. One that runs on server infrastructure and the other that runs on end user devices.
The server infrastructure could be as big as over 49,293 servers in just
one Google data center and could be as small as a website hosted on
a company's internal web
server.

Figure - Google Data Center

On the other hand, end users use web applications on myriad of devices, ranging from desktops, laptops, tablets, HDTV, printers, phone display and smart phones. All
these devices come in variety of screen sizes, native frameworks and browser compatibilities
for CSS3, JavaScript, and HTML5.

Figure - Native application developed using KendoUI Mobile and PhoneGap

Let's discuss responsive and native web applications in a bit more detail.

A. Responsive Web Application

Some web applications render on smart phones, HDTV & tablets while others do not. A public website like Netflix is viewed on
different device sizes from laptops to HDTV and smart phones. To support a
variety of device sizes while keeping a single code base, a website should use
responsive web
development technologies like CSS3 or frameworks like Bootstrap or Foundation.

Bootstrap is mostly used in those solutions where a website runs on all kinds of devices including laptops and smart phones while Foundation is more suitable for
small devices with limited storage and computing power like smart phones and tablets.

Both of these technologies are based on CSS3 and therefore by applying a simple CSS class, we can create different layouts and components. For example, by applying a few
Bootstrap CSS classes, we can create split buttons:

CSS3

High level responsive frameworks like Bootstrap or Foundation use CSS3 media queries and Unobtrusive JavaScript
to render web pages on devices with different sizes and capabilities. Consider for example, Style.css below is applied only when the device's maximum width is
480px and resolution is 163 DPI.

CSS3 media
queries are at the heart of making web apps responsive. Media queries uses media features like device-width, device-height, orientation, device-aspect-ratio in CSS
file to develop highly responsive web apps. For example, Device.css below will be applied only to those devices which have colored screen in
portrait orientation. This gives great control over what we want to show (or don't want to show) on a particular device, orientation and
resolution.

<linkrel="stylesheet"media="screen and (color) and (orientation: portrait)"href="Device.css"/>

Using CSS selectors one can write very granular CSS rules. In the presence of Bootstrap, Foundation and tons of responsive themes you may not be using CSS3 directly, but remembering following CSS selectors will greatly help in understanding what you could do with CSS3 and jQuery. Checkout these interesting
examples:

// * is a universal selector. Make all links
// red on hover that are grandchild of any <div>
div * a:hover { color: red;}
// You can apply rules to group
h1, h2, h3 { color: blue;}
// Select elements that have any attribute.
// This rule will apply to all h1 which have 'article' attribute defined
h1[article]{ color:blue;}
// This rule will apply to all h1 where article="title"
h1[article="title"]{ color:blue;}
// This rule will apply to all h1 where article contains space
// separated values one of which is exactly equal to "title"
// e.g. <h1 article="top title text">Main Title</h1>
h1[article~="title"]{ color:blue;}
// Select all h1 where article attribute begins with top
h1[article^="top"]{ color:blue;}
// Select all h1 where article attribute ends with top
h1[article$="top"]{ color:blue;}
// Select all h1 where article attribute has a sub string top
h1[article*="top"]{ color:blue;}
// Select all h1 where article attribute contains hypen separated values which begins with top
h1[article|="top"]{ color:blue;}

HTHM and therefore DOM is hierarchal, so we could select elements based on parent-child relationship (e.g., first child), their relative position (e.g., n - 1 child where
n is the last child) and element type (e.g., img, div).

As you can imagine a CSS3 stylesheet can get very complex and hard to manage, so there is a need of CSS preprocessors like LESS
and SASS. These preprocessors extend CSS with dynamic behavior such as variables, mixins, operations, and functions. Bootstrap uses LESS to create complex CSS rules. For example, you could define a variable and the resulting CSS will expand that variable.

Figure - LESS variable

One of the problems with CSS development is that different browsers have different "default styles" for
HTML elements like <sup>, <sub>, <h1>, <h2>, <h3>, etc.
This causes CSS to work in a browser but break in another. To avoid this problem, we could use
Reset.css or
Normalize.css. With Reset.css, the CSS developer sets
HTML
elements to some default value. However it is a less preferred method as compared to Normalize.css because Reset.css unstyles every
HTML element and removes some useful defaults. For example, the following reset will set
h1, h2, h3 and h4 font-size to 100%, which is not really useful in most cases.

To better address the browser defaults problems, Normalize.css corrects styling and makes it
consistent in every
browser.

CSS developers are also challenged by the various browser modes. Modern browsers support two modes for
parsing HTML and applying CSS. One is called
Strict or Standard Mode
in which the developer specifies the exact DOCTYPE. In Strict mode, the browser uses W3C specification to layout a web page.

The other mode is called Quirks Mode, which the browser uses when no DOCTYPE
tag is used. In this mode the browser uses its non-standard rules to layout a document. One of such a non-standard rule is Box Model.
CSS developers face a good deal of problems due to differences in the Box Model implementation in various browsers.

A Box Model is fundamental to the layout a web page. A web browser creates a hierarchical tree of HTML elements (i.e., DOM) in the form of rectangle boxes as shown below.

Figure - W3C box model

Each HTML element like <h1>, <h2>, <img>, <p>, <br> gets its box.

Figure - Padding, Border, and Margin

Earlier versions of browsers, especially IE 5.x, use a different Box Model to calculate the width as specified by W3C. To render such pages, Quirks mode is
used.
The difference between W3C and the IE box model could be seen in the figure below. You can see the W3C width specification does not include padding and border.

Figure - IE vs. W3C Box Model

Currently IE10 supports various quirk modes to support old
pages. To enable IE5 quirk mode for legacy pages in IE10, use the following <meta> tag in <head> before any script.

<metahttp-equiv="X-UA-Compatible"content="IE=5">

Figure - IE 10 Qurik Modes

For all new pages do not use quirk mode. Instead use Standard or Strict mode by specifying correct DOCTYPE. Also CSS3 provides an excellent way to overcome
the Box Model issue by using the box-model attribute. If box-model is set to
border-box then element width includes padding and borders.

Unobtrusive JavaScript

Discussion of Responsive Web App does not complete without Unobtrusive JavaScript.
Unobtrusive JavaScript is an umbrella term used to write JavaScript that works on large number of devices with different capabilities and one that is easy to maintain.
What this really means in one way to separate JavaScript from HTML as shown below.

In sample 2 above, validateDate() is decoupled from HTML using element id 'date'. We can now put JavaScript in separate file(s) to
increase code maintainability. It is far easier to fix issues, add new
features and introduce polyfills in modular
JavaScript files.

Browsers are catching up with HTML 5 and CSS 3 specification and dispensing more and more support with every new version. To fill up gaps in browser
functionality polyfill is used. A polyfills is JavaScript that provides missing functionality in browser. For
example, Firefox 23, 24, and 25 do not support HTML5 Web SQL Storage and IE8 & 9 can not do CSS3 Transitions. In such cases, a polyfills provides a fallback for these browsers and supply necessary functionality. A polyfill helps in
graceful degradation of JavaScript,
which is another guideline of writing Unobtrusive JavaScript. There are dozens of polyfills available at the time of writing. You can check browser support for HTML5 and CSS3 at caniuse.com.

Also Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. Modernizr supports dozens of tests, and optionally includes YepNope.js for conditional
loading of external .js and .css resources. This is specifically useful in loading polyfills. For example, following will load
geo.js only if the browser supports geo
location feature else a polyfill geo-polyfill.js will be loaded.

We can easily predict that an unobtrusive JavaScript results in fast page loads due to
a smaller HTML file. It is possible to further increase page load
speed by JavaScript minification,
compression, and deferred loading which is very important for contents targeted for smart phones, tablets and other devices with limited bandwidth, storage and computation power.

Minification is a process to combine multiple CSS or JavaScript files, remove unnecessary whitespace and comments. There are online tools available which not only minify CSS or JavaScript but also serve them with gzip encoding
and optimal client-side cache headers. Such JavaScript/CSS files could also use CDN and browser cache effectively to further shorten page load time.

jQueryis a popular library that helps in writing unobtrusive JavaScript. Consider for
example, it is really intuitive in jQuery if you want to chain together the selection of a paragraph id p1, changing its color to red and then sliding it up
and down. Try this example here.

Writing JavaScript could be challenging for new comers as it has has type coercion. Numbers can become strings, strings can become numbers, and arrays can become strings. Checkout below why empty string - 1 = -1 in JavaScript:

To avoid type coercion and to increase code
maintainability, unobtrusive JavaScript guidelines prefer === and !== operators as compared to their 'evil twins' == and !=. === does not convert
type while == converts type before comparison.

JavaScript coercion, loose type system and OOP syntax (which is different as compared to popular languages like Java, C#) has created programmer's outcry
which could be felt here. JsFiddle is one of popular ways to play with JavaScript and Jslint
to measure its quality. There is even an online tool
to beautify your JavaScript code.

Figure - Chrome Developer Tools

Chrome provides a built-in support to debug JavaScript and CSS and it
comes very handy when debugging and tuning JavaScript.

Among these Microsoft TypeScript is interesting being a strict superset of JavaScript (like C++ is for C)
and probably the future of JavaScript i.e. ECMAScript Harmony (6th Edition). TypeScript supports
OO syntax and is strongly typed, so code completion and compile time type checking is possible.

You can see it is far easier to comprehend TypeScript OO syntax as compared to JavaScript.

Google DART on the other hand is a totally new language which
compiles into JavaScript. Like with other
preprocessors, debugging DART generated JavaScript and using existing JavaScript libraries pose a challenge.

While XSS attacks on smart phones and tablets could be minimized using the above practices, there are reports that Apple, Google, and Microsoft are building huge databases
for their location services by illegally tracking user location.

What's Next

In the next part I will discuss JavaScript OO and popular JavaScript frameworks like Knockout, Bootstrap, Angular etc., and what problems they solve. I will also discuss HTML 5
and its role in the development of Responsive Web App.

After completing this discussion we will see what are the challenges of using native and hybrid frameworks for solutions targeted for devices with limited storage and computing power.
Lastly, we will cover Server Code Base and challenges and solutions over there, and the role of intranet infrastructure
on the scalability, availability, and performance of a web application.

Comments and Discussions

@Syedd...Your breakdown of architecting web applications is excellent. I have used many of the tools you mention in my own efforts; and heartily concur with your analysis of effective solutions to the issues of contemporary web projects. You also mentioned some tools that I was unaware of and I will certainly look into incorporating in my projects.
It is interesting to me that you broke down the exercise of architecture into the 2 major areas you did. To me, this conceptual model is one that brings me 'full circle'. I am probably one of the few 'programmers' who learned and evolved from doing 'client-server' applications in the desktop PC world to coding web applications for the WWW. I have become more and more aware that the issues involved in crafting good, well-performing applications have not changed in the 25+ years I have been 'coding'.
All good applications begin with simplicity and clarity of purpose. Good architectural decisions are a critical aspect of the success of any project. If simplicity and clarity are maintained throughout the project development lifecycle; the project stands a better chance of being widely accepted.
The projects I have seen fail are those where the 'programmers' have diverged from the 'blueprint' of the project. Part of the failure is the fault of 'programmers' thinking that they have 'a better idea'. The other aspect of failure is that 'programmers' rarely have any degree of knowledge of what the actual users want of an application. That is why good architecture plays a key role in the development process.
The only thing that I would add to your analysis is the point that good architectural decisions also depend on good knowledge of the 'business logic' of a project and the 'end-users' expectations. Only with that; can a good architecture be established.
My heartfelt thanks to you for your simplicity and clarity in this article. Please feel free to communicate with me regarding any criticism of my comments.