Still on Ext JS 4.x? Learn How to Build Universal Applications using Ext JS 6.6 with Open Tooling

As I think about all of the valuable features that have been added to Ext JS since version 4, one feature that comes to the top of the list is the ability to create universal applications.

What are universal applications?

Universal applications are web applications that can ‘adapt’ to multiple device types, for example, having a desktop and a mobile version of the app. The beauty of universal applications in Ext JS is that you can create these multiple device profiles from a single code base, which gives you the ability to share all non visual parts of the application (like the data stores and controller logic) and even parts of the view. But where universal apps really shine is when the view requirements are different, for example, where the desktop version of the application can handle a very rich grid-based interface, and the mobile/phone version of the application appropriately uses a simpler list component. These two different views usually share the same back-end data needs, so those pieces of the application can be shared.

One way you can experience an example of an Ext JS universal application is by viewing our Coworkee sample application on our home page – scroll down to the ‘See What’s Possible with Ext JS’ section and click the ‘See it in Action’ button, or simply click here.

View of our Coworkee Sample Application

You will be prompted to log into our ‘Coworkee’ employee directory application from here. If you select the ‘Employees’ menu item on the left, you see the rich desktop version of the application:

Coworkee Sample App: Employees Menu

Now, if I emulate a phone with the chrome dev tools, you will see how unusable the application would be if I kept the grid view as the UI for the phone.

Coworkee Sample App: Grid View

Fortunately, with the universal application functionality of Ext JS, a reload of the page allows the application to detect that it is running on a phone, and the user interface adapts to the device. In this case, the mobile view uses a ‘list’ component instead of the grid to display the appropriate view to the mobile user.

Coworkee Sample App: Page Reload Detects Mobile & UI Adapts

How do I take advantage of universal applications in my Ext JS 6.6 projects?

With Ext JS version 6.6 we introduced a new set of tools that we call ‘Open Tooling’. These tools allow for the use of open tools like webpack, npm, babel and node. With Open Tooling we also introduced several new application generation templates, including templates to scaffold universal applications.

Download a free 30-day trial of Ext JS with Open Tooling here: https://staging.sencha.com/products/extjs/evaluate/opentooling/

Once you have downloaded the trial for Ext JS with Open Tooling, follow the getting started documentation at: https://docs.sencha.com/extjs/6.6.0/guides/getting_started/open_tooling.html

Once you have the Open Tooling installed, open a terminal window and start ExtGen in interactive mode:

ext-gen app -i

When you get to the questions highlighted below, select the following:

Follow the remaining steps to generate and run your new application and run it in a browser. You will notice that you get both a desktop and a mobile/phone version of your application.

Generated Desktop Application

Generated Mobile Application

The generated desktop application includes functionality like a hideable menu on the left, single page application (SPA) routing, and a layout that allows for a detail view. The mobile version of the application uses mobile components like a ‘list’, which is a more appropriate UI component for smaller devices like phones. The mobile version is also ready to be delivered to an app store as a hybrid application with PhoneGap or Cordova.

Open Tooling also gives you the ability to add additional menu items and views to the application by creating a ‘viewpackage’. Use the following command to create a ViewPackage called ‘Employee’

ext-gen viewpackage employee

You will now see an additional menu item called ‘Employee’ in the desktop version along with a template view that is ready for you to add your specific logic.

Additional Menu Item called ‘Employee’

You can create as many ‘viewpackages’ as you need for your application – it is a very quick way to scaffold the initial structure of your application.

Next Steps

With our Open Tooling, you can see how easy it is to create the structure of a universal application. You are able to easily scaffold your views and begin to create your desktop and mobile application structure. Give our Open Tooling a try and see how quickly you are able to begin building your applications with Ext JS 6.6. Want to learn more about how to build universal apps? Join us for a webinar on Thursday, October 25th at 10am PDT / 1pm EDT where we will provide an in-depth tutorial. Register here: https://attendee.gotowebinar.com/register/7993376260842287361.