Downloaded 15 times
Uploaded byHarutyun Abgaryan
Mobile application development React Native - Tidepool Labs
The document discusses mobile application development and React Native. It provides an overview of the mobile app development process, from initiation to support. It then focuses on React Native, describing it as a JavaScript framework for building native mobile apps for iOS and Android using similar code bases. Key benefits highlighted are building cross-platform mobile apps using a known technology while still providing native experiences.
In this document
Powered by AI
Introduction to mobile application development focusing on React Native. 2020 revenue projected at $101B.
Explains the mobile application development process: initiation, design, development, testing, support.
Introduction to React Native, a JavaScript framework for cross-platform apps, developed by Facebook.
Comparison with other frameworks like Cordova, highlighting React Native's use of native components.
Installation and setup instructions for React Native development environment using Expo.
Shows basic code structure in React Native with a focus on component rendering.
Discusses the complexities of native development versus leveraging familiar technologies.
Mobile application development React Native - Tidepool Labs
- 1.
- 2. Do you know? “In2020 Expected Growth of Mobile App Revenue is 101 Billion US Dollars.” This statistic presents information on the projected mobile app revenues from 2015 to 2020. In 2015, global mobile app revenues amounted to 41.1 billion U.S. dollars. In 2020, consumers are projected to spend over 101 billion U.S. dollars on mobile apps via app stores.
- 3. Mobile Application DevelopmentProcess ● INITIATION ● DESIGN ● DEVELOPMENT ● ACCEPTANCE ● SUPPORT
- 4. INITIATIONS Initiations talks aboutthe transition of the project from sales team to technical team, where they do initial project kick off with the client and sales team to understand the requirement.
- 5. DESIGN PROCESS FLOW :The Process Flow chart provides a visual representation of the steps in a process. Flow charts are also referred to as ProcessMapping or Flow Diagrams. WIRE FRAME : Elements visible on each of the screen of the mobile application are discussed and noted down as wireframes
- 6. DESIGN STORYBOARD : Everythingincluding the images to be shown, icons appearing, theme, color, background, etc is a part of storyboard. ARCHITECTURE DESIGN : Planning and development of application architecture is performed. Coding is done to give life to the application. TEST PLANNING : The application is tested for bugs by running various programs, performing checks at different conditions to ensure it is robust and flawless.
- 7. DEVELOPMENT PROTOTYPE : Theapp is still in proof-of-concept phase and only core functionality, or specific parts of the application are working. Major bugs are present. ALPHA : Core functionality is generally code- complete (built, but not fully tested). Major bugs are still present, outlying functionality may still not be present.
- 8. DEVELOPMENT BETA : Mostfunctionality is now complete and has had at least light testing and bug fixing. Major known issues may still be present. RELEASE CANDIDATE : All functionality is complete and tested. Barring new bugs, the app is a candidate for release to the wild.
- 9. TESTING FINAL BUILD :It’s incredibly important to test your application early and often on actual devices. Even devices with the same hardware specs can vary widely in their behavior. FINAL RELEASE : The thoroughly tested and checked application is finally made available to end users.
- 10. SUPPORT Customer support isa range of customer services to assist customers in making cost effective and correct use of a product. It includes assistance in planning, installation, training, troubleshooting, maintenance, upgrading, and disposal of a product.
- 11.
- 12. ● Javascript frameworkfor creating native applications ● Released in 2015 by Facebook ● Open source! ● Allows to create iOS, Android and UWP applications REACT NATIVE
- 13. React-Native is aprogramming language that allows developers to build cross-platform mobile apps using JavaScript. With React-Native it’s possible to develop an app once and deploy it on both iOS and Android. Although the apps are written in JavaScript, the apps will use the native features of your device. This means that the app will have the look, the feel, and the performance that matches the native platform. This is done by bridging these features to JavaScript. Therefore, these apps are performant and truly native. React-Native is developed by Facebook and used by big (tech) companies such as Walmart, Instagram, Airbnb, Tesla and UberEATS. With a large community behind React-Native the platform is evolving every day. What is React-Native?
- 14. I've heard thatsomewhere...
- 15. Ahhh, Apache Cordava,Phonegap, Ionic
- 17. So what arethe differences? ● No WebView/UIWebView ● No Hybrid applications ● Uses native components
- 18.
- 19. GET STARTED ● BuyMac install Xcode/ or use Expo ● Install Node.js, npm ● npm install -g react-native-cli ● react-native init yourProject ● Open yourProject.xcodeproj and hit run in Xcode ● Open index .ios.js in text editor and edit some line ● Good luck
- 20. What is Expo? Expois a free and open-source toolchain around React-Native to help developers build native iOS and Android apps. The toolchain includes over the air updates, easy build tooling and a lot of extra API’s on top of React-Native.
- 21.
- 22. Architecture React Component render: function(){ Return<div>Hi!</div> } React Component render: function(){ Return <view>Hi!</view> } React js React native Browser DOM IOS Android
- 23. So this iscool. But why? What’s its value?
- 24.
- 25.
- 26. We want tobuild mobile apps that feel native.
- 27. But we wantto do it with technologies we already know
- 28. I don’t thinkyou’ll be disappointed.