Building cross-platform applications is an excellent option for many organizations that need to support different technology vendors. Today, we can build websites that reach a massive audience regardless of the device that they use. Additionally, cross-platform mobile applications are an attractive option. All that is left now are the beloved applications that sit on our desktops. With tools such as Electron, desktop applications do not have to suffer from a lack of operating system support.

Electron is a framework that allows developers to create cross-platform desktop applications using a combination of HTML, CSS, and JavaScript. What makes Electron a viable solution is that it pairs with JavaScript frameworks very well. This means that there is generally a lower learning curve when injecting JavaScript into an Electron solution. Since JavaScript is such a popular option in today’s application development domain, it can make sense to leverage that experience in an Electron solution.
Developers can use any modern JavaScript framework, such as Angular, React, or Vue, within an Electron application.

For this post, I will be discussing how you can pair Electron with Vue to build your next cross-platform desktop application. I will cover some of the reasons why Vue should be considered as a viable integration option and highlight some useful features of Electron that I have been exposed to.

So Why Use Vue with Electron

While there is no perfect framework to pair with Electron, Vue offers some advantages. It is worth noting that the choice of the framework will depend on several factors. These are just general observations and findings from my experience with Vue.

Reasons to consider Vue:

  • The lower learning curve for new developers
  • Features a well-organized template for Vue files
  • Less boilerplate code that increases project size
  • Able to easily customize application builder (might be dependent on the way you scaffold your Electron solution)
  • Swiftly build prototypes and/or small-medium sized applications

A word of caution: if you choose Vue with Electron, the documentation is scarce in some areas. I assume that Vue is not a popular JavaScript framework like React and Angular.

During my time using Electron with Vue, I have come across several useful features. I will provide a few examples of these features, and hopefully, this will shorten the gap of implementing them into your next Electron/Vue application.

Custom Menus

One common scenario, when building Electron applications, is to come up with your menu schema. Electron ships with a default menu that includes options you would find in your Chrome browser since Electron runs on Chromium. That said, the default menu will probably not be good enough for a production build of your application. Depending on your situation, you might want to limit certain menu features from your users, such as the developer tools or the ability to force reload the application. Customizing your application’s menu is a straightforward process.

You can customize the menu within the Electron main process file.

Figure One Electron Vue

Custom Events

In my experience using Vue with Electron, I have used Electron specific events to accomplish certain tasks. Depending on your application, you will more than likely need to use events. One common scenario would be to show a confirmation popup window when you want to exit the application. This not only utilizes Electron’s built-in events, but it uses custom Electron events as well. Below is a simple implementation for this.

First, a preload.js file is needed so that Electron events can be properly used within Vue components.

Figure 2 Electron Vue

Next, the preload file will need to be referenced in the Electron main process file. The preload file path will depend on both the environment and operating system the app is running on. Additionally, the preload file will need to be added as an extra resource within a builder config file for production builds. This process will be discussed in a later section.

Within the method for creating the Electron window:

Figure 3 Electron Vue

In the Electron main process file, you can then send out a custom event to any Vue components that are subscribed to it.

Figure 4 Electron Vue

A Vue component can then perform certain logic once this event occurs.

Figure 5 Electron Vue

Here are the results from clicking the exit button in the application.

Welcome to Your Vue App Figure 6

Referencing External Resources

There might come a time where your application will need to reference-dependent static resources. This could be a spreadsheet file containing data for U.S. states, cities, zip codes, or a CSV file containing data about countries. Also, it could be a preload file, as previously mentioned in this post.

When your Electron/Vue application is built for production, the application gets bundled into an asar file. This is your whole application. If your application needs to load external files, such as a CSV file or preload file, it will need to point to that specific file. As mentioned earlier, your application gets bundled into an asar file. How can you reference a dependent file from your Electron/Vue application? There are essentially two things you need to do.

1 – Customizing the Electron Builder

The first step is to customize the Electron builder within a Vue config file. One thing to note is that I have used electron-builder for building Electron applications and used it for this example.

You will want to create a file called vue.config.js that resides in the root directory of your Electron/Vue solution. This file will, again, allow you to customize the builder for your Electron/Vue application. There is an option to specify any extra resources (or external resources) that your application may reference. The builder’s configuration will need to know where your resource is in your solution and where to place it.

Your config file should look something like this.

Electron Vue Figure 7

After the application gets built and installed onto the local machine, any resources within the extra resources section will be placed under the following paths:

  • Windows: C:\Users\\AppData\Local\Programs\\Resources\Vue
  • Mac: /Applications/.app/Contents/Resources/Vue

2 – Referencing the External Resource

The last step is to reference the external resource, using the appropriate path, within your application. It is recommended that you specify both the development and production path to your resource so that both environments can access it. This can be accomplished within the Electron main process file. The reason is that we can utilize the Node dirname variable. Using this variable will help us acquire the full path.

Figure 8 Electron Vue

From there, you can add this logic within a custom, or predefined, Electron event. The event could either process the file and send the results back to any components subscribed to a “reply” event, or the event could send the full file path to any subscribed components for them to process the file.

In this example, I used an approach where the file is processed in the Electron main process file, and the file contents are sent to a subscribed component.

Vue component publishing an event to get a file’s contents and then listening for a reply event.

Figure 9 Electron Vue

Once the event gets published, the Electron main process will read the given file. Then it will reply with the contents of the file.

Figure 10 Electron Vue

The way you process your file will depend on the file type and the actual data that is contained within it. For this example, I used a text file. That said, I encourage you to use the appropriate logic to extract the contents of your file.

Closing Thoughts

Using Vue with Electron has become an excellent duo for building cross-platform desktop applications. You can craft custom menu options that can help add to the user experience. Also, Electron and Vue allow you to develop custom events that allow for more robust business logic. Finally, crucial assets such as external files can be properly processed inside an Electron/Vue solution, which can help you need swift data processing. All in all, Electron and Vue give you the tools to build rich, customizable desktop applications.

 

AIS recently completed work on a complete revamp of the Texas Workforce Commission’s “Texas Reality Check” website. Texas Reality Check is an Internet-available, fully accessible, responsive, mobile-first and browser-agnostic design. This website was tested for accessibility, performance, vulnerability scans, and usability.

Background

Texas Reality Check (TRC) is targeted at students on a statewide basis, ranging from middle school to high school (with some colleges and universities making use of the tool for “life skills” classes). The goal is to inspire students to think about occupations, and prepare for educational requirements so they can achieve the income level that meets their lifestyle expectations.

This tool walks students through different areas of life, on a step-by step-basis, identifying budgets associated with living essentials such as housing, transportation, food, clothing, etc. Students make selections and then calculate a corresponding monthly income that would afford the selections they make. From here, the students are directed to another page and connected to a database on careers and associated salaries.

However, the existing site was dated and in need of improvements in three core areas: UX, Accessibility, and overall performance. Here’s how AIS delivered:

Read More…

angularI recently attended ng-conf (the annual Angular conference) held in Salt Lake City during the first week of May. Over 1500 developers were there. Of course the big news was that Angular 2, the next version of the framework, has moved from beta to release candidate.  Angular 2 (which departs substantially from earlier versions of Angular) has a forward looking emphasis, incorporating emerging technologies like web components, ES 2015 (the new version of JavaScript) and TypeScript.  You can read more about it here: http://angular.io.

Not surprisingly most of the workshops at the conference focused on Angular 2.  A single session track ran on both Day 1 and Day 3 and you can find the YouTube videos for those sessions on YouTube at this link: https://www.youtube.com/playlist?list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j.  There were multiple concurrent sessions on Day 2 and not all of them were captured on video. I attended several that covered building components in Angular 2, TypeScript and unit testing.

Developer uptake has been strong with upwards of 360,000 developers who are active on the Angular 2 site.  Several enterprise partners that have started using Angular 2 were present, including Capital One, Fidelity Investments and the Weather Channel. Read More…

Screen Shot 2015-12-09 at 1.21.26 PMWith the abundance of JavaScript libraries and frameworks available today, it’s hard to decide what is going to work best for a certain requirement. Add in the fact that there are many server-side tools that can also accomplish the task and you could spend hours just narrowing down options to test before deciding on the path you’ll take in the end. This was a recent conundrum for me when approached to incorporate child data management in the parent forms on a SharePoint 2010 project. My experience with JavaScript has been limited over my career because I’ve been so focused on the backend of SharePoint during the majority of that time. My current client has need for a better user experience, so I’ve been trying to fill that hole in my skills.  This project offered an opportunity to do just that.

While it’s possible to put an ASP GridView control in an Update Panel, a client-side approach seemed cleaner and a way to expand my JavaScript skills. I looked at many options like JQuery Datatables, koGrid, and a few others, but they didn’t give me the look, price (free), and/or TypeScript definitions for me to easily take off with implementing it.

I decided to build my own solution since it would be a relatively simple design and it would let me dig into KnockoutJS. In addition, it would be easier to use TypeScript to build an easier-to-maintain solution since it incorporates many of the ECMAScript 6 features like classes and modules, among others. Read More…

javasciptWhat is ECMAScript? ECMAScript is the standards name for the language many of us know as JavaScript. To envision the relationship between the two, think of ECMAScript as the language, and JavaScript as the dialect. There are other dialects – including JScript, ActionScript, etc. – that are still around. These days, developers commonly use the terms “ECMAScript” and “JavaScript” to mean the same thing – and more and more I see developers referring to implementing ECMA, ES, or ECMAScript.

Version six of the ECMAScript standard – code-named “Harmony” – will include some very interesting features that bring the experience of implementing complex apps on the client side closer to the experience server side developers know and love. Although some of these features have been previously available using a combination of patterns and third party plugins – ECMAScript 6 aims to make many commonly used features available natively.

I’ll walk through a few of my highlights below, but keep in mind version 6 is a large release that has been a long time coming (five years since the last version’s publication) and has a ton of functionality and improvements that will be well worth exploring. So the features sites below should not be seen as any more or less important that other ES6 features. Also, it’s worth noting that not all browsers will support every feature right away, but it appears as if the development teams behind the major browsers are very motivated to support as much of the standard they can – as quickly as possible. Read More…

Change Data Views from Boring to Flashy

Data, data, data… Working professionals are inundated with data.  Anything that makes that data easier to understand, analyze, and compare is a welcome breath of fresh air.  Why snooze over a boring and static table when you can view key metrics at-a-glance in a snazzy chart?

Boring...
Boring...
Snazzy!
Snazzy!

Many SharePoint sites are used for managing internal business processes where users store and analyze data. SharePoint 2013 makes it easy to store data in lists, and view that data in a team site, but usually that data is shown in a basic table view. Read More…

I recently encountered a requirement to programmatically zip multiple files into an archive in a Windows 8 JavaScript/HTML app. The intent was to shrink the several large files as much as possible for eventual submission to a central server. This operation needed to occur without the user’s direct involvement as part of a larger data transmission process.

While the Windows.Storage.Compression namespace does provide an interface for compressing individual files, there is no native support for creating a multi-file archive. In order to implement this feature I chose to use the third-party JSZip library, which is a light wrapper around the zLib library. Read More…

AIS developed a prototype that highlights the features and capabilities of open standards for geospatial processing and real-time data sharing through web applications. If you haven’t already, please click here to read part one

After getting the VIIRS data into our application using GeoServer, our next objective was to enhance the prototype to demonstrate some of the exciting things AIS is able to do through the use of various web technologies. Our goal was to provide a highly collaborative environment where clients on a variety of devices could all interact in real time with map data.

Figure 1: 3D Map Displaying WMS Layers

Read More…

Our client, The National Football Players Association (NFLPA), approached us regarding the development and implementation of a new player management system called PA.NET. AIS accomplished this project by managing the engagement in two phases: An envisioning phase to gather and define requirements and develop a roadmap for the reengineering initiative, followed by an implementation phase to support the development of a PC, tablet and mobile phone application design to ensure accessibility across multiple platforms and increase mobility and efficiency.

Click here to read more about this project!