React-Nativ ive Garca lvarez, Pelayo Gonzlez Melndez, Alejandro - - PowerPoint PPT Presentation

▶
react nativ ive
SMART_READER_LITE
LIVE PREVIEW

React-Nativ ive Garca lvarez, Pelayo Gonzlez Melndez, Alejandro - - PowerPoint PPT Presentation

Mar 19, 2023 145 likes •437 views

React-Nativ ive Garca lvarez, Pelayo Gonzlez Melndez, Alejandro Gutirrez Fernndez, igo Megido Garca, Luca Multiplatform development environment What is React Native development Native? Released by

slide-1
SLIDE 1

React-Nativ ive

  • García Álvarez, Pelayo
  • González Meléndez, Alejandro
  • Gutiérrez Fernández, Íñigo
  • Megido García, Lucía
slide-2
SLIDE 2

What is React Native?

  • Multiplatform development environment
  • Native development
  • Released by Facebook in 2015
slide-3
SLIDE 3

How does it work?

  • React framework + Native development
  • React primitives render to native platform UI
  • Core components mapping to native UI building

blocks:

  • View
  • ScrollView
  • ImageView
  • Text
  • …
slide-4
SLIDE 4

Stakeholders

Power

slide-5
SLIDE 5

Quality Attributes

slide-6
SLIDE 6

Reusability and Learnability

  • One code base → multiple platforms (IOS, Android,

UWP, …)

  • Written in JSX, syntax extension to JavaScript
slide-7
SLIDE 7

Modularity and Community Support

  • Open Source
  • Uses npm
  • Components → great collection of third-party

libraries

slide-8
SLIDE 8

Performance

  • Mostly native code, be it Swift, Java or C#
slide-9
SLIDE 9

Usability

  • React Native focuses on UI design
  • Responsive
slide-10
SLIDE 10

Security and Reliability

  • Native code should be more stable and secure
  • Maintained by Facebook
slide-11
SLIDE 11

Constraints

  • JavaScript
  • NodeJs
  • Package Manager (npm, yarn…)
  • Python
  • Reusability
slide-12
SLIDE 12

Features and modules

slide-13
SLIDE 13

How does it work?

  • React + native capabilities
  • Javascript -> access platform API's
  • React Components
slide-14
SLIDE 14

Core Components

  • <View>
  • <Text>
  • <Image>
  • <ScrollView>
  • <TextInput>
slide-15
SLIDE 15

Native Modules

  • Javascript functions
  • Implemented natively for each platform
  • When is it used?
  • Capabilities needed -> React Native does not include a module
slide-16
SLIDE 16

Creating a Native Module

  • Create the application
  • Create the module
  • Add module in package.json
slide-17
SLIDE 17

Architecture

slide-18
SLIDE 18

[…, createView(id, RCTView, ...)] view.appendChild(RCTView) Platform UI Layout (Shadow Tree) JavaScript

  • nScroll
slide-19
SLIDE 19

Fabric

slide-20
SLIDE 20

Platform UI Layout JavaScript JavaScript Interface (JSI) getNativeModule('GPS').getCoordinates()

slide-21
SLIDE 21

Native Modules getNativeModule('GPS').getCoordinates() const coordinates getNativeModule('Uploader').upload(coordinates) JSON JSON Android JavaScript

slide-22
SLIDE 22

Native Modules getNativeModule('GPS').getCoordinates() const coordinates getNativeModule('Uploader').upload(coordinates) Android JavaScript void* coordinates coordinates .setAlpha(0)

slide-23
SLIDE 23

Application

Expo CLI QuickStart – React Native CLI

slide-24
SLIDE 24

Expo CLI

slide-25
SLIDE 25
slide-26
SLIDE 26

React CLI

  • Requirements: Node, python2 and jdk
  • Android Studio:
  • Android SDK
  • Android SDK Platform
  • Intel HAXM (or AMD equivalent)
  • Android Virtual Device
slide-27
SLIDE 27
slide-28
SLIDE 28

Thanks for your attentio ion!