JavaScript for web, native mobile and desktop.

1. JavaScript:
The Universal Platform?
Mail: jonas.bandi@gmail.com
Twitter: @jbandi

2. Two Worlds?

3. How could anybody love JavaScript?

4. http://stackoverflow.com/research/developer-survey-2016#technology
http://stackoverflow.com/tags

5. https://github.com/blog/2047-language-trends-on-github

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?

8. It's Spreading!

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

20. Demo: Dedicated Backend

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

24. Context: Birdcage
birdcage worker
React
Native

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
jonas.bandi@ivorycode.com
Code: https://github.com/jbandi/birdcage-experiment