How to avoid nested asynchronous callbacks due to Ext Direct and dynamic locale loading?

Question

I'm using Ext JS 4.1 to create a CRM-type application. To connect to the server side, I'm using Ext Direct via the RemotingProvider.

Before the application launches and renders, I want to retrieve some global variables from the server via Ext Direct, mainly the configured language of the currently logged in user and their configured permissions. Then, depending on the language of the user (from that result), I need to load both the Ext JS locale file and my own custom locale file. (Note that those must be loaded before any component is created, because they won't be applied afterwards.)

So, the procedure is:

1. get Globals via Ext.php.Globals.getGlobals
2. get Ext locale via Ext.loader.loadScript,
3. get App locale via Ext.loader.loadScript
4. setup viewport

Since 1.-3. are asynchronous, I saw no other way than to nest the callbacks:

Ext.application({
  name: 'MyApp',

  launch: function() {
    var app = this;

    // Welcome to callback hell...
    Ext.php.Globals.getGlobals(function(data) {
      // insert globals into app namespace
      Ext.apply(MyApp, data);

      // load ext locale
      Ext.Loader.loadScript({
        url: 'ext/locale/ext-lang-'+MyApp.currentUser.culture.toLowerCase()+'.js',
        onLoad: function() {
          // load app locale
          Ext.namespace('MyApp.locale');
          Ext.Loader.loadScript({
            url: 'app/locale/'+MyApp.currentUser.culture.toUpperCase()+'.js',
            onLoad: function() {

              // FINALLY, set up viewport
              var viewport = Ext.create('MyApp.view.Viewport', {
                controller: app
              });

              if (MyApp.util.hasPermission('usermgmt'))
                app.getController('Locations');

              // and so on ...

            }
          });
        }
      });
    });
  }
}); // end application

Is there any other, more elegant way to write this code? I know there are libraries for async flow, but can any of these work with the Ext JS API here? Or can I somehow force Ext.syncRequire to load the locales for me (so I only have one layer of nesting for the getGlobals call)? My own locales have a class defined, but Ext locales don't. Also, will this somehow mess up compiling the source files with Sencha Cmd?

Answer 1

Your concept is a bit weird therefore I have some recommendations for you. I use direct in many projects and most them had the need for localization and rather complex AC-Managements.

• Your app should not have the need to resolve or load something before it even starts.
• Language & localization should be provided the time the main application view get loaded
• Your frontend should never resolve any access control. You can (for most situations) perfectly achieve this with the direct API
  • reduce the API to these actions where the user have access (this also happens when the application main view get prepared)

That make your app faster and your life easier.

Update

The time the user login or just request the mainview you should have plenty information like the supported browser language or at least when the user selects a language. With that knowledge you just need to prepare the view.

A acl within a frontend is not secure and need to be rechecked at serverside it should therefore be avoided or simple. The simplest way with direct is to provide a API matching the user access and check for this within the frontend. That is a sort of implicit access control. How to implement this depends on the on the UI, but there are many ways

Update 2

Why don't you provide one build per language? I don't see any reason against it. Or split the framework from your application & classes which allows you to update while the clients can still use the cached framework lib.

The API can be easily checked for controller (backend) access and method (backend) access. Where the controller may be your tab and the actions your menu elements. Cause the API is global available you just need to check if the objects or properties exists. Let's pretend we have a backend-controller named Car and Method called Drive we can check for this like

if (Car) {
    // has controller access
    if (Car.Dirve) {
        // has access to the 'drive' action
    }
}

Answer 2

Unless I'm missing something very obvious, my take on this would be completely different.

I have a similar scenario in a system where the user may be either a superuser or an admin, and based on this the main menu will change.

But I don't query the server for this information from within the Ext application code. Instead, my header includes something very similar to how direct loads:

<script type="text/javascript" src="globals.php"></script>

Then globals.php has something along these lines:

<?php
if ( $iUserIsSuperuser ) {
?>

gUserIsSuperuser = true;

<?php
}
?>

Then as for the locale js files - can't you simply include the correct ones in your index.php using conditions?