What do TypeScript and Electron have in common with air quality?

Air pollution is a concern of everybody since it may cause discomfort and adverse health effects. Children, elderly and those who have heart or lung problems suffer the most when the air around them is polluted. Polluted air can also adversely affect our quality of life.

This presentation is a case study of a side-project, a macOS menubar application that displays current CAQI level from the nearest Airly sensor station. Encountered problems, solutions, lessons learned.

Transcript

1. Jakub Synowiec core engineer @ portent.io @jakubsynowiec @jsynowiec meet.js Katowice #29, 24.01.2018 What do TypeScript and Electron have in common with air quality?
2. What do TypeScript and Electron have in common with air quality?
3. motivation?
4. trail & obstacle course running
5. winter is coming
6. winter is here 23 Stycznia 2018, godzina 18:00
7. what’s in the air you breathe? • PM2.5 • PM10 • SO2 • NO2 • O3
8. and it's not (only) about dust particles
9. solution ;)
10. running in a mask
11. motivation • trail & obstacle course running, • healthy lifestyle and air quality awareness, • learn some new technologies, • there are many mobile apps, but.... ....they're mobile apps
12. expectations
13. expectations ;)
14. expectations I need a app for macOS, that: • runs in background, • periodically checks for current air quality measurements, • displays some normalized value of air quality on menubar, • looks and behaves like a native app, • shows system notification when air quality changes, I don't want to invest 2 weeks to learn Swift or ObjectiveC and tooling.
15. decisions, technology
16. decisions, technology • Electron, • Photon, Less, BEM, • React, • TypeScript, • Prettier, • API that provides near realtime, quality data,
17. sketch, write down assumptions, learn while doing
18. the app
19. airqmon A macOS menu bar app that displays live air quality measurements from the nearest Airly sensor station. It also notifies you when the air quality changes or when a new station that is closer to your current location was found. https://github.com/jsynowiec/airqmon
20. airqmon main window
21. airqmon notifications
22. airqmon
23. reception (of beta preview)
24. various quirks and problems
25. various quirks and problems lessons learned
26. Electron & timers resolution & throttling
27. Electron & timers resolution & throttling
28. Electron & timers TypeScript & vscode auto-imports
29. Electron detecting production/dev env
30. Electron window and tray needs to be declared in module scope
31. Electron online/offline detection
32. Electron online/offline detection
33. Electron packager ignored paths are regular expressions
34. Packaging with electron-packager missing production packages • electron-packager runs
 `npm prune !--production`
 when packaging, • due to a bug, npm removes all production dependencies installed from git, i.a. git, git+http(s), git+ssh, github/reponame • app crashes :( https://github.com/npm/npm/issues/19356
35. Electron programatically closing app
36. Electron window placement on different screens
37. Electron window placement on different screens
38. Electron window placement on different screens
39. Electron vertical display placement https://github.com/electron/electron/issues/11709
40. Airly API data stability
41. Airly API data stability Data hide & seek: • pressure, humidity temperature are sometimes missing, • sometimes there is no data at all, GIOŚ stations don't return current measurement data: • need to find latest among historical measurements,
42. few other nice things
43. TypeScript & React interfaces as propTypes
44. TypeScript & React interfaces as propTypes and state type description
45. Enums in TypeScript
46. TypeScript & Prettier git hooks formatting
47. conclusions
48. conclusions • Electron is nice but has some quirks to learn, • React is easier with TypeScript, • React and BEM styles play well together, • Preact is even better than React, • You can't test all possible scenarios by yourself, some "field" tests are necessary, • npm@5 has serious problems in terms of maintenance, • Created three issues and a PR in different projects, • Prettier won't replace a linter but it helps a lot, • It never ends on PoC state, • It's better to get a mask or wait till spring,
49. Thank you! Questions? https://github.com/jsynowiec/airqmon Jakub Synowiec core engineer @ portent.io @jakubsynowiec @jsynowiec