View
3.283
Download
0
Category
Preview:
Citation preview
ITS485 Lecture 1: React Native Introduction
Dr. Kobkrit Viriyayudhakorn iApp Technology Limited http://www.kobkrit.com
Course Outline
Course Outline
Grading Policy• Quizzes: 10% • At the beginning of the class (Always
be on time). • Term Project: 20% • Midterm exam: 35% (Open Books) • Final exam: 35% (Open Books)
Term Project• Making a 5-10 Screens Mobile Application. • Group & Project Assignment after the midterm exam. • Set up a group of three. (36/3 = 12 groups) • 15% - Group scores - Usefulness, App Business
Model, UI, UX, Functionality, Code Style, and Pitching.
• 5% - Individual scores - App development questions target to each person during presentation.
• 10 minutes presentation: Pitching 3 minutes, Code Explanation 2 minutes, Question & Answering 5 minutes.
Books & Reference• https://facebook.github.io/reactnative/
• Bonnie Eisenman, Learning React Native Building Native Mobile Apps with JavaScript, O'Reilly Media, December 2015.
• https://github.com/jondot/awesome-react-native
• https://js.coach/react-native/
What is React Native?• JavaScript framework for building iOS and Android
mobile apps.
• Based on popular JavaScript Web framework called React.
• Created by Facebook. Firstly release iOS version on March 2015 and Android version on September 2015
• Writing the app by using JavaScript and XML-esque markup (JSX)
• React-Native bridges and invokes the Native rendering API in Objective-C (iOS) and Java (Android)
Approach of Mobile App Dev.
Approach Platform Logic UI UX Dev Time*
NativeObject C, Swift
(iOS), Java (Android)
Native Native Smooth 6-24 weeks
HTML5 Hybrid
PhoneGap, Cordova, Ionic JS HTML,
CSS Laggy 2-8 weeks
Native Hybrid
React Native, NativeScript JS Native Smooth 2-8 weeks
* 20-30 screens mobile apps approximated based on instructor experiences
Why React Native?• Native Experience
• One language rules them all, JavaScript.
• Fast & Great Development Experience
• Don’t Waste Time Recompiling (Hot Reloading)
• 80% Share code between Android & iOS
• Great Debugging Tool using Chrome Developer Tools
• Be able to bridge with Native Code when we need to.
Native Experience
Hot Reloading
Debugging with Chrome Developer Tools
Why not React Native?
• React-Native is still relatively young compared with Native iOS and Android Communities (Released on 2015)
• Some of Native API still are not supported. (But you can use the native libraries through)
• Add one additional layer to mobile app project.
What is React?• Declarative, Efficient,
and Flexible JavaScript Library that Building User Interface on Website.
• React Native is rooted from React.
• React treats every thing as a Component.
A React Component
How React Native Works?• Q: How a Web framework (React) can be improved and
become a Native Mobile Development Platform?
• A: Flexibility of React’s Virtual DOM
• React aimed to make Web application fast as much as possible.
• DOM Changing (Changing the content of webpage) dynamically is expensive step. Re-rendering DOM is significant impact on performance.
• Rather than directly render change DOM in the page, React compute the only diff that need to be render in memory by Virtual DOM and re-renders the minimal amount necessary.
Virtual Dom, Technique of React => Root of React Native
Another Benefits of Virtual DOM
• Performance benefits.
• Abstraction layers.
• FB Engineer: What if React could render to a target other than the Web Browser’s DOM?
• Instead of rendering HTML/CSS to the browser’s DOM. Why can’t we rendering mobile app by using Objective-C APIs to render to iOS, and invokes Java to render to Android.
Rendering Lifecycle
Mounting Component
Re-rendering Component
Async Rules• Good benefits of JavaScript is their asynchronous
natures.
• React-Native is running on separated thread using JavaScript asynchronous call via the event bridge to invokes the host native platform’s underlying APIs and UI elements. (Objective-C, Java)
• Since, React-Native don’t run on the main UI rendering thread, it can do asynchronous call without impact user’s experience (such as delay).
AndroidNative
UI
Event Bridge
JS World Android World
Thread 1 Main Thread
AsyncCall(Non-Blocking)
How React-Native Draw?• React for the Web, render normal HTML elements
• React Native, render cross-platform (or platform-specific) native UI component.
Cross Platform (iOS, Android) Platform Specific
<DatePickerIOS>
Example of Platform Specific Components
<Switch>
<SwitchIOS><SwitchAndroid>
JSX• Combining JavaScript and XML-markup syntax to create view.
• Single File Concept (Write down at Component Class), Not Seperate Files (Split HTML, CSS, JS)
• Separation of concerns > Separation of technologies
JSX (Underlined) Rendered View
Styling• In Web, We have CSS, necessary part of the Web.
• In React-Native, We have something similar to CSS, called Flexbox Layout Model.
{ background-color : ‘white’}
{ backgroundColor : ‘white’}
CSS
Camel Case in React
React-Native Support• Mac OS can develop
• iOS
• Android
• Windows OS can develop
• Only Android
HomeBrew Installation
• Open Terminal (Click on Find icon on the top right of the screen)
• Type “Terminal”
• Enter $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Install React-Native in Mac for iOS Development.
React-Native-Cli Command
Try
• $ react-native init sampleProject
• $ cd sampleProject
• $ react-native run-ios
IDE• Any Text Editor is fine.
• Atom
• React
• React-Snippet
• Atom-React-Native-CSS
• Atom-React-Native-Autocomplete
• Sublimes
• Visual Studio Code
Project Structure
Recommended