AngularNYC talk from February 18, 2020 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. Hear how making a project open source was an excellent decision for Video Hub App.

1. 2 Years with
Angular & Electron:
Video HubApp 2
Boris Yakubchik
Feb 18th 2020 @ AngularNYC

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
Log errors in your build
asar: false

11. Pro tip:

12. Pipes

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

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

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

16. 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

17. Array.filter
cutoff.pipe.ts

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

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

22. 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

23. Example

24. Example

25. “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.”

26. 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

29. Open Source

30. started
making
this app
released
1.0.0
2018 2019 2020
spoke at
AngularNYC
today at
AngularNYC
Timeline

32. videohubapp.com/download.html

33. 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, $3.50 minimum
• I need about tree fiddy

34. income-inequality.info

36. started
making
this app
released
1.0.0
2018 2019 2020
spoke at
AngularNYC
madeVHA
open source
today at
AngularNYC
100th
purchase
Timeline

39. started
making
this app
released
1.0.0
2018 2019 2020
spoke at
AngularNYC
madeVHA
open source
today at
AngularNYC
released
2.0.0
1,000th
purchase
100th
purchase
500th
purchase
Timeline

41. started
making
this app
released
1.0.0
2018 2019 2020
spoke at
AngularNYC
madeVHA
open source
today at
AngularNYC
released
2.0.0
1,000th
purchase
100th
purchase
500th
purchase
1,300th
purchase
Timeline

42. Thank you

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