Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript - The Universal Platform?

910 views

Published on

JavaScript for web, native mobile and desktop.

Published in: Technology
  • Be the first to comment

JavaScript - The Universal Platform?

  1. 1. JavaScript: The Universal Platform? Mail: jonas.bandi@gmail.com Twitter: @jbandi
  2. 2. Two Worlds?
  3. 3. How could anybody love JavaScript?
  4. 4. http://stackoverflow.com/research/developer-survey-2016#technology http://stackoverflow.com/tags
  5. 5. https://github.com/blog/2047-language-trends-on-github
  6. 6. Active Ecosystem (Maven Central has 153k unique artifacts) www.npmjs.org http://www.modulecounts.com/
  7. 7. Scott Hanselman Fluent 2014 keynote "Virtual Machines, JavaScript and Assembler" https://www.youtube.com/watch?v=UzyoT4DziQ4 HTML5:An operating system?
  8. 8. It's Spreading!
  9. 9. Beyond the Browser Nashorn nodebots.io Native Script React Native NW.js MacGap
  10. 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. 11. This is an experiment! What can we achieve just using JavaScript?
  12. 12. Context: Birdcage birdcage2.jonasbandi.net birdcage worker (a simple tweet scheduler)
  13. 13. Demo: Birdcage Web App Development: • Fast Cycles • Debugging • HTML/CSS • JS
  14. 14. Demo: Birdcage Rich Client Development: • HTML/CSS • JS • Fast Cycles • Debugging • Bundling for all Platforms
  15. 15. Electron Architecture Main Process Render Process Render Process App native ui OS start start IP CIP C E E E
  16. 16. Demo: BirdcageNative Mobile Client React Native Development: • HTML/CSS • JS • Fast Cycles • Debugging • Deployment as App
  17. 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. 18. Demo: Couch DB Persistence
  19. 19. Demo: Couch DB Persistence React Native rich client
  20. 20. Demo: Dedicated Backend
  21. 21. Demo: Dedicated Backend React Native rich client
  22. 22. Demo: Dedicated Backend React Native re-use your couchdb persistence rich client
  23. 23. Demo: Firebase Persistence React Native rich client
  24. 24. Context: Birdcage birdcage worker React Native
  25. 25. Next steps … Businesslogic andValidation: Just another Node module Native Script Angular 2
  26. 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. 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. 28. Write once, 
 run everywhere. Learn once, 
 write everywhere.
  29. 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. 30. Questions? JavaScript Schulungen & Coachings,
 Project-Setup & Proof-of-Concept: http://ivorycode.com/#schulung
 jonas.bandi@ivorycode.com Code: https://github.com/jbandi/birdcage-experiment

×