Learn how to get started with Electron and Angular (Create a Win, Mac, & Linux App with one code base). Discover how powerful Angular pipes can be for an advanced search & filter functionality. Find out how functional programming can in places simplify your code.

1. Angular & Electron
build an app
for every OS
Boris Yakubchik
Jun 1st 2021 @ Geekle

2. Four topics
1. Electron is awesome
2. Angular pipes are awesome
3. Functional programming is awesome
4. Open source is awesome
25%
100%

3. DEMO

6. main.ts home.component.ts

7. Access Dev Console as you develop!

8. electron-builder.json
npm run electron:mac
npm run electron:windows
npm run electron:linux
.dmg
.exe
.appimage

9. Electron: so simple you could make a cross-platform app in a weekend!

10. Miscellaneous notes
photonkit.com
Include a local DB if you need
Debugtron
asar: false

11. Miscellaneous notes

12. Pro tip:
face-api.js

13. Pipes

14. // Typical
template.html
// Better
// Video HubApp 1.0.0

15. Video Hub App 2.0.0
24 pipes total
15 unique pipes

16. Anatomy of a pipe
2)Transform input
1) Declare name
3) Return output
length.pipe.ts

17. How pure are your pipes?
pure impure
pure: false
changes when
string/number/boolean input changes or
object reference of date/array/function/object
every mouse move, keystroke,
timer tick, server response
default

18. Array.filter
cutoff.pipe.ts

19. Pipes are flexible
crazy-pipe.pipe.ts
my-crazy-service.service.ts
template.html

22. Functional Programming
A paradigm that aims to make your code easier to understand and reason about

23. Pure functions
• Think “pure pipe” with no side effects • Data “flows” through it
Bonus:
• unit testing is a breeze
• portable
• parallelizable
• Output of function 100% determined by input • Deterministic

24. Example

25. Example

26. “It's also easier to get started in [JavaScript]
since it's mixed paradigm and you can fall
back on your current practices while there
are gaps in your knowledge.”

27. In my app:
• Refactored one function at a time
• Any state used inside, became an input (parameter),
• Moved state ‘back’ to whoever called the function
• Moved to separate file once function “purified”
• “cheated” by strategically allowing some side-effects

30. Open Source

32. videohubapp.com/download.html

35. Charityware
• $3.50 of every purchase goes to a cost-effective charity
most/all proceeds go to charity
Video Hub App
• Pay what you want, $5 minimum

36. income-inequality.info

39. Thank you

40. Thank you to:
My employer:
github.com/cal2195