Electron

1. Electron

2. Who am I!
I am Adrian Lemes
⬡ Frontend architect at ilegra
⬡ Graduated in Analysis and
System Development at
FATEC Senai
⬡ Started in 2012 on IT world
⬡ Experience with Arch Front
(Angular, React, React Native,
Vue, NodeJS, Micro-fronts,
SSR, BFF, GraphQL, PWA and
others)
2
@adrianlemess

3. If you can build a website,
you can build a desktop app.

4. What is
Electron is a framework for creating
native applications with web
technologies like JavaScript, HTML, and
CSS. It takes care of the hard parts so
you can focus on the core of your
application.

5. Why do we need desktop apps?
⬡ Secure
⬡ Professional level applications
∙ Ex: Photoshop, after effects
⬡ We need to use hardware local
resources
∙ Ex: Edit video
⬡ Novice users
5

6. Architecture
⬡ Based on Chromium's multi-
process architecture
⬡ An Electron app always has
one main process, but never
more.
⬡ Electron uses Chromium for
displaying web pages
⬡ Each web page in Electron
runs in its own process 6

7. Companies
7
https://electronjs.org/apps

8. Apps
8

9. 1.
Characteristics

10. Web Technologies
Electron uses Chromium and
Node.js so you can build
your app with HTML, CSS,
and JavaScript.
10

11. Open Source
Electron is an open source
project maintained by
GitHub and an active
community of contributors.
11

12. Cross Platform
Compatible with Mac,
Windows, and Linux,
Electron apps build and run
on three platforms.
12

13. JavaScript/HTML/CSS
With Electron we may code
with any JavaScript
framework.
13

14. 2.
How to Start

15. Documentation
15

16. Install Electron
16

17. Start toolkit
17

18. Main.js
18

19. Index.html
19

20. 3.
Pros and cons

21. Pros
⬡ Electron apps are similar to web apps
⬡ Focus on the core part - Electron deal with the hard
part
⬡ Use Chromium APIs - Debugger, Storages, hot
reloading and developer tools
⬡ Node APIs - fs, http, process, commands, etc
⬡ Others features - crash report, auto update, native
features and notifications and windows installers
⬡ No browser compatibility issues
21

22. Cons
⬡ JavaScript - Poor performance
⬡ Size and memory (Chrome + NodeJS)
⬡ Cross-platform build? If your app has
native dependencies, it can be compiled
only on the target platform
22

23. 4.
Demo

24. “ Quotations are
commonly printed as
a means of inspiration
and to invoke
philosophical thoughts
from the reader.
24

25. 1.
Transition headline
Let’s start with the first set of slides

26. This is a slide title
⬡ Here you have a list of items
⬡ And some text
⬡ But remember not to overload your
slides with content
Your audience will listen to you or read the
content, but won’t do both.
26

27. Big
concept
Bring the attention of your
audience over a key concept
using icons or illustrations
27

28. White
Is the color of milk and
fresh snow, the color
produced by the
combination of all the
colors of the visible
spectrum.
You can also split your content
Black
Is the color of coal,
ebony, and of outer
space. It is the darkest
color, the result of the
absence of or complete
absorption of light.
28

29. In two or three columns
Yellow
Is the color of gold,
butter and ripe
lemons. In the
spectrum of visible
light, yellow is found
between green and
orange.
Blue
Is the colour of the
clear sky and the
deep sea. It is located
between violet and
green on the optical
spectrum.
Red
Is the color of blood,
and because of this it
has historically been
associated with
sacrifice, danger and
courage.
29

30. A picture is worth a
thousand words
A complex idea can be
conveyed with just a single
still image, namely making it
possible to absorb large
amounts of data quickly.
30

31. Want big impact?
Use big image.
31

32. You can insert graphs from Google Sheets
32

33. Use diagrams to explain your ideas
33
Q1
LOR IPS DOL
Q2
LOR IPS DOL
Q3
LOR IPS DOL
Q4
LOR IPS DOL
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
LOREM

34. And tables to compare data
A B C
Yellow 10 20 7
Blue 30 15 10
Orange 5 24 16
34

35. Maps
our office
35
Find more maps at slidescarnival.com/extra-free-resources-icons-and-maps

36. 89,526,124
Whoa! That’s a big number, aren’t you proud?
36

37. 89,526,124$
That’s a lot of money
100%
Total success!
185,244 users
And a lot of users
37

38. Our process is easy
38
Vestibulum congue
tempus
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor. Donec facilisis
lacus eget mauris.
3
Vestibulum congue
tempus
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor. Donec facilisis
lacus eget mauris.
2
Vestibulum congue
tempus
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor. Donec facilisis
lacus eget mauris.
1

39. Let’s review some concepts
Yellow
Is the color of gold, butter
and ripe lemons. In the
spectrum of visible light,
yellow is found between
green and orange.
Blue
Is the colour of the clear sky
and the deep sea. It is
located between violet and
green on the optical
spectrum.
Red
Is the color of blood, and
because of this it has
historically been associated
with sacrifice, danger and
courage.
39
Yellow
Is the color of gold, butter
and ripe lemons. In the
spectrum of visible light,
yellow is found between
green and orange.
Blue
Is the colour of the clear sky
and the deep sea. It is
located between violet and
green on the optical
spectrum.
Red
Is the color of blood, and
because of this it has
historically been associated
with sacrifice, danger and
courage.

40. Mobile
project
Show and explain your
web, app or software
projects using these
gadget templates.
Place your screenshot here
40

41. Place your screenshot here
41
Tablet
project
Show and explain your
web, app or software
projects using these
gadget templates.

42. 42
Place your screenshot here
Desktop
project
Show and explain your
web, app or software
projects using these
gadget templates.

43. 43
Thanks!
Any questions?
You can find me at:
@username
user@mail.me

44. Credits
Special thanks to all the people who made
and released these awesome resources for
free:
⬡ Presentation template by SlidesCarnival
⬡ Photographs by Unsplash
44

45. Presentation design
This presentation uses the following typographies:
⬡ Titles: Lexend Deca
⬡ Body copy: Muli light
Download for free at:
https://www.lexend.com/
https://www.fontsquirrel.com/fonts/muli
You don’t need to keep this slide in your presentation. It’s only here to serve you as a
design guide if you need to create new slides or download the fonts to edit the
presentation in PowerPoint®
45

46. Extra resources
46

47. SlidesCarnival icons are editable shapes.
This means that you can:
⬡ Resize them without losing quality.
⬡ Change fill color and opacity.
⬡ Change line color, width and style.
Isn’t that nice? :)
Examples:
47
Find more icons at slidescarnival.com/extra-
free-resources-icons-and-maps

48. ✋👆👉👍👤👦👧👨👩👪💃🏃💑❤😂😉
😋😒😭👶😸🐟🍒🍔💣📌📖🔨🎃🎈🎨🏈
🏰🌏🔌🔑 and many more...
😉
48
You can also use any emoji as an icon!
And of course it resizes without losing quality.
How? Follow Google instructions
https://twitter.com/googledocs/status/730087240156643328

49. Free templates for all your presentation needs
Ready to use,
professional and
customizable
100% free for personal
or commercial use
Blow your audience
away with attractive
visuals
For PowerPoint and
Google Slides
49