Mobile application development React native By Harut Abgaryan

1. Mobile application
development
React native
Harut Abgaryan

2. Do you know?
“In 2020 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 Development Process
● INITIATION
● DESIGN
● DEVELOPMENT
● ACCEPTANCE
● SUPPORT

4. INITIATIONS
Initiations talks about the 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 : Everything including 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 : The app 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 : Most functionality 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 is a 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. React Native

12. ● Javascript framework for creating native applications
● Released in 2015 by Facebook
● Open source!
● Allows to create iOS, Android and UWP applications
REACT NATIVE

13. React-Native is a programming 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 that somewhere...

15. Ahhh, Apache Cordava, Phonegap, Ionic

17. So what are the differences?
● No WebView/UIWebView
● No Hybrid applications
● Uses native components

18. This is love!!!

19. GET STARTED
● Buy Mac 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?
Expo is 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. Simple Code

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 is cool.
But why? What’s its value?

24. Native is hard.

25. Native is necessary.

26. We want to build mobile
apps that feel native.

27. But we want to do it with
technologies we already
know

28. I don’t think you’ll be
disappointed.