Luna - How to build and maintain a github project
- 1. Luna How to build and maintain an application in Github Arvanitis Panagiotis Front-end engineer
- 2. Hello! I am Panagiotis Front-end engineer at Agile Actors I love JavaScript/Node JS and Data visualizations. Twitter: @rvpanoz Github: github.com/rvpanoz 2
- 3. What is this talk about? In this presentation I will talk about Luna. A side project which I started a year ago. Hope you like it! 😉 3
- 4. So.. what is Luna? Luna is a desktop application that manages npm dependencies through a modern UI. 4
- 5. Ag en da Publishing Application images Community feedback Result Motivation Why I started this project Challenges The making of Branching model Structure Planning Open source Technology stack Architecture 02 03 04 01
- 6. Motivation ● Understanding the needs ● The challenges 1
- 7. Why I started this project? ● Handle npm dependencies and running npm commands through a User Interface (UI). ● The applications existed at the time were incomplete or lack of features (ndm) * ndm - https://github.com/720kb/ndm 7
- 8. ● Help other developers and collaborate. ● Grow as a developer. Enhance my skills and knowledge. 8 Why I started this project?
- 10. Create something new Create something that did not exist as I would like it to be.. 10
- 11. Acceptance and Usefulness Make other dev’s lives easier and to be embraced by the community. 11
- 12. All in one project Combine latest technologies into one project. 12
- 13. Publishing ● Application images ● Community feedback ● Result 2
- 14. 14
- 15. 15
- 16. 16
- 17. 17
- 18. 18
- 19. ● Twitter ● References ● Github 19 Community feedback
- 20. 20 @RebeccaOrg Npm cli project lead
- 21. 21 @maybekatz Npm cli core team
- 23. 23 ● Awesome npm https://github.com/sindresorhus/awesome-npm ● Electron apps https://electronjs.org/apps/luna ● Detailed mention in npm weekly #192 https://medium.com/npm-inc/npm-weekly-192-npm-stats-are-back-meet-lu na-publish-a-react-component-with-npm-a473c64f1135 ● ArchLinux https://aur.archlinux.org/packages/luna/
- 24. 750+ stars 20+ Issues from the community 1500+ clones 24
- 25. Problem has been solved! ● Handle npm dependencies fast - not typing the commands by hand. ● Find updates and security issues immediately. ● Grow as developer. 25
- 26. Planning ● Open source ● Technology Stack ● Architecture 3
- 27. Open source project 27 1 Licensing Clean code 2 Good README 3 Contributing guidelines 4
- 29. ElectronJS https://electronjs.org/ 29 Why..? - One of the best general desktop application framework - Use web technologies - Good documentation - Maintainable
- 30. ReactJS https://reactjs.org/ 30 Why..? - Most popular Web UI library (V of MVC) - Very active development
- 31. ReduxJS https://redux.js.org/ 31 Why..? - One of the most popular and interesting MVC implementation - Encourages best practices (e.g predictability, aspect orientation)
- 32. RxJS https://rxjs-dev.firebaseapp.com/ 32 Why..? - Business logic modeling and implementation in the form of stream of actions - Data transformation - I/O and asynchronous computations management through streams
- 33. Material UI https://material-ui.com/ 33 Why..? - Implements Google’s Material design - Ready to use React components - Faster development
- 34. Webpack https://webpack.js.org/ 34 Why..? - Bundling - Code splitting - Development server
- 35. So far.. so good! Time for design. 35
- 37. 37 Main Process Renderer Process ● Running npm commands using nodejs child_process module ● Packaging and distributing ● System logging ● Views (React) ● Business logic (RxJS) ● Predictable state management (Redux) ● Testing (Jest) Operating system (Linux/Windows/macOS) NodeJS API Electron IPC API NodeJS API IPC Electron API DOM creates communicates Application architecture
- 38. 38 Renderer Process (Web page) Views Business logic RxJS Predictable state management I/O Side effects Actions A Unidirectional model actions in actions out Listen for changes actions out
- 39. Why this architecture? 39 1. Testable 2. Maintainable 3. Scalable 4. Clear responsibilities and concerns
- 40. The making of ● Branching model ● Structure 4
- 41. The branching model GitFlow Workflow: ● Two main branches ● Supporting branches 41 Why..? - Changes made through feature branches - Continuously support previous versions - Familiarity
- 42. Main branches: ● Master ● Develop 42
- 43. Supporting branches: ● Feature ● Release ● Hotfix 43
- 44. The project structure 44 Why..? - Clean - Similar content into separate folder - Easy to find things 4 main folders: ● App folder ● Configs folder ● Internals ● Resources
- 45. 45 app MainProcess ComponentsStore Models Reducers ContainersNpm API Presentationalmain.js App folder structure
- 46. The next day.. ● Collaborate with others passionate developers 46