How to Build a Great Looking Universal App with Ext JS – Part 2

Posted on in Ext JS 6

In part 1 of this series, I described what a universal app is and how it’s created in Ext JS 6. Now, I’ll show you how I built my application.

Folder structure

To create a high performance Ext JS 6 universal app, I used Sencha Cmd. I generated a workspace first, because in my folder I host multiple versions of my app (free and commercial), which all share the same code packages and framework.

To generate a workspace, I browsed to the downloaded Ext JS 6 SDK. From there, I typed the following command:

sencha generate workspace ../spotifinderworkspace6

This generated the following structure:

Generate workspace

Then, I generated the application. I called it _engine. Why? Because I can create customized versions of my app with different behavior or branding. For example, a music app that plays songs in Pandora. To do that, I would only need to extend the engine Ext.Application, and override certain elements.

Here’s how I generated the application:

cd spotifinderworkspace6/ext
sencha generate app Engine ../_engine

Generate application

Toolkits

The classic folder is the folder structure for the classic toolkit. It contains the rich components that are great for desktops (or tablets). Also, it has support for legacy browsers.

Here’s what my app in the classic toolkit looks like:

App in Classic toolkit

It kind of looks like Spotify. I used traditional desktop components with a custom stylesheet. Because the application is shown on a large screen, there is a lot of space for showing extras, such as the album artwork, additional information, and also the settings screen (which is docked to the side).

I created unique views. Some of these views require their own logic. That’s why my folder structure in the classic toolkit looks like this:

Folder structure in Classic toolkit

The modern folder contains lightweight touch components. These are great for touch devices, including phones (or in some cases, tablets too). These components are optimized for a touch experience instead of mouse and keyboard. Because these components are lightweight, they also perform really well on a mobile device which has less processing power.

App in Modern toolkit

Because the screen is small, just the absolute necessary components are shown. To open the settings view, tap the gear button. It will nicely slide in the settings screen with an animation.

Folder structure is small

Because it doesn’t contain too many components, my folder structure is small. Again, only views and some behavior code, which are required by this view, are unique. Everything else will be shared across toolkits.

The shared code can be found in the app folder:

Shared code in app folder<

Tip: You can extend from view controllers (VC) too.

For example, you could have a shared Viewport VC that contains most of the behavior. The Viewport VC of the classic and modern toolkit folders only contains code that’s required for their own components.

Here’s an example. Below is a snippet of the Viewport VC, which is located in the app/main/ folder. As you can see, it extends from Ext.app.ViewController. The class itself is called Engine.view.main.MainController.

Snippet of Viewport VC

Now, here is the code of the Viewport VC in the classic folder. It’s located in the classic/src/main/ folder, and this time it extends from Engine.view.main.MainController, which is the shared VC. Don’t forget to put an alias in this class. That’s how you would link this classic view controller to the classic main view.

Code of Viewport VC in Classic folder

Microloader

The microloader can detect on which environment it’s running, and serve the right experience. This means when I load my application on a desktop, I see my desktop version of the app with the Spotify theme, and when I open my application on an iPhone, I get the phone interface with the iOS theme.

All the magic here is in the Ext.platformTags. You can even run this command from your browser console, in an existing Ext JS 6 app. It will provide the object with all kinds of information, such as the browser version you’re running, OS, device type, etc tamiflu dosage for adults.

You can configure your app, so it serves the right experience. The secret here is the app.json file. You need to create build profiles, and you can bind every app.json setting you like to a build profile, such as the toolkit (component set) and the theme:

    "builds": {
        "classic": { //name of the build profile
            "toolkit": "classic", //component set
            "theme": "theme-spotifext", //name of the theme
        },
        "modern": {
            "toolkit": "modern",
            "theme": "theme-cupertino",
        }
}

Switching the experiences is handled in the index.html file. When you generate your application with Sencha Cmd, this will be all stubbed out for you.

Index.html file

MVVM Pattern

With Ext JS 6, you can use the MVVM pattern.

MVVM pattern

View – all components on your screen
ViewController – logics for a view
ViewModel – for binding data to a view

data model – structure of your entity
data record – the actual data
data store – client-side cache

All views in Ext JS can be nested, and so can the view models and view controllers.

Nested views, view models, and view controllers

The benefits of this pattern is that code is easy to read and maintain.
It’s a consistent file structure for your code and classes, and it facilitates code reuse.

Why Ext JS vs. Open Source

With Ext JS 6, you get an all-in-one solution. You don’t need to maintain various dependencies and have expertise in many different technologies that all need to work together.

For the application that I created, I used the following Ext JS 6 solutions.

Ext JS 6

Example Open Source Solution

Sencha Class System ECMAScript 6 Classes
Border Layout JS + CSS
MVVM Architecture Angular JS
Desktop App Bootstrap / Responsive CSS
Mobile App jQuery Mobile / Ionic
Promises ECMAScript 6
Grids jQuery Plugin
Touch Gestures / Events JS
Routing AngularJS Plugin
Offline Caching HTML5 / JS
Theming Sass / CSS
Sencha Cmd Grunt + Yeoman + Bower

I could have used an open source solution, but then I would have had to stack technologies on top of one another. For example, ECMAScript 6 is not supported by Internet Explorer yet. With Bootstrap or responsive web design, my users would have to download lots of code, which they don’t even see, and it’s not optimized for each device (as described in my previous blog post). There are jQuery plugins for grid components, but these are not half as powerful, and don’t perform well with large data sets. And who should I call when my AngularJS plugin suddenly stops working with the latest browser update?

My application is just a simple app, and I already would have at least 10 dependencies. What about a real enterprise app, which has a codebase that’s 50 times bigger? I would need to have knowledge of all these various tools, cross my fingers that these technologies work well together, and are future proof for the next 5 or 10 years (while browsers are upgrading).

Conclusion

That’s exactly the reason why I chose Ext JS 6. An all-in-one solution, where everything is configured the same way, every piece works together, and looks the same. And because Sencha is a commercial company, there is always a support number to call, and they will make sure that my app works in the future.

Make a native build with Ext JS 5, Sencha Cmd 5 and Phonegap / Cordova with plugins.

Posted on in Cmd Cordova Ext JS Ext JS 5 Mobile Node JS Sencha

With the release of Ext JS 5; we finally have Touch experience in the framework. So yes, you can start creating tablet applications.
Maybe you are now wondering, can I also package Ext JS 5 apps with Apache Cordova or Adobe Phonegap, so I can sell my app in the App Stores?
Well yes, you can!

Here are the steps I took; for porting my app with Cordova/Phonegap.
**note, instead of using the keyword phonegap, Cordova users may use the keyword cordova instead.
**note2: you will need to have the following dependencies installed: (Sencha Cmd, Node JS and Phonegap or Cordova)

There we go:

  1. Let's generate a new Ext JS 5 app
    Browse with your terminal to your Ext JS 5 SDK folder. Run the following command: sencha generate app MyApp ../phonegapdemo Here we generate an Ext JS 5 demo app, in the phonegapdemo folder, which stands next to the downloaded extjs5 sdk folder.
  2. Open app.json
    Add the following code block:
        "builds": {
            "ios": { //build name
                "packager": "phonegap",
                "phonegap": {
                    "config": {
                        // Uncomment the line below and add the platform you wish to build for
                        "platform": "ios",
    
                        "remote": false,
                        "id": "com.domain.MyApp",
                        "name": "MyApp"
                    }
                }
            }
        },
    
    Here I'm adding a custom phonegap build for iOS. I used as a build name the keyword ios, a name i choose to recognize iOS builds, but incase you want to make for example Android builds, I could change it for android. In case of an Android I would also need to change the platform keyword. Note also the id property, which expects an id in reversed domain style; and name which should be the name of the Sencha App namespace. In case I want to build via the Phonegap cloud web service; I should set the property remote to true. Then, you will also need to create a local.properties file in the phonegapdemo folder; with the login details for build.phonegap.com:
    phonegap.remote.username=my@email.com
    phonegap.remote.password=mypassword
    
  3. Create a native build
    Back to your terminal, navigate to the phonegapdemo folder, and run the following command:
    sencha app build ios
    
    Note the keyword ios, that's the build name which was set in app.json! Mac OSX users, might need to prefix with the word sudo. In case you are using Phonegap cloud webservice, it will now upload your app. In case of Phonegap local or Cordova, this command will now generate the following folderstructure like below. Instead of the command sencha app build, I could also use the command sencha app prepare; it would prepare the folderstructure as well.

    phonegapdemo
    - phonegap
    - - config.xml
    - - hooks
    - - platforms
    - - plugins
    - - www


    The www folder, will be the place, where a copy of your Sencha Ext JS 5 app will be located. The plugin folder will contain Device API plugins after installing those. (see the steps below, woot!)
  4. Enable the JS Phonegap/Cordova API
    Although you could build and run your application on a device by now; it might be handy when you enable the Phonegap/Cordova device API. For example, in case you need to install plugins, such as the inappbrowser plugin. Open in an editor phonegapdemo/index.html and add the following line, before the micoloader bootstrap.js script:
     <script type="text/javascript" src="cordova.js"></script>
    
    You might wonder, why I won't add this cordova.js file to the js array in app.json. Not sure if I did it wrong, but I was running into sencha build errors because of that. Mind you, the cordova JavaScript file will be created while building the app; so it's not available in the project root.
  5. Let's build it (again)!
    sencha app build ios
    In case you are building with the PhoneGap cloud webservice, you can start scanning the QR code. Cordova or PhoneGap local users, can start opening the project file from the phonegapdemo/phonegap/platforms/<platform> folder, and build it via the developer toolkit.

Wait, let's add another step, as a BONUS!
What about installing the inAppBrowser plugin, to make sure PhoneGap/Cordova will open your external hyperlinks in browser window within your app!
(That's it's what you want iOS user! Cause iOS ignores opening new browser windows. grrrumbll!!!!)
These steps are for PhoneGap Local / Cordova users:

  1. Edit config.xml
    You can find it here: phonegapdemo/phonegap/config.xml Now add the following line, (if not already available):
    <gap:plugin name="org.apache.cordova.inappbrowser"></gap:plugin>
    
  2. Install the plugin:
    Run from the command-line the following command, from the phonegapdemo/phonegap folder:
    phonegap plugin add org.apache.cordova.inappbrowser
    
    Again, Mac OSX users, you will need to have admin rights, so prefix with sudo. This command will add the plugin into the phonegapdemo/phonegap/plugins/ folder.
  3. How to open URLs
    Edit the demo app, and create a button, which will open an external URL in a separate browser. For example: phonegapdemo/app/view/main/Main.js
    Ext.define('MyApp.view.main.Main', {
        extend: 'Ext.panel.Panel',
        requires: [
            'MyApp.view.main.MainController',
            'MyApp.view.main.MainModel'
        ],
    
        xtype: 'app-main',
        
        controller: 'main',
        viewModel: {
            type: 'main'
        },
    
        padding: 20,
    
        layout: 'vbox',
        items: [{
            xtype: 'button',
            scale: 'large',
            text: 'Open Web Page',
            margin: 20,
            handler: 'openWebPage'
        }]
    });
    
    And note here, the magic: window.open(). See below, the implementation in my viewcontroller: phonegapdemo/app/view/main/MainController.js
    Ext.define('MyApp.view.main.MainController', {
        extend: 'Ext.app.ViewController',
    
        requires: [
            'Ext.MessageBox'
        ],
    
        alias: 'controller.main',
    
        openWebPage : function(){
            var url = 'http://www.google.com';
            window.open(url, '_blank', 'location=no,EnableViewPortScale=yes'); 
        }
    });
    
    BAMMM!!! Build and Test your inAppBrowser, it should work!