Creating Video Hub App with Angular & Electron
?Download as PPTX, PDF?
1 like?269 views
This document summarizes a presentation about creating a video hub app with Angular and Electron. It discusses four goals of the project: inspiring new Angular developers, showing how powerful Electron is, demonstrating Angular pipes, and showcasing Angular animations. It provides an overview of the app's development timeline and demos of key features like accessing the dev console while developing, using Electron to package the app, implementing custom pipes, and adding animations.
Creating Video Hub App with Angular & Electron
- 1. CreatingVideoHubApp withAngular&Electron Boris Yakubchik Feb 20th 2018 @ AngularNYC
- 2. Four goals 1. Inspire those new to Angular 2. Show how awesome Electron is 3. Show how great Angular pipes are 4. Show how sweetAngular animations are
- 3. You can do it!Nov Dec Jan Feb Mar Apr May June Jul Aug Sept Oct Nov Dec Jan Feb have something to show started making this app started learning Angular started full time web dev 2017 2018
- 4. DEMO
- 7. electron-builder.json npm run electron:mac npm run electron:windows npm run electron:linux .dmg .exe .appimage
- 8. Access Dev Console as you develop!
- 9. Miscellaneous notes photonkit.com Include a local DB if you need Log errors in your build asar: false
- 10. PIPESSince 1973
- 11. // Typical template.html // Better // Now I¨m excited
- 12. Anatomy of a pipe 2)Transform input 1) Declare name 3) Return output length.pipe.ts
- 13. 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
- 14. Array.filter
- 15. Crazy idea for fun crazyPipe.pipe.ts myCrazyService.service.ts template.html
- 18. Manual management: ? boolean: shown/hidden ? css for animation ? boolean: animation in progress ? setTimeout() for appear ? setTimeout() for disappear ? logic for interruptions ? non-reusable Appear & Disappear animation Angular management: ? boolean: shown/hidden ? css for animation
- 19. Appear & Disappear animation define animation component.ts template reuse
- 23. Thank you to: Rohit Sodhia Joe Pietruch Kyle Rogers