Application architecture like API Viewer (2.0)

Hello everybody,
Its been awhile since my last post on these forums. I'm raising a question to which i haven't found an answer on the forums yet.

Looking on the API viewer for the ext 2.0 i would like to know if there is a way to make the a web application using Ext to behave like the API viewer.

When I say "behave like the API viewer", i mean no use of iframes in the center region and the content of the tabs to be fetched using Ajax.

Inside the tabs I would like to have complex functionalities, like grids, forms, other (inner) layouts, all with their particular business logic. In a way something similar with the API viewer, or yahoo mail beta but a but more complex.

I've be studying Marketo architecture a little bit and I've noticed that when a new tab is created the response for the ajax included data (json), raw html, and some javascript.

What would be the best practice to implement something like this?

1. no iframes for the tabs
2. tab content is dynamic, i.e. there could be grids forms, and distinct business logic in each tab
3. custom javascript code for business logic to be loaded on demand
4. response to ajax calls to contain raw HTML and script, then script to be evaluated and to work with the new added raw html

This is what I do.

I have a tree on the left region to be used as a menu. The tree is built based on a JSON object. Each node has some configuration info to be used to decide what to do when the user clicks it (actually is a key to index a configuration structure). The normal behaviour in response to a tree click is adding a tab to the center region and loading an HTML fragment into it. The fragment is always like this:

Code:

---

<style>/* optional style */</style>
<div class="fragment" id="fragment-whatever">
  <!-- some stuff here -->
</div>

---

I do not load any javascript code with the fragment. All my code is loaded at startup time in a single javascript file. Every HTML fragment has an associated javascript class. After the fragment is loaded into the tab, I instantiate an object of the associated class. The configuration structure maintains the url of the fragment, the layout of the panel to create, the javascript class name associated, and other informations.

One thing you may want to consider is a naming scheme for your tag ids and CSS selectors so that different fragment do not interfere with each other. Sometime I get a reference to a DOM element in the fragment selecting by class name, but usually I assign to every fragment a unique prefix that I use for all the ids of that fragment. This however has to be tweaked a little if you have multiple copies of the same fragment loaded in different tabs at the same time.

Anyway the Ext 2.0 API application, has already much of this code.

Luca

Quote:

---

All my code is loaded at startup time in a single javascript file

---

That will slow down dev process! I loaded all js files on demand in my project.

Depending on the number of links in your left nav, couldn't your main page become quite large by maintaining each link's content in DIVs on the main page? What about autoLoad'ing a separate HTML file into the content panel?

Quote:

---

Originally Posted by fermo111

One thing you may want to consider is a naming scheme for your tag ids and CSS selectors so that different fragment do not interfere with each other. Sometime I get a reference to a DOM element in the fragment selecting by class name, but usually I assign to every fragment a unique prefix that I use for all the ids of that fragment. This however has to be tweaked a little if you have multiple copies of the same fragment loaded in different tabs at the same time.

---

Hi Luca.
For a medium size project i think your approach is the best one so far. However I believe that its possible to avoid sending raw HTML code and script in the ajax response. of course this depends on the particularities of the project but in principle this can be avoided.

Lets presume we have a medium size project and in this project we have to manage the Northwind business. For those who dont know, Northwind is a demo db which comes with the Sql server. In Northwing we have to manage Products, Customers, Order, Shippers, Suppliers, Employees etc. In total we can have around 15 business objects.

For each BO (Business Object) we have a List and Detail.
The List is basically a grid where all the objects of a certain type are listed. The grig could have a toolbar which could contain a filter and other controls.
The Detail is a form which can be used to add/edit the details of the BO.

So this is in principle the basics. The List and the detail can be abstractized into javascript classes. So for 15 BO we could have 30 javascript classes like: ProductList, ProductDetail. For the list and details classes we could implement 2 base classes like BaseList, BaseDetails, and those 2 classes can be inherited by the particular classes. The code in the base classes could contain all the main logic and in the derived classes probably the code can be resumed to just a simple configuration description.

The size of this custom code could not be so big, compared with the size of the Ext itself. So there can be no issue to load this code at the beginning.

The base classes could contain the html code as a template and when an entry in the left tree navigation is clicked then a new instance is created, initial data can be loaded after an ajax call. All you have to do is to manage intances of certain BOs.

Quote:

---

Originally Posted by fangzhouxing

That will slow down dev process! I loaded all js files on demand in my project.

---

How could this slow down the dev process (as in Development Process)? Do you mean slowing down the loading of the pages?

How do you load the js on demand?

Quote:

---

Originally Posted by Ephicient

Depending on the number of links in your left nav, couldn't your main page become quite large by maintaining each link's content in DIVs on the main page? What about autoLoad'ing a separate HTML file into the content panel?

---

Actually I do both. Depending on the fragment that is asked, this can be loaded in its own tab or in a "global" tab (replacing the previous content). This is specified in the config structure.

Quote:

---

Originally Posted by fangzhouxing

That will slow down dev process! I loaded all js files on demand in my project.

---

As hcristea pointed out, this depends on the size of the application, or better, the relative size compared to Ext itself. It also depends if this is a long lived application and the network speed. And then it also depends how often you clean your cache :).

Anyway, I have users with a 56K modem connection that do not complain. I have no idea how it is possible. Maybe nowadays all intenet contents is so bloated that they are accustomed to be waiting.

Quote:

---

Originally Posted by hcristea

How do you load the js on demand?

---

You use the "scripts: true" configuration parameter in the load() method of the panel.
It evaluates (using javascript eval() function) the javascript code inside the loaded fragment.

Quote:

---

Originally Posted by fermo111

Anyway, I have users with a 56K modem connection that do not complain. I have no idea how it is possible.

---

Probably they dont complain because the scripts are loaded from cache. I have an online web application using ext-js 0.33 and nobody compains about the speed. It takes awhile when i change the version and the scrips reload from the server but after that they are cached and the loading time is actually pretty fast.

Of course my users are regular people, not some web dev freaks who clean their cache every 5 minutes :D