August 21, 2020

Writing Cloud-Connected Cross-Platform PC Apps

Electron-Firebase is a quickstart framework for building cross-platform cloud-connected personal computer applications using Electron and Firebase

With a few configuration settings you can include a complete authentication workflow into your app that can use email/password, phone number, google, facebook, or many other identity providers. Electron-Firebase is unusual in being both an NPM module and an example application framework, and it spans both worlds of the Browser JavaScript environment and the host node.js environment.

Filling a gap in our software tools

Cross-platform development tools have been around for eons, but with the emergence of Electron, developers finally have true portability, access to the operating system and network, and a great UI front end. But Electron is only for the host environment, and building a custom scalable cloud back-end could be a complex and costly process.

When mobile apps came onto the scene, it quickly became clear that they were portals into the Cloud. Since mobile developers and startups often didn’t have the time, skill, and resources to build the needed Cloud back-end, a new category emerged of Mobile-Backend-as-a-Service. Of the several that survived, Firebase is one of the most capable, is owned by Google, and continued to expand with new features. But it largely ignored PC apps for the desktop and laptop as a client capability.

Electron-Firebase bridges this gap, giving Electron connections to a rich set of Cloud services, and giving Firebase a PC client build environment. For those followers of the model-view-controller paradigm, Electron-Firebase is a near-perfect fit.

Image for post

But is this really cross-platform? The integration code and example application that form Electron-Firebase runs on Windows, MacOS, and Linix, yet has zero platform-specific code or configuration variations.

What Electron-Firebase provides for you

  • An authentication workflow within an application context for many identity providers, including phone and email
  • Authentication persistence, so that a user can launch your app at any time without signing in again
  • Security and privacy throughout the authentication sign-in and persistence processes
  • True cross-platform cloud-connected application building across MacOS, Windows, and Linux
  • Methods for communication between the Electron Browser and Main processes
  • Authorized user access to database and cloud storage with Firebase security rules
  • API access to Firebase Cloud Storage, which is not supported in node.js
  • Firebase Cloud Storage listing and searching capability
  • Persistence of window positions on the screen automagically when the user changes them
  • An example application for a quick start in writing your own application

What you need and how to get started

The Electron-Firebase framework works for JavaScript coders, because the presentation layer executes on the Chrome Browser and so is written in HTML, CSS, and JavaScript, or whatever front-end framework that you like. The system code that interfaces to Firebase and the operating system, and any other services, is a node.js process and can support either JavaScript or TypeScript. The only prerequisites on the development platform are node.js and npm.

You will need to set up and configure your own Firebase account and select the Blaze level of service, however the free tier is generous. For each identity provider that you would like to support, for example “sign in with Facebook”, you will need a developer account, create an authentication app, and configure the trust relationship between Firebase and the ID provider. This is all explained in step-by-step detail in the installation instructions at Electron-Firebase.

And now your desktop and laptop applications can enjoy the same kind of cloud connectivity as mobile apps, and Firebase users now have a way to extend their application reach to desktop and laptop apps. Happy coding!

This post was also published to Medium

No comments:

Post a Comment