JavaScript - The Universal Platform?
- 1. JavaScript: The Universal Platform? Mail: [email protected] Twitter: @jbandi
- 2. Two Worlds?
- 3. How could anybody love JavaScript?
- 6. Active Ecosystem (Maven Central has 153k unique artifacts) www.npmjs.org http://www.modulecounts.com/
- 7. Scott Hanselman Fluent 2014 keynote "Virtual Machines, JavaScript and Assembler" https://www.youtube.com/watch?v=UzyoT4DziQ4 HTML5:An operating system?
- 9. Beyond the Browser Nashorn nodebots.io Native Script React Native NW.js MacGap
- 10. Why should you care? • You have web developers / web skills are prevalent and available easily on the market • Some web technologies are actually very powerful • You might reuse knowhow and even concrete code
- 11. This is an experiment! What can we achieve just using JavaScript?
- 12. Context: Birdcage birdcage2.jonasbandi.net birdcage worker (a simple tweet scheduler)
- 13. Demo: Birdcage Web App Development: • Fast Cycles • Debugging • HTML/CSS • JS
- 14. Demo: Birdcage Rich Client Development: • HTML/CSS • JS • Fast Cycles • Debugging • Bundling for all Platforms
- 15. Electron Architecture Main Process Render Process Render Process App native ui OS start start IP CIP C E E E
- 16. Demo: BirdcageNative Mobile Client React Native Development: • HTML/CSS • JS • Fast Cycles • Debugging • Deployment as App
- 17. React Native ArchitectureApp React Native Components Native APIs (bridged) “Learn once, write everywhere” Native UI Components (Cocoa, Android) • React as UI Framework • CSS for Layout • JavaScript Ecosystem Different implementations for iOS & Android if needed.
- 18. Demo: Couch DB Persistence
- 19. Demo: Couch DB Persistence React Native rich client
- 21. Demo: Dedicated Backend React Native rich client
- 22. Demo: Dedicated Backend React Native re-use your couchdb persistence rich client
- 23. Demo: Firebase Persistence React Native rich client
- 25. Next steps … Businesslogic andValidation: Just another Node module Native Script Angular 2
- 26. Angular 2 aspires to be a platform progressive web-apps for mobile (web workers, cache, push, offline) https://mobile.angular.io/ classic web-apps for desktops installed mobile apps (hybrid) installed mobile apps (native integrations) server side rendering https://universal.angular.io/ installed desktop apps https://github.com/NathanWalker/angular2-seed-advanced dev tooling https://cli.angular.io/
- 27. Reuse • Reuse of web-dev knowhow & dev infrastructure • Reuse code from your web application • Cross-platform solutions 85% Code Reuse with RN: https://code.facebook.com/posts/1189117404435352/
- 28. Write once, run everywhere. Learn once, write everywhere.
- 29. Apps realized with Electron: Apps realized with React Native: https://github.com/sindresorhus/awesome-electron https://facebook.github.io/react-native/showcase.html Facebook Facebook Ads Manger Discord SoundCloud Pulse Git Kraken Insomnia Rest ClientPostman WhatsApp
- 30. Questions? JavaScript Schulungen & Coachings, Project-Setup & Proof-of-Concept: http://ivorycode.com/#schulung [email protected] Code: https://github.com/jbandi/birdcage-experiment