Gitscout @ Electron TechTalks SF

Transcript

1. Gitscout GitHub Issues experience for macOS
2. Browse, organize and manage your GitHub Issues gitscout.com/marshmallows
3. Why Electron? We are web developers Our designer can ship some code (css/html) Great community and resources available
4. Recreate native macOS experience with web technologies Check out Ben Gotow’s talk for some great tips
5. How to recreate a native popover experience in Electron? E.g.: Native popover element in Wunderlist
6. Your app is locked in a browser window but sometimes you want some elements to get out of these “walls” So we need another window and make them communicate somehow Easy, right?
7. Window lifecycle (creation/destruction) makes it flash. Always here but `opacity:0` and `setIgnoreMouseEvents:true` and then manage it’s state.
8. Creating a new window makes you loose focus from the main one (see traffic light) We recreated a custom nav bar from scratch and mapped all its behaviours (all buttons, active/inactive states – greyed)
9. Communication between 2 windows (e.g. selecting a user from a list) Using webContents API and IPC for window management
10. “Click through” Intercept all events inside the popover window, check if on clickable node and check if outside app
11. Problem 5, 6, 7, 8, … 99 Mimicking all native UX details (focus management, position, resize, keyboard navigation) Demo
12. Sounds like a hassle, but totally worth it We love crafting great experience with a native feeling and we are grateful to use tools that enable us to do it. Thank you Electron Maintainers <3 

13. Questions?