Building Desktop Applications using Web Technologies
with Electron

Jason Ronallo
Head, Digital Library Initiatives
NCSU Libraries
@ronallo
http://ronallo.com/presentations/c4l16

Hi. I'm Jason Ronallo, Head of Digital Library Initiatives at NCSU Libraries. And I'll be talking about building desktop applications.

No Skipping Ahead, Please!

Outline

Why build desktop applications anyways?

Why in the world would anyone build a desktop application these days. Everything is now on the Web now, right? A brief inaccurate history of the relationship between desktop applications and the web...

Survey

OK. Quick survey to make sure I know my audience well enough.

Who here has some role in creating Web applications?

Raise your hand!

Who here has some role in creating desktop applications?

Raise your hand!

The Web Has Won!

(well, except on mobile)

Lots of complex applications that were once developed for the desktop have now gone to the browser.

Yay!(?)

yay?

Too Many Tabs


We've traded too many windows for too many tabs.

Tab Management Tools

Things are so bad with tabs that there's a whole class of plugins and extensions and "top 5 ways" lists to help you manage tab overload.

Bookmarks

You can use bookmarks to organize things, but I basically use Pinboard to close tabs and forget about them so I don't feel guilty about all the unread tabs I have open and still feel like I have good intentions of getting back to them.

Tab Bankruptcy

And then sometimes I just declare tab bankruptcy and hope I didn't close anything really important.

Just Open a New Window, Right?

So to find things you just open up a new window right? Who has had so many browser windows open that they can't find the window that contains the tab that you know you've opened up? Or is playing audio?

Then It Will Be Easier to Find

And now I have 5 windows with N tabs all with the same pages in there somewhere.

Why Desktop Applications?

So why desktop applications again?

Stand Out

You might want to develop a desktop application if you want to stand out from all the tabs and browser windows. If you want to integrate with the desktop and stay in the task bar to make it easy to find.

Focus

Sometimes you just want an application to let you have focus on one thing. You can see why companies would want to develop desktop applications. You can understand why a library might want staff at the desk for instance to be able to quickly focus.

it is really hard to focus when that Gmail tab is there beconing you.

Why Not Desktop Applications?

So why don't we build more desktop applications?

GUI Toolkits and
Different Skillsets

Any time I've considered building a desktop application I've always been thwarted by difficult to use and ugly GUI toolkits.

You Already Know
How to Create a GUI

But if you know how to make web pages with HTML and CSS you already know how to make a user interface.

Creating Desktop Apps
with Web Technologies

It is now possible to create desktop apps with Web technologies.

Platforms for Building Desktop Apps with Web Technologies

There are a couple platforms for doing this. I'll be talking about Electron.

What Can You Build with Electron?

What can you make with Electron. I'd like to show you some interesting use cases for creating desktop applications that might also apply to libraries.

Companies that Use Electron

Lots of companies and open source projects are beginning to use Electron. As I was developing these slides and going back to the home page they just kept adding more and more companies to this list. There's a growing list of open source applications as well.

Chat & Communications

Slack
Slack
Discord
Discord
Wire
Wire

Speak
Speak
Rocket Chat
Rocket Chat

Tweetman
Tweetman
Sync
Sync
N1 (email client)
N1 (email client)
Lots of applications like Slack and Discord for chat and real-time communications.

Collaborative Tools

Avocode
Avocode
Pixate
Pixate

Flow
Flow
Avocode let's you collaborate on design. Flow does team task management.

Why Chat and Collaborative Tools?

Code Editors

Atom
Atom
Nuclide
Nuclide

Visual Studio Code
Visual Studio Code
Ionic Lab
Ionic Lab
Lots of code editors are using electron. Atom from Github. Visual Studio code from Microsoft. Nuclude from Facebook.

Editors

Wordpress (desktop)
Wordpress (desktop)
Yhat
Yhat
GitBook
GitBook

MdNote
MdNote
Caret
Caret
Abricotine
Abricotine
And lots of other editors. The new Wordpress desktop application is written using Electron. Yhat Rodeo is an IDE for data science. Markdown editors in 2nd column.

Why Code and Text Editors?

Developer Tools

GitKraken (git client)
GitKraken (git client)
gitify (desktop notifications)
gitify (desktop notifications)
Kitematic (now part of Docker)
Kitematic (now part of Docker)

Wagon (SQL editor)
Wagon (SQL editor)
Fireball (HTML5 game dev)
Fireball (HTML5 game dev)
Postman
Postman
And a whole assortment of developer tools. From working with git to an SQL editor to tools for HTML5 game development.

Hardware Configuration

Particle
Particle
Steelseries Engine 3
Steelseries Engine 3

Jibo (social robot)
Jibo (social robot)
Airtame
Airtame
One of the most interesting uses I found was for hardware configuration. Particle dev (IDE for IoT; Photon development board). Steelseries Engine is used to configure gaming keyboards and mice.

Jibo social robot

This is Jibo the social robot.

Jibo fan

Why Hardware Configuration?

Misc

Kakapo (ambient sound mixer)
Kakapo (ambient sound mixer)
Zoommy
Zoommy

GIF MAKER
GIF MAKER
Microstockr
Microstockr
OK. By this point I hope you have plenty of ideas for what is possible to build with Electron.
Zoomy stock photo search

OK, so what is Electron actually?

Chromium + Node.js

An Electron application is just a

Access to All Web APIs