Latest Ext JS 7.8 is now available. Learn more

Building Universal Applications with Ext JS

February 18, 2020 151 Views

Many customers who use Ext JS Frameworks to build data-centric, desktop-based applications would like to supplement them with a mobile or tablet app. Creating a mobile app used to entail switching to a completely new development environment (like Swift or Objective-C for iPhone, and Java or Kotlin for Android).

One of the most interesting aspects of Ext JS is that you can create your mobile application using the same language and tools that you used to create your desktop application. You can also share code between your desktop and mobile applications, if necessary. This is referred to as a ‘Universal application.’

In this blog, I’ll show you how to get started generating with a Universal app from one of our Open Tools templates, and explore what the built-in template provides.

Step 1:
The first thing you need to do is download a copy of the Open tools ExtGen tool. If you’re a current customer, then you already have credentials to log in to the Sencha-npm repository to download the tool. If not, it’s easy to request a trial of Open tools. Head to Ext JS download page and complete the trial download form. You will then get an email with your user id and password to log in to the Sencha npm repository.

Step 2:
The best way to start with Open Tools is to refer to our Getting Started with NPM Guide
This guide describes the Open Tools requirements and also links to the trial signup page above. Once you have your email with credentials, use the command to logon to the Sencha npm repository.

npm login --registry= --scope=@sencha

Once successfully logged in, download the Open Tools ExtGen tool using

npm install -g @sencha/ext-gen

The install completes and presents you with some Quick Start help:

Step 3:
The easiest way to generate a starter Universal Application is to copy and run one of the Quick Start examples, specifically, this one:

ext-gen app --template universalmodern --moderntheme theme-material --name CoolUniversalApp

Running this command will create a new project folder at cool-universal-app, and copy a universal application template into that folder. It will run ’npm install’ for your project to retrieve all of the needed npm packages, including the packages for the Ext JS framework.

Step 4:
Once the command is complete, the following message will appear:

type “cd cool-universal-app” then “npm start” to run the development build and open your new application in a web browser or checkout package.json to view additional build scripts.

Follow the instructions in this message to change directories and run npm start

cd cool-universal-app

npm start  

This will trigger a ‘build’ of your application defaulting to the ‘desktop’ profile of your app. After a few moments, a browser window will appear with the template of the desktop application.

The desktop template comes with a menu on the left side with 2 views, the Home view and the Personnel view as shown above.

But remember? We generated a Universal template—so where is the mobile app?
Well, we need to get to a command prompt and build the mobile profile in order to see it!

Step 5:
Cancel the command line that is currently running ’npm start’ by pressing +c. In the project folder invoke your editor. I’ll be running the Visual Studio Code editor that I use by typing:

code .  

This brings up the folder with the project’s source code.

Step 6:
Since this is an Open tools application, there is a package.json file that contains scripts that are available to run. Open that file to see a script called “dev:phone”.
Run the following command in the Visual Studio build window.

npm run dev:phone 

Step 7:
Once this command completes, a browser window will display. If using the Chrome browser, you can emulate a phone in the browser—doing so will result in the following mobile app being displayed.

As you can see, the Universal application template gives us a great start in using a single Ext JS project that can serve both as a desktop and mobile application. From here, you are able to add any new functionality you need, and where possible, even share business logic or data access copy between the desktop and phone application.

To learn more about universal applications or Open Tools, take a look at our extensive product documentation.

Try Ext JS 7.1

Ext JS 7.1 is our latest product version. Check out the 30-day free trial and read more about the improved product features in this release.

Recommended Articles

8 Must-Know Tips for Choosing the Right Web Application Framework for Your Project

Starting web application development on a project can feel like a very difficult task. The abundance of frameworks adds to the confusion. It leaves developers…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

Ext JS 7.8 Has Arrived!

The Sencha team is pleased to announce the latest Ext JS version 7.8 release. Following the 7.7 release, which included numerous quality enhancements in Ext…

How to Work with Ext JS Models and Stores: Tutorial on Managing Data and State

Ext JS is a popular JavaScript framework for creating robust enterprise-grade web and mobile applications. The framework offers a rich set of high-performance and fully-tested…

Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s not the case anymore. Modern software development requires apps to…

View More