Building Hybrid Mobile Apps with Sencha Architect 4

For enterprises, application code portability and faster time to market are important criteria for application development. Hybrid mobile applications are important because they are written with the same web technologies — HTML, CSS, and JavaScript — as any other enterprise web app. There is no need to port your application to Objective C, Swift, or Java to support multiple platforms — iOS, Android, and Windows. For most enterprise applications, a well-written hybrid app shouldn’t look any different than its native equivalent, and users should not notice a difference between hybrid and native apps. Like any other native app, users can find hybrid apps in app stores, install them on their devices, and use the same device capabilities.

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

Conclusion

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.