The Sencha Ext JS 6 framework with the Modern toolkit enables you to create great looking web applications for modern browsers, tablets, and smartphones. With Architect 4.0 and the open source Apache Cordova tool, it’s easy to create hybrid mobile apps. With the Cordova packager, Ext JS 6 modern apps execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device’s capabilities such as sensors, data, network status, etc. Cordova does not provide any UI components or MVC frameworks, rather it relies on frameworks such as Ext JS 6. Architect, with its drag-and-drop capability and integration with Sencha Cmd, helps with creating hybrid mobile apps quickly. Architect takes care of all the repetitive tasks, such as building your app, getting it in the proper place for Cordova, and running the proper commands to build, emulate, or run your hybrid mobile application.
Getting Started with Building Hybrid Mobile Apps
As a prerequisite, you will need to install the Cordova Command Line Tool, Java SDK, and platform SDKs for iOS and/or Android. Once you have developed an Ext JS Modern application using Sencha Architect, there are only two steps required to get the app running on an iOS or Android emulator.
Step 1: Add Cordova Packager from the menu of “Build Native App”
This steps modifies the Ext JS App.json with a native build profile as below:
It also creates the required Cordova directory structure for your app as shown below:
Step 2: Build the App and Emulate on iOS or Android
This adds iOS or Android Cordova platform and builds those platforms as shown below:
It also starts the iOS or Android emulator and runs the Ext JS based hybrid mobile app.
Adding Cordova Plugins
An Apache Cordova project maintains a set of plugins called the Core Plugins, which provide your application access to device capabilities such as battery, camera, contacts, etc. There are several third-party plugins that provide additional bindings, and you can search for Cordova plugins using plugin search or npm. To add Cordova plugins, just navigate to the cordova folder within your Ext JS project, and use the cordova plugin add command from the Cmd prompt. For example, to add the cordova-plugin-camera, you can use the command:
cordova plugin add cordova-plugin-camera
Hybrid mobile apps enable you to deliver your app to market faster. With Ext JS 6, Architect 4, and the Apache Cordova toolset, you have one codebase to quickly develop your app, and then you can distribute it to multiple platform app stores.