Dec 23, 2011

Why dynamic resource loading is so important for web application?

When I finished matrix.js 0.1, I asked for feedback from my friends. But the general response seems that I am trying to solve a problem which does not exist, so the library is useless. But I am not disappointed. I make it not because we have a pain point in my current projects, but because I see it is the way that we need to build future web application. It is better to explain what the problem is as I see, before I propose on a solution. I believe that, as we are developing web application, dynamic resource loading will be a essential function. The current way to import resource using <link> <script> tag statically and tools like combres will not be able to meet the needs of building web application.

The future web application? Isn't that we are a building web application. Yes, in a way we all building web application. There are two extreme of web application. On one extreme, web application completely depends of the <form> tags, all interaction depends on form postback, and page get re-rendered, one example are government web sites. On other extreme, web application does not have <form> tag, all interaction depends on ajax call, all UI is generated by JavaScript, template and the application stay in the same url until it is closed by user. This kind of application is fast and fluid, is as responsive as native desktop application. Gmail is an example close to this extreme. We are normally building web applications somewhere in between these two extreme.

To increase the loading speed of website, Minimize HTTP Requests is one of the rules listed in "Best Practise for Speeding Up Your Web Site". In .net, to minimize http requests, a popular approach is use tools like combres to combine, minified, gzip a set of resource, configure response header for client side caching. So that one big JavaScript file and one css file are generated and cached at client side. When we are building our current applications, the resource like JavaScript, css can be known more or less in advance. Because all pages in the website pretty much share some library like jQuery, a couple of widget plugin, like calendar, accordion, auto complete and so on. We can hand pick a set of resources required in specific page, or for the whole website. If we have a page require very different set of resources, we may need to pick another set of resources targeted for that page. So far so good.

As we are moving to an other extreme, building web application like Gmail, or even more complex, the architecture of our application changes. In this extreme, the application is responsive as desktop. The application compose and aggregate lots UI modules, or views, each views has their unique resource, and in a lot of case, we cannot anticipate which views will be used by user. All the views are built on demand of user. We need to load lots of client side template, view specific JavaScript, and unload them when view is not used, because the application is open for 8 hours a day continuously, memory management is critical for good client side performance. These requirements can not be solved by combres or statically resource loading. Combres can shorten the time to transfer resource from the server to browser. But it can not solve our architecture requirement like client side memory management, reusable, modular component design, dependencies tracking among resources. This resource is like Dynamic-link library, but it just happens at browser. Browser is our VM, not CLR not JVM. In .net, CLR is the run time. Assembly(DLL or EXE) is reusable unit. The loading of assembly is highly sophisticated. Here are some features.

  • Assembly Manifest contains of dependencies of dll/exe
  • Appdomain
  • Security check
  • Late binding
  • Dynamic loading

matrix.js is my starting point of building a true web application. I try to address similar issues we have like in assembly loading in .net, but I just do it for the browser vm not for CLR or JVM. Unlike CLR, browser vm has some advantage CLR does not have. In CLR, you can release your DLL, until you kill your AppDomain, in browser, you can unload everything dyanamically. You can remove DOM elements, you can unload a library , like jQuery by calling "delete window.jQuery", you can unload css by remove the link tag.

As we move to web application extreme more and more, preload two resource files (one js, one css) is like we load one gigantic EXE for a win32 application. Not only it is bad from the aspect of memory managemeent, it is even worse from the aspect of software engineering. It become monolithic artifact, while we want to have modular, reusable component.As HTML5 is ready, we will be building more and more application like Gmail and more complex, I believe dynamic resource loading is essential but not a fancy feature. Maybe you don't see the need to build a true web application right now, if you have, you can check out matrix.js