Agile JavaScript !

What makes JavaScript Agile ?

JavaScript is Agile when it deploys to your visitors using optimized techniques.

What makes JavaScript deployment optimized ?

When browsers are able to download your JavaScript content in parallel rather than serially.

Typical Browser Behaviors for JavaScript and CSS

Typically browsers will download each JavaScript and CSS file and then stop while each individual file is being downloaded.  This can take a lot of time especially when there are a large number of files or when each file is rather large.

Once you are able to optimize the delivery of your JavaScript and CSS you will notice a significant decrease in load times for your web pages.

Web pages that required 15 seconds before being optimized can load in half that time or less.  Lower the time required to load your web pages and you increase the enjoyment of your content, it’s just that simple.

Consider this following waterfall chart.

Notice line 2, this file loaded using the typical browser behavior which is to download the JavaScript while doing nothing else at the same time.

Now notice lines 4, 5 and 6 – here we can clearly see 2 CSS files and 1 JavScript file being loaded in parallel with the larger CSS being loaded while a smaller CSS file and a fairly large JavaScript file were loaded using the same amount of time as the larger CSS file. This is not the typical behavior for your typical browser.

How was this web page optimized ?

Very simply the dynamic.js file was loaded first because it contains some useful code that allows CSS and JavaScript files to be loaded in parallel.

CSS files are loaded the same as image files through the use of dynamic.js; using this model CSS files are simply loaded in parallel without any consideration as to what may be dependent upon whether or not they are loaded and this technique works very well.

JavaScript files are also loaded in parallel but in such a manner so as to allow this type of content to have dependencies with other JavaScript files.  A callback method is used to allow the next set of actions to be issued as soon as the JavaScript file has been loaded.  This allows jQuery to be loaded in parallel with CSS and other JavaScript files such that as soon as all the required JavaScript files have been loaded jQuery can be used with complete confidence that jQuery is ready and able to be used.

Some JavaScript programmers might want to use an interval that waits for jQuery to be loaded and ready but doing so is wasteful and not even required.  The cleaner approach is to use a callback method because doing so is less error prone and will always produce a cleaner crisper performance.

Consider the following Waterfall Chart

As before, line 2 is the only JavaScript that loads using the default browser behavior and nothing else was being done while this file was loaded.

This time lines 4, 5, 6 and 7 were all loaded in parallel during the time line 6 was being loaded.  Lines 4 and 5 are both CSS files and were loaded during the same 134 ms time-frame.  Line 6 is a rather large JavaScript file that contains jQuery.  Line 7 is swfObject.js which is used to load and embed SWF files.  As you can see, swfObject and jQuery were both loaded at the same time while both CSS files were being loaded.

What changed from the first waterfall to the second ?

The first waterfall was produced by causing jQuery to load before swfObject but only after swfObject had been loaded.

The second waterfall decoupled jQuery and swfObject by causing swfObject to begin loading before jQuery was requested with no dependency between jQuery and swfObject.  The callback for swfObject causes the SWF to be loaded and embedded while jQuery is being loaded.

The second scenario is a better experience than the first although the results are pretty subtle.

Enhanced SWF Loading

Along the way swfObject.js was also loaded in parallel and a SWF file was embedded after all the required JavaScript files were loaded by the browser.  The SWF was compiled using Flex Builder 4 using RSL’s for the Flex Framework and this produces a nicely optimized SWF that performs very well.  It should be noted the SWF is being loaded in a secure manner that hides the details of the actual SWF from view.  Try as you might you may not be able to determine the source of the SWF and therefore you may not be able to grab the actual SWF and this makes the use of the actual SWF more secure than might be otherwise.  The SWF you can see at which is a 3D rotating globe is not the SWF that will appear if your browser’s cache.  The SWF that appears in the browser’s cache is just a wrapper that knows how to load the actual SWF.  The fact that we expose the URL for the actual SWF in the source for this web page is something that could have just as easily been obscured using encryption for situations where the identity of the actual SWF might need to be hidden from view.

Additionally you may notice the right-click menu has been replaced by the SWF using a bit of JavaScript code.  The default menu is not all that pleasing anyway so why not replace it ?!?

Why do any of this optimization stuff ?

The reason one performs optimization is to make the user experience better than might otherwise be possible.

Sure, it is easier to allow the browser to do its thing because eventually the web page will be rendered and the user will be able to see what has appeared in the browser, no worries here.

For me, having spent about an hour just about 16 months ago to work-out what it takes to get my CSS and JavaScript optimized after having spent about 10 minutes with some Google information one Saturday morning… well not I don’t have to be concerned about whether my CSS and JavaScript files are handled in any other manner other than to use the code you can find in the dynamic.js script file.

For others, they might need to build some more elaborate methods for getting their CSS and JavaScript files into a single file for each where they end-up with a single CSS file and a single JavaScript file but their technique, as slick as it seems, means the CSS and JavaScript will still load using the typical browser behavior which admittedly will load a single CSS and single JavaScript file at the same time – my method means I have more control over when my files are loaded and I can use lazy-loading techniques to load my files after document ready if required to do so.

If you can use iFrames…

Some people don’t like iFrames because they have been deemed as being “evil” by those who just don’t spend enough time working with them.

You could just as easily load your JavaScripts using individual iFrames, one for each JavaScript file and then allow the iFrames to push the code they loaded into the parent DOM which results in loading your scripts faster because they can all be loaded in parallel.

The iFrame technique is a longer way to go to get the same thing accomplished versus the dynamic.js method outlined in this article but whatever it takes to get the work done works for me so long as I get to use the techniques I enjoy using.

Images can all be lazy-loaded too

The nice thing about loading image assets is that they can all be loaded in a lazy manner which means loading them only when they are needed or after document is ready, if the goal is to get your SWF content loaded faster than might otherwise be possible.

Optimized web pages are just more Agile

Why stop at using the Agile method to get your code developed ?  Why not make your web pages more Agile by allowing the browser to work for you rather than against you.

Maybe someday someone will produce a browser that can optimize how content is loaded but for now this is something a human being must do if it is to happen at-all.

Agile Development (Part Time)

What can you do with the Agile Methodology if you had a development team working part time for a week ?

Could they design, develop, implement and deliver a next-generation Content Management System on a world-class cloud ?

If they cannot do this then dump them and find a team that can !  It’s that simple.

When your development team is using Python 2.5.x and they are skilled using the Agile Method they should be able to quickly design just about anything using Python code (Django 1.1.1 of course) get some code working on their little development laptops and then push that working code onto the Google App Engine all in a week or less working part-time.  And by part-time I mean using less than 20 man-hours total.

Stay tuned to for more about this exciting new CMS.

The Google App Engine is ideal for this type of work and it is completely FREE of charge if you know how to leverage it the way it was designed to be leveraged.  Just like the SalesForce Cloud, the Google App Engine can be made to serve your content completely FREE of charge, virtually no matter how many hits your site gets over the life-cycle of its development and deployment.

Count the Cost

If your company employs one person to handle the database, maybe some kind of DBA (this is a rarity these days) and then another person to handle the back-end coding tasks using Java (this is pretty typical) and then another person to handle the middle-tier coding using Java (again this is pretty typical) and then another person to handle the HTML/JavaScript/CSS (more typical to have two people handling this one) and then another guy handling the Flex/Flash/RIA…  this can bloat the cost pretty high.  Why not just find one person who can do all of this ?  Java is not the most Agile technology stack one might use !  Python is !

The Enterprise has not yet realized the benefits they can derive from Python however LAMP is perceived to be of benefit but only when Java is being used as the language of choice.

Find on skilled Python developer who can handle every aspect of development and then leverage the Google App Engine to reduce your development cost while making the Agile Method work for your Enterprise.

Break All Barriers with Google App Engine

Google App Engine has a hard limit of 1000 files however… even hard limits can be broken once you know how.

VyperCMS(tm) is being engineered to run on the Google App Engine using some rather interesting techniques, one of which allows more than 1000 files to be stored in an app and this just may allow VyperCMS(tm) to see the light of day once again.

Stay tuned.

There’s more to being Agile than the Scrum

Some may wish to feel like their use of the Agile Method ends with the daily Scrum as if conducting a quick Scrum is what being Agile is all about.

The Agile Method is all about the code.

Read more of this post

What is Safe Blogging ?

What is Safe Blogging ?

(FYI – The link presented here in the text of this post takes you to the original Blog Article… Click it, always click the links…)

Vyper-CMS™ Static Content Optimizations Yield 200% Performance Boost

Vyper-CMS™ Static Content Optimizations Yield 200% Performance Boost

(FYI – The link presented here in the text of this post takes you to the original Blog Article… Click it, always click the links…)

Vyper-CMS™ is a Prime Investment Opportunity

Vyper-CMS™ is a Prime Investment Opportunity

(FYI – The link presented here in the text of this post takes you to the original Blog Article… Click it, always click the links…)

%d bloggers like this: