JanusCon - Building Native Mobile Apps with WebRTC
4 likes2,027 views
The document is a presentation about building native mobile apps with WebRTC. It discusses various options for building native apps with web technologies like React Native, Flutter, NativeScript, Progressive Web Apps, Xamarin, Ionic, and Cordova. It focuses on React Native, Flutter, and NativeScript as the most realistic options. React Native is highlighted as the best option due to its large ecosystem of modules for features like WebRTC support, call handling, and push notifications. Building native mobile apps with React Native and WebRTC technologies is recommended.
JanusCon - Building Native Mobile Apps with WebRTC
- 1. BUILDING NATIVE MOBILE APPS WITH WEBRTC Dan Jenkins
- 2. THIS TALK IS FULL OF PINEAPPLES PINEAPPLES & HAM = AMAZING PIZZA 🍍 🐖 🍕
- 3. LOL.
- 4. A LITTLE ABOUT ME
- 6. DAN JENKINS •Founder of Nimble Ape Ltd •Google Developer Expert in Web Technologies •Organiser of CommCon •Public Speaker - Astricon, ClueCon, Signal, Kamailio World, Full Stack Summit •@dan_jenkins on twitter. •Love Lego, Love Electric Vehicles, Love Sustainable Energy 🍍
- 7. NIMBLE APE •Real Time Communication Consultancy •Specialise in VoIP and WebRTC •(WebRTC, Asterisk, FreeSWITCH, Kamailio, Drachtio) •Sponsors of JanusCon and CommCon •https://nimblea.pe
- 8. I LOVE THE WEB I LOVE OPEN SOURCE SOFTWARE & COMMUNITIES
- 9. BUILDING NATIVE MOBILE APPS WITH WEBRTC
- 11. REACT NATIVE
- 12. BUT THIS TALK IS ABOUT MORE THAN REACT NATIVE
- 13. IT'S ABOUT BUILDING NATIVE APPS WITH WEB TECHNOLOGY & WEBRTC
- 14. LET'S TAKE A LOOK
- 15. FIRSTLY, WHAT DO YOU NEED FOR A GOOD SOFTPHONE?
- 17. PUSH NOTIFICATIONS (IOS -VOIP PUSH NOTIFICATIONS ANDROID - DATA ONLY MESSAGES)
- 18. WEBRTC SUPPORT
- 19. WEBRTC •Secure by Design •Quick Call Setup Times due to NAT handling by default •HD Quality Audio Mandatory •Video Support •OPUS mandatory so handling Packet Loss is essentially built in
- 21. EXPECTATIONS •Turning off sensors when you have your ear up to the phone •Interop with audio modes during a phone call •Turning the screen off when its up to your ear •React to hardware button presses
- 22. SO WHAT TOOLS CAN WE USE TO BUILD NATIVE APPS WITH WEB TECH?
- 23. NATIVESCRIPT
- 24. FLUTTER
- 25. VUE NATIVE
- 27. XAMARIN
- 28. IONIC
- 29. CORDOVA
- 30. REACT NATIVE
- 31. THAT'S ABOUT 3 MINUTES ON EACH? 😂
- 32. WHOA! DAN, THAT'S JUST TOO MUCH!
- 34. SO LET'S TAKE A LOOK AT THE REALISTIC OPTIONS 🍍
- 35. WebRTC Support Phone Calling Norms Callkit / Connection Service Modules SIP Libraries Special Push Support Flutter ✅ ✅ ❌ ✅ ✅ React Native ✅ ✅ ✅ ✅ ✅ Nativescript ✅ ✅ ⚠ Only Callkit and not complete ✅ ✅ Vue Native ⚠ ⚠ ⚠ ✅ ✅ PWA ✅ ❌ ❌ ✅ ✅ Xamarin C# and .net are not web technologies Ionic A wrapper around a web view isn't a true native app Cordova A wrapper around a web view isn't a true native app
- 38. NO CALLKIT 😵
- 40. NO AUDIO ROUTING TO EARPIECE 😵
- 41. NO CONTROL OVER SCREEN STAYING ON 😵
- 42. BUT LISTEN TO THE TALK AFTER ME
- 43. I CRY A LITTLE INSIDE EVERY TIME I CAN'T BUILD A PWA
- 44. VUE NATIVE
- 45. VUE NATIVE COMPILES DOWN TO REACT-NATIVE
- 46. SO ALL THE R.N. MODULES SHOULD JUST WORK
- 47. SO THERE'S NOT MUCH POINT TALKING ABOUT BOTH
- 48. SO THAT LEAVES FLUTTER, NATIVESCRIPT & REACT NATIVE
- 49. FLUTTER
- 50. FLUTTER •Made by Google •Compiles to Native completely •Runs on iOS, Android, Web, Desktop and embedded •Written using Dart - so familiar for JavaScript devs •Based on "Widgets" •Theoretically, write once, run everywhere
- 51. NATIVESCRIPT
- 52. NATIVESCRIPT •Build using Vue or Angular •TypeScript •No Bridge between NativeScript and Native APIs •Uses a JavaScript VM to run your non-native code - JavaScriptCore & V8
- 53. REACT NATIVE
- 54. REACT-NATIVE •Made by Facebook •React •Re-usable Components •Bridge between JavaScript & Native •Uses a JavaScript VM to run your non-native code - JavaScriptCore on both •iOS, Android, Windows
- 55. PROS & CONS
- 56. FLUTTER
- 57. GETTING STARTED QUICKLY IS FAIRLY FRICTIONLESS ✅
- 58. THE PROMISE OF IOS/ANDROID/WEB/ DESKTOP ISN'T 100% TRUE ❌
- 59. BUT WHEN IT IS... IT COULD MEAN NOT WRITING ELECTRON APPS FOR DESKTOP ✅
- 60. AND COULD MEAN WRITING ONCE AND INSTANTLY RUNNING ON ALL PLATFORMS ✅
- 61. THE ECOSYSTEM IS FAIRLY SPARSE IF YOU WANT SOME FUNCTIONALITY YOU'LL PROBABLY HAVE TO BUILD A PLUGIN ❌
- 64. LACKS A CALLKIT / CONNECTION SERVICE PLUGIN ❌
- 65. NATIVESCRIPT
- 66. GETTING STARTED QUICKLY IS FAIRLY FRICTIONLESS ✅
- 68. THE ECOSYSTEM IS FAIRLY SPARSE AGAIN IF YOU WANT SOME FUNCTIONALITY YOU'LL PROBABLY HAVE TO BUILD A PLUGIN ❌
- 69. YOU CAN BUILD USING ANGULAR OR VUE ✅
- 72. ❌
- 73. REACT NATIVE
- 74. GETTING STARTED CAN BE A ROYAL PAIN IN THE REAR ❌
- 78. SEEMS TO BE MORE DEVS BUILDING FOR REACT NATIVE ✅
- 79. SO WHAT'S BEST?
- 80. WELL... THATS FOR YOU TO DECIDE
- 81. FLUTTER LOOKS COOL BUT THE ECOSYSTEM ISN'T THERE (YET)
- 83. NATIVESCRIPT SEEMS DECENT BUT SEEMS TO GET FORGOTTEN ABOUT
- 84. DOES THAT MEAN IT GETS LESS ATTENTION & LESS THIRD PARTY MODULES?
- 85. REACT NATIVE HAS HUGE SUPPORT BUT CAN BE INCREDIBLY FRUSTRATING
- 86. BUT WHEN IT WORKS, ITS BEAUTIFUL
- 88. REACT NATIVE WINS HANDS DOWN
- 89. THANKS TO ALL THESE MODULES/ MAINTAINERS
- 91. AND IT'S NOT JUST YOUR IOS/ANDROID APP THAT CAN BE DONE IN WEB TECH
- 93. BUT GO BUILD YOUR NEXT NATIVE APP WITH WEB TECH!
- 94. OR HIRE NIMBLE APE TO HELP YOU :) 🍍