Rapidly Build Cross-Platform Enterprise Apps With JavaScript And Electron

Desktop apps are powerful execution tools that run on your local machine natively. They provide unified, holistic navigation and user experiences when compared to an in-browser app. Desktop apps, on the other hand, are evolving. The advancement of modern web technologies has resulted in a significant shift in the desktop application development paradigm, particularly in terms of implementation. JavaScript and Python, for example, have inspired hybrid desktop app implementation.

Hybrid app implementations have improved web developers’ ability to deliver desktop apps. Despite this, there is a disadvantage: increased flexibility exposes developers to the risk of reduced performance and increased memory consumption. This is due to the fact that desktop apps execute application code locally on your machine. Unfortunately, native code is still the future of desktop apps, and as a result, we cannot compromise on the performance and memory usage.

That said, however, there are tradeoffs developers can make. We can reuse front-end developer knowledge to build desktop apps using web technologies via Electron.

In this blog post, we’ll look at how we can quickly build cross-platform enterprise apps using JS Frameworks like Sencha ExtJS and Electron.. After you’ve mastered these concepts, you’ll be able to create your own desktop applications with Sencha Ext JS and Electron.

How can I create a Sencha Boilerplate application?

To get you started with Sencha Ext JS conveniently, the Sencha CMD provides a starter app that contains the minimum boilerplate code to kickstart your application development process with Ext JS. To create the starter app, run the following command in your terminal.

sencha -sdk <path-to-ExtSDK> generate app -classic StarterApp ./senchaelectrontutorial

How can I create a dedicated Electron app directory inside the Sencha project?

To create an Electron app inside your Sencha Ext JS project, you will need to build the application using Sencha CMD from your Sencha starter app directory. The following command builds the Sencha application and puts the build inside the electron/app directory within the starter app directory.

sencha app build -des electron/app

What is an easy way to install dependencies in my Electron app?

In order to install dependencies inside your Electron app using npm, you need to create a package.json file inside the electron directory. Once that is done, go ahead and install the dependencies for your Electron app using npm.

npm install electron-prebuilt -save  npm install electron-packager --save-dev

How can I create an executable file for my Electron application?

So far, we have seen how to create an Electron app using the Sencha Ext JS application framework. Using this basic starting point, you can build to create a much more meaningful and usable app for your use case.

After developing the app, you will need to create its executable file to run it as a desktop application. You can package your Electron app into an executable file using the npm command below.

npm run-script package

As you can see, creating an Electron-based desktop application with Sencha ExtJS is pretty easy and quick. Electron and ExtJS work together very well and are highly recommended to create both simple and complicated desktop applications with a seamless user experience.

Ready to get started with Sencha Ext JS? Head over to Sencha Ext JS and create your own desktop apps with Sencha and Electron now.