Web Application: Overview

Note

The most comprehensive documentation for web application development is the Mozilla Developer Network (MDN) https://developer.mozilla.org/en-US/docs/Web

Client-Server Structure

A web application has two parts: Server and Client.

Traditional webserver (Apache, TomCat, nginx) serves http requests for static html documents+javascript, or call server side code ( php, asp.net, python ) to create dynamic documents or data (html, json, xml) per request, based on url route and request parameters.

The new type of web development platform, such as Node.js, execute Javascript scripts and send response per request, usually also based on url route. Node.js and Express framework work together similar to the traditional web server architecture.

Servers usually also communicates with a database (sql or nosql).

Note: If you are wondering how to deploy a node application, see this post http://stackoverflow.com/questions/8386455/deploying-a-production-node-js-server for some discussion.

Similarly, Data Servers (data service apis) communicate with database and serves data (json, xml, or even binary), mostly with a RESTful architecture (use HTTP for communication protocol). They ususally don’t assemble webpages directly.

The Client is modern web browser (Chrome, Safari, Firefox, Opera, etc. ). They can of course show static html webpages, but mostly thesedays they execute downloaded javascripts and create interactions with users. The javacript code can also update ( the necessary part of ) webpages asynchorously through communication with server (this technology is called AJAX).

In this article we focus on Client side programming in Javascript.

Javascript Debugger

While HTML is used to define the structure and content of a web page and CSS encodes the style of how the formatted content should be graphically displayed, JavaScript is used to add interactivity to a web page or create rich web applications. So, Javascript is widely, almost exclusively used by web browsers to create dynamic contents (result in html) and to communicate with the server.

Javascript itself is a programming language, so you can find it used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic,and supports object-oriented, imperative, and functional programming styles.

To pair with any programming language, there should be a debugger and of course, a console. Modern web browsers do provide these as development tools.

Chrome Javascript Debugger https://developer.chrome.com/devtools/docs/javascript-debugging

Web APIs and their functionality

You might used to think that a webpage is a static html page, but now all of the web contents are programmable and dynamic, they can be manipulated use javascript code to do many interesting and sophisticated things, such as mannipulate DOM objects, display graphics and play audio, access mobile device sensors, communicate with networked servers/peers, store and manage data, even manage computation tasks, and many other functionalities.

See a whole list of web api here https://developer.mozilla.org/en-US/docs/Web/API

Some of those functionality are embeded into native HTML5/CSS3 standard, so you can use html tags and css elements directly to achieve many effects, with or without the help of Javascript codes. Examples include html5 canvas, audio and video, XMLHttpRequest2, worker, etcs. For HTML5, see the details at here https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

Web API and Javascript can do everything in the low level, but as document body grow larger and more complex, codes get cluttered and hard to maintain. No worry, many javascript libraries exist to help us code more easily, efficiently and cleanly.

DOM manipulation and data communication library

Jquery is probably the most popular javascript library for web app developers. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility.

We’ll talk about web data communication in detail in another article, since it involves server side programming.

Data Visualization Library

Web graphics basically includes two categories, 2D and 3D.

2D graphics (except simple <image> tag) is usually implemented by Scalable Vector Graphics (SVG). SVG is an XML markup language for describing two-dimensional vector graphics.

WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 <canvas> elements.

For libraries support, check out D3.js and Three.js

Web development framework

Higher-level integrated web development framework and tools are desired, to improve the overall application professionalism, especially for large and user-heavy web applications. A couple of examples:

  1. Sencha : Ext JS (desktop web app) and Sencha Touch
  2. Django : Python web framework
  3. AngularJS : From Google
  4. Express : web app framework for Node

A list of mobile app frameworks http://moduscreate.com/5-best-mobile-web-app-frameworks-ionic-angulalrjs/

Build and Task Automation

  1. Bootstrap
  2. Sencha Cmd toolset
  3. Grunt