Electron

Electron
Developing Desktop
Applications using HTML, CSS
and Javascript

Hello!I’m Dmytro Vasin
I ‘m a Ruby on Rails developer at Anadea.inc
You can find me: @DmytroVasin

Electron:
Build amazing, cross
platform desktop
apps in one codebase,
for any platform, with
the modern web stack.
Place your screenshot here

Who is this presentation for?
× Non-technical users
× People interested in Electron
× People who want to Show & Sell a platform
× Javascript enthusiasts
Who already works with Electron?

What will we discuss?
× What is Electron
× Why do I need it?
× How Electron works
× Perks
× Known problems
× Conclusions

Cross Platform
Compatible with Mac, Windows,
and Linux, Electron apps build
and run on three platforms.
What is Electron?
Web Technologies
Electron uses Chromium and
Node.js so you can build your
app with HTML, CSS, and
JavaScript.
Open Source
Electron is an open source
project maintained by GitHub
and an active community of
contributors

#
App Based on Electron: Slack

#
App Based on Electron: visual studio Code

#
App Based on Electron: Postman

#
App Based on Electron: Github Desktop

#
App Based on Electron: Nylas n1

#
App Based on Electron: Git Kraken

#
App Based on Electron: Basecamp 3

#
App Based on Electron: wordpress

× Offline (State, Settings)
× Access to FileSystem ( Store Files )
× Native Access ( Printer & Devices )
× Native Experience ( Dock, Toolbar, Menu bar )
× Data Storage ( data store, SQLite, N1 )
× SaaS
× Fill natural for users
why desktop?

× Work with files
× In Tray-apps
× “Manager” apps (Time, Tracker, Pomodoro)
× Audio/Video players ( Player, Dropbox)
× Email Client
× Social Chats ( API )
× Calendars
× Specific Ideas
What can we do with electron?

What SHOUld we not do with Electron?
× Apps on Specific Versions of OS
× Browser-like Apps
× Apps that use native a lot
× Web is better

for UI
for three systems
Inside Electron:
for filesystem
and networks

× BrowserWindow (UI)
× Any Number of processes
× Can be hidden
× Node-like (No UI)
× Life Cycle ( open/close )
× OS integration
× Create Renderer Processes
Renderer Process:
is responsible for running the
user-interface of your app
Main Process:
is responsible for creating and
managing the BrowserWindow
and various application events
(lifecycle).
Based on two type of processes:
How IT WORKS? ( Basic Concepts )

Main Process: Renderer Process:
You already know that!

Question
How do they communicate
with each other?

Inter-process communication
IPC:
IPC
Main Process
Renderer Process
Renderer Process
BrowserWindow
BrowserWindow

Node like: ( NPM & Node required )
- mkdir demo && cd demo
- npm init
- npm install electron --save-dev
- touch main.js index.html
First APP:
HELLO, WORLD!

Web Nature:
× HTML + CSS + JS
× Only Chrome. No Safari, No IE
× Chrome Devtools (*)
× Web as UI ( 20 years * )
× Libs - Isotope, Highcharts
× Rapid feature Development
Power of electron apps ( Perks )

Node:
× NPM
× Native packages
Web Nature:
× HTML + CSS + JS

Build your idea NOW!
Node:
× NPM
× Native packages
Web Nature:
× HTML + CSS + JS

Node:
× NPM
× Native packages (Slack)
Web Nature:
× HTML + CSS + JS

Node:
× NPM
× Native packages
Web Nature:
× HTML + CSS + JS
Common:
× JS language and community (*)
× Same codebase for all platforms.
× Cross-platform ( Node + Chrome )
× Cost of development
× Free
× No C++, No Swift, No C#

Modern stack:
× React (Angular )
× TypeScript ( FLOW )
× ASYNC / AWAIT
× ES2016 ( No babel )
× Forget about Polyfills
Power of electron apps ( Bonus)

Only modern stack:
× React (Angular )
× ASYNC / AWAIT
Power of electron apps ( moreover )
Open Source:
× Developed & Supported
with ❤ by GitHub
× Node
× Chromium

Latest features:
× Detect Location
× Webcam
× WebRTC
× CSS custom properties
× CSS Grid
Only modern stack:
× React (Angular )
× ASYNC / AWAIT
Open Source:
with ❤ by GitHub
× Node
× Chromium

Latest features:
× Detect Location
× Webcam
× WebRTC
× CSS custom properties
× CSS Grid
Only modern stack:
× React (Angular )
× ASYNC / AWAIT
Open Source:
with ❤ by GitHub
× Node
× Chromium
Electron features
× Installer
× Auto updater
× Packaging
× Crash reporting
× Mac and Win store
× Devtron for Debug

Known problems:
Trade offs:
× Node + Chrome ( 20 million LOC )
× Project Weight ( 100mb )
× Render process spawn thread ( will kill memory )
× Boot Time
× Not all platforms have the same possibilities
× Code Protection
× Lack of Framework features
× Node packages
× Cross platform: heaven or hell?
× Not so perfect ( Autoupdater, Packager )

Known problems:
Trade off:
× Node + Chrome ( 20 million LOC )
× Project Weight ( 100mb )
× Render process spawn thread ( Will kill memory )
× Boot Time
× Not same ability for all platforms
× Code Protection
× Lack of Framework features
× Node packages
× Cross platform: goodness or hell?
× Not so perfect ( Autoupdater, Packager )

Are these problems with Electron?
× Is it an electron issue?
× UI work in browser!
× Async Programming
× Offload computationally-intensive work
× Don’t Block the UI Thread OR the Main Thread
× Use Chrome Devtools ( Profiling )
× Bad Code.

Conclusion: is Electron a good choice?
It Depends!

Main
Makes desktop development fun
Makes desktop development fast
It works for us

Links:
https://electronjs.org/docs
https://hackernoon.com/electron-the-bad-parts-2b710c491547
https://github.com/sindresorhus/awesome-electron
https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md
http://photonkit.com/components/

THANKS!
Any questions?
You can find me @DmytroVasin

Electron

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Electron

Semelhante a Electron (20)

Mais de ITCP Community

Mais de ITCP Community (20)

Último

Último (20)

Electron