JavaScript: The Web Glue
By Scott Tabar
A Sticky Situation
The use of JavaScript has evolved over the last thirteen years since the first drafts of the standard were introduced in 1996. In the late nineties, and into the early years of the new millennium, I personally witnessed many amazing things that people were trying to do with JavaScript. Unfortunately I was not a casual observer, but instead I was stuck with trying to make them work which resulted in the formation of an opinion that it may be best to avoid JavaScript.
Plain and simple, JavaScript was difficult to work with and usually became the dysfunctional keystone of many projects that tried to place lofty demands upon a technology that few understood well, but were eager to try to exploit. There were many great challenges with cross-browser compatibility, debugging, and manipulations of the Document Object Model (DOM) along with HTML. Some projects did not place a high priority on JavaScript and therefore could not justify the fulltime dedication of one developer to work through all the issues. As a result, JavaScript's role on many projects was minimal.
Fortunately, JavaScript and the web development mindset have been evolving - today's web development landscape is very different from what it used to be. Now, open source projects are bringing together diverse resources and perspectives that are fueling the advancement and adoption of newer technology. We are now witnessing that standards are a driving goal for browser development, unlike almost a decade ago when the urge to add in those “killer” features inevitably led to incompatibility issues. Technological advances, no matter how great, cannot usher in new paradigm shifts if the masses cannot access it or utilize it. In web development, there has to be a commitment to implement the new technology, and without having a viable way to utilize it, the inertia of the development cycle could start to wane. With Web 2.0 there has been a driving demand to make use of newer technology and standards that are easily accessible for both the web developer and the end user. JavaScript is helping to make it happen now.
JavaScript Glues it Together
In many ways, JavaScript is the glue that holds the Web 2.0 together. It enhances many aspects of the web development environment and the client experience. On the server side, the benefits include smaller transactions that yield faster responses, less network traffic, and it effectively off-loads some of the processing to the client's computer. For the client, a few of the benefits are faster response times, dynamic content both in animation and in targeted content based upon the users real-time actions, and web pages that behave more like desktop applications. JavaScript allows the content to be client-driven, only requiring access to the servers for resources that are of interest to the user.
JavaScript glues together many aspects of the client's experience. It can manipulate how the CSS elements interacts with a page based upon user initiated events. JavaScript is able to navigate the DOM and work with the data elements on the web page, or it can use the DOM to directly modify the structure of the page. JavaScript is also capable of adding regular application functionality to web pages through the use of drag and drop, event monitoring and handling, and transparently connecting to remote resources. JavaScript frees the page from having to be a static representation of the content with Asynchronous JavaScript + XML (AJax). AJax can become the major backbone for most of the communications with the server, thus freeing the client from having to wait for the whole web page to reload when updating even the smallest bit of content.
With all of the possibilities of what JavaScript has to offer, one of its top strengths is that it provides an excellent opportunity for enhancement. The core fundamentals of the language can be dynamically enhanced without recompiling the execution kernel. By being an interpreted language with object oriented (OO) structure, it only simplifies what is possible. This flexibility results in a lower cost to implement and simplifies integration into an existing site. The ability to extend its functionality has allowed JavaScript to remain a key player in the Web 2.0 environment; otherwise, dependencies upon other external scripting environments would become a necessity. Numerous libraries have capitalized on the ease of working with JavaScript. The purpose of these libraries varies; they can be narrowly focused or very broad in scope. Some of these libraries are stand alone, while some build upon other libraries.
PrototypeJS is one such library that provides a framework that bridges the gap on cross-browser compatibility, provides convenient functionality to help simplify JavaScript programming, and provides a rich AJax interface. PrototypeJS is able to simplify many mundane and complex tasks, which leads to tighter code and fewer bugs. PrototypeJS's functionality bridges the three layers of architectural design: Behavior (JavaScript), Presentation (CSS), and Content (HTML and Data). PrototypeJS has implemented support for using the W3C's CSS Level 3 specifications, so it is trivial to manipulate a page based upon the use of CSS selectors even if the client's browser of choice does not support the CSS Layer 3 specifications. As a result of CSS Level 3 support, it becomes a trivial matter to stripe every other table row, select the nth element in a list, or even empty elements. PrototypeJS also excels with managing data with extended data types and rich tools sets. Utilizing JavaScript libraries prevents developers from reinventing the wheel and takes advantage of solutions that work in cross-browser environments.
Script.aculo.us builds upon PrototypeJS to focus on manipulating the Presentation layer to provide dynamic animation and transformations of web pages. Some examples includes drag-n-drop, fading content out or in, inserting a new element on the page, or just morphing content from one CSS entry to another. Script.aculo.us has a toolbox of many effects that can be combined in novel ways, very much like how video editing software utilizes transitions. It also has the infrastructure in place to utilize queues to allow multiple transitions to run concurrently, or sequentially. This allows websites to take on a life of their own through content that interacts with the user, instead of just being static.
With the added richness comes the price of development and learning how to take advantage of the strengths of what JavaScript has to offer. Usually the greatest challenges tend to deal with debugging and integration with the CSS and the DOM. There are tools that make it much easier to figure out where the bugs are or why something is not behaving correctly on all platforms. FireFox along with FireBug helps to address debugging and dynamic tweaking of content. Safari also has its own built in developer's menu that is able to accomplish many of the same things as FireBug. With the big three browsers (FireFox, Safari, and IE) focusing on standards compliance, it is becoming easier to develop cross-browser compliant pages. Today it is true that if it works in one browser you have better odds that it will work in the others.
Glue for the Glue
JavaScript is not perfect. There are still issues with compatibility between various browsers, but libraries such as PrototypeJS are helping to address some of those issues. Some tools provide better client-side debugging than others, but trying to incorporate an intelligent debugging tool that can interact with JavaScript, the DOM, and related CSS styles in a useful and an intuitive way may be more of a personal preference to the developer.
With the use of Ajax and other multiple threaded JavaScript tasks, a significant problem exists with thread contention since JavaScript is generally not thread-safe. If a website has multiple threads working to update content asynchronously there can be problems if each thread shares the same element or has the same targets. If many threads are run concurrently, events can be lost and critical functionality associated with the functions that are listening for those events will then go unprocessed. One possible solution is to implement your own MutEx in JavaScript so that you can mitigate concurrency issues through self-handled synchronization. JavaScript could benefit from the addition of thread-safe object handling, even if it could be enabled on demand.
Surprisingly, even though it appears like JavaScript itself has not undergone too many changes from when the first draft was published, it has been proven to be flexible and has become an integral component for most web pages. JavaScript has rendered static web pages obsolete. It has successfully glued the web together for our surfing pleasure.
No comments:
Post a Comment