Building desktop applications with web technologies

the easy way

@stefanjudis

@stefanjudis

FRONTEND DEVELOPER MOSTLY E-COMMERCE NOW INTO SINGLE PAGE APPLICATIONS

http://perf-tooling.today

https://github.com/stefanjudis

http://www.meetup.com/de/Berlin-Web-Performance-Group/

STARTED FULLSTACK ( 5 YEARS AGO )

“You have to specialize. Do one thing and do it as well as possible rather than doing everything just good.”

for

Frontend Technologies

( around 2012 )

But unfortunately I was a bit late. ( I had a ton to catch up with )

HTML invented early 90ies. CSS invented 1994. JavaScript invented 1995.

First WebApps appeared

MV-WHATEVER

HTML5 moving forward

Location Device movement Making Music Web Cam Access Battery Status

What about offline?

Service Workers FTW

http://techcrunch.com/2015/09/14/facechrome/

How to use these fancy web apps?

https://github.com/adobe/brackets-shellhttp://nwjs.io/

So far, one big player was missing...

Let’s build our dream editor!

With Web Technology!

http://blog.atom.io/2014/02/26/introducing-atom.html

Writing to Disk Using native Functionality Separate concerns clearly

- Atom Shell -

So - how does it work?

Atom Shell is a Node.js programmable Chromium browser.

Chromium Browser

Browser

https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor

Controlled by C++

Window … Tray Menu Dialog

IPC

Renderer

HTML

JavaScript

CSS

Renderer

HTML

JavaScript

CSS

Renderer

HTML

JavaScript

CSS

Window Window

Atom Shell

Browser

https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor

Controlled by Node.js

Window … Tray Menu Dialog

IPC

Renderer

HTML

JavaScript

CSS

Renderer

HTML

JavaScript

CSS

Renderer

HTML

JavaScript

CSS

Window Window

http://electron.atom.io/

https://atom.io/

https://code.visualstudio.com/

https://slack.com/

- our use case at LLS -

Let´s check some code?

( a fairly simple one )

- in case I make a stupid error please tell me -

Let´s write something real?

Let`s make it distribution ready!

Windows Result

https://github.com/stefanjudis/electron-webview-example

https://github.com/stefanjudis/electron-todo-example

https://github.com/stefanjudis/electron-block-screensaver-example

Example Projects

Packages used for distributionhttps://github.com/maxogden/electron-packager

https://github.com/loopline-systems/electron-builder

Working cross-platform Active Development Strong Community

Last words

https://github.com/sindresorhus/awesome-electron

Thanks. Questions?