Cross-platform mobile that Works - Coobers
•
1 like•175 views
This document discusses the history and generations of mobile app development from websites and jQuery mobile to native iOS/Android apps to modern approaches using JavaScript and frameworks like React Native. It provides an overview of React Native, highlighting that it allows developing for iOS and Android with one codebase, uses native components for performance, and simplifies testing and debugging. The document also discusses considerations for choosing development approaches and common issues to watch out for with React Native.
Report
Share
Cross-platform mobile that Works - Coobers
- 2. History of mobile app development Generation ios 1.0 websites, jquery mobile Generation native ios / android apps Generation webview based apps Generation javascript engine native apps 1st 2nd 3rd 4th
- 3. One code source for ios and android Javascript based Potentially easy to expand js code system js engine native plugins sdk
- 4. Based on phonegap legacy Complex and inefficient structure Extremely bad performance on entry level devices Very hard to test Impossible to achieve commercial quality html/css js code system js engine browser’s js engine plugins native plugins sdk dom
- 5. As fast to native as possible Easiest to organize and code Cross platform to larger degree Very easy/Seamless SDK integration Fast debugging Easy testing js code plugins native plugins platform js engine sdk
- 6. Client always require great performance Clients always make changes during project development Startup changes during development New logic is introduced on spot Functionality is more important than quality React Native: Quality in commercial projects companies startups
- 7. App to be done quickly App must be cheap Mobile app development risk assessment in commercial environment Be ready to make a lot of small or bigger changes App must work fast Be constructed according UX rules Use native SDK elements Native Ionic Phonegap Xamarin React native It’s compicated No way x x x x x x x x
- 8. Costs of database driven offline-product app ios+android phone Real hours required to achieve good quality 360 40-60$ 10-40 14400-21600$ 400-2400$ 490 25-45$ 160-220 12250-22050$ 4000-9900$ 670 50-60$ 60-90 33500-40200$ 3000-5400$ 240 35-50$ 10-40 8400-12000$ 350-2000$ Cost per hour Hours to implement yearly update Initial cost Yearly cost Native Ionic Xamarin React native
- 9. Runs using native development environment For Javascript uses same environment as Node.JS Significantly simplifies full-stack development You must be enrolled developer with Apple and Google React Native: Environment
- 10. React Native: Integration with existing apps React Native can be integrated with existing app You can embed multiple instances You can put it anywhere, in any view, any layer without overflow or z-index problems Facebook app uses it in their app for events section App structure: SDK native code react native views
- 11. You don’t need to program using native languages With one exception: installing addons Windows is experimental (lacks most of extensions) iOS / Android in version 0.34 is very consistent Biggest problem is internal platform architecture Test, test, test - thankfully it’s easy React Native: multiplatform
- 12. Test on multiple devices Without cables See changes instantly If automatic update is off, you need to manually shake device to reload code Changes done natively require normal app reinstallation React Native: testing
- 13. React Native: cloud integration Using OpenAPI JS API connection code can be generated automatically With offline support and full sync Realm.io can be used as JS layer to multiplatform equivalent to Apple’s CoreData JS can use fetch for simple data download You can use same standards in web app and mobile app
- 14. React: different approach toward coding React for web and React native uses States Programmer set states States are rendered into views High level of abstraction allows smaller amount of code Create efficiency problems Changing state during animation causes frames drop
- 15. React Native: Common issues / bottlenecks Understand states Understand animations Bad efficiency due to bad coding Very fast pace of framework development Mayor architecture limitation: Single threat
- 16. React Native: Integration with native code Use NativeModules to connect to native code Define Objective-C and Java class that bind directly to javascript Run! Native code can run in react-native View without overflow You cannot return values directly, must use callbacks
- 17. Exampleapps
- 18. Thank you! Gdańsk (CB Madison) ul. Jana Heweliusza 9 Campus Warszawa ul. Ząbkowska 31 tel. +48 58 355 40 25 mail: hello@coobers.com