SlideShare uma empresa Scribd logo
1 de 18
28.09.2016
Fatih Şimşek - Software Infrastructure
React Native
React Native
Open source Javascript Library
React Native started as a Facebook's Hackathon project in the
summer of 2013
Facebook Ads Manager on IOS and Android share %85 of the
code
Who is using React Native?
Microsoft brings React Native to the Windows ecosystem
Samsung builds React Native for its hybrid platform (Tizen)
Facebook Groups & Ads Manager
500+ companies and developer who published apps to Apple’s
app store
200+ companies and developer who published apps to Google’s
Play store
https://facebook.github.io/react-native/showcase.html
Github
React Native
Learn once, write anywhere
Be able to bridge Native Code
Testable
Native experience
React Native
Better Developer experience
Work with Existing Apps
Architecture
React Architecture
State, Properties Update UI
React-Native Architecture
State, Properties Update UI
Architecture
Architecture
Flexbox
Flexbox
DEMO
react-native init ProjectName
cd AwesomeProject
react-native run-android / run-ios
* a common issue is that the packager is not started
automatically when you run react-native run-android. You can
start it manually using react-native start.
react-native bundle --platform android --dev false --entry-file
index.android.js --bundle-output
android/app/src/main/assets/index.android.bundle --assets-dest
android/app/src/main/res/
react-native bundle --platform ios --dev false --entry-file
index.ios.js --bundle-output ios/main.jsbundle --assets-dest ios
React Native

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

React native
React nativeReact native
React native
 
How native is React Native? | React Native vs Native App Development
How native is React Native? | React Native vs Native App DevelopmentHow native is React Native? | React Native vs Native App Development
How native is React Native? | React Native vs Native App Development
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
 
Introduction to react native
Introduction to react nativeIntroduction to react native
Introduction to react native
 
Introduction to React Native Workshop
Introduction to React Native WorkshopIntroduction to React Native Workshop
Introduction to React Native Workshop
 
React native
React nativeReact native
React native
 
Introduction to React Native - Nader Dabit
Introduction to React Native - Nader DabitIntroduction to React Native - Nader Dabit
Introduction to React Native - Nader Dabit
 
Developing Apps With React Native
Developing Apps With React NativeDeveloping Apps With React Native
Developing Apps With React Native
 
React-JS.pptx
React-JS.pptxReact-JS.pptx
React-JS.pptx
 
React Native
React NativeReact Native
React Native
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
 
Reactjs
Reactjs Reactjs
Reactjs
 
Its time to React.js
Its time to React.jsIts time to React.js
Its time to React.js
 
Introduction to react_js
Introduction to react_jsIntroduction to react_js
Introduction to react_js
 
ReactJS presentation.pptx
ReactJS presentation.pptxReactJS presentation.pptx
ReactJS presentation.pptx
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
 
WEB DEVELOPMENT USING REACT JS
 WEB DEVELOPMENT USING REACT JS WEB DEVELOPMENT USING REACT JS
WEB DEVELOPMENT USING REACT JS
 
Reactjs
ReactjsReactjs
Reactjs
 
Introduction to React
Introduction to ReactIntroduction to React
Introduction to React
 

Semelhante a React Native

Semelhante a React Native (20)

Why React Native Development is the Best Choice for organizations.ppt.pptx
Why React Native Development is the Best Choice for organizations.ppt.pptxWhy React Native Development is the Best Choice for organizations.ppt.pptx
Why React Native Development is the Best Choice for organizations.ppt.pptx
 
Getting Started With React Native Presntation
Getting Started With React Native PresntationGetting Started With React Native Presntation
Getting Started With React Native Presntation
 
Why big organizations like tesla, facebook, walmart, skype are using react na...
Why big organizations like tesla, facebook, walmart, skype are using react na...Why big organizations like tesla, facebook, walmart, skype are using react na...
Why big organizations like tesla, facebook, walmart, skype are using react na...
 
What is React Native and When to Choose It For Your Project.pdf
What is React Native and When to Choose It For Your Project.pdfWhat is React Native and When to Choose It For Your Project.pdf
What is React Native and When to Choose It For Your Project.pdf
 
React Native_ Pros and Cons for Mobile app development.pdf
React Native_ Pros and Cons for Mobile app development.pdfReact Native_ Pros and Cons for Mobile app development.pdf
React Native_ Pros and Cons for Mobile app development.pdf
 
React Native - CirebonDev
React Native - CirebonDevReact Native - CirebonDev
React Native - CirebonDev
 
When to choose and avoid react native for mobile app development
When to choose and avoid react native for mobile app developmentWhen to choose and avoid react native for mobile app development
When to choose and avoid react native for mobile app development
 
Top React Native Developer Tools and Component Libraries (For Easy and Speedy...
Top React Native Developer Tools and Component Libraries (For Easy and Speedy...Top React Native Developer Tools and Component Libraries (For Easy and Speedy...
Top React Native Developer Tools and Component Libraries (For Easy and Speedy...
 
Amazing vue.js projects that are open source and free.
Amazing vue.js projects that are open source and free.Amazing vue.js projects that are open source and free.
Amazing vue.js projects that are open source and free.
 
Lecture 1 Introduction to React Native.pptx
Lecture 1 Introduction to React Native.pptxLecture 1 Introduction to React Native.pptx
Lecture 1 Introduction to React Native.pptx
 
Reactjs Vs React Native – Key Difference, Advantages, And Disadvantages
Reactjs Vs React Native – Key Difference, Advantages, And DisadvantagesReactjs Vs React Native – Key Difference, Advantages, And Disadvantages
Reactjs Vs React Native – Key Difference, Advantages, And Disadvantages
 
Why is React Native the Best Choice for Cross-Platform Mobile App Development...
Why is React Native the Best Choice for Cross-Platform Mobile App Development...Why is React Native the Best Choice for Cross-Platform Mobile App Development...
Why is React Native the Best Choice for Cross-Platform Mobile App Development...
 
React Native? A developer's perspective
React Native? A developer's perspectiveReact Native? A developer's perspective
React Native? A developer's perspective
 
Top React Native Interview Questions and Answers in 2023
Top React Native Interview Questions and Answers in 2023Top React Native Interview Questions and Answers in 2023
Top React Native Interview Questions and Answers in 2023
 
React native
React nativeReact native
React native
 
What to choose for Mobile app development- React Native vs Native.
What to choose for Mobile app development- React Native vs Native.What to choose for Mobile app development- React Native vs Native.
What to choose for Mobile app development- React Native vs Native.
 
Flutter vs React Native
Flutter vs React Native Flutter vs React Native
Flutter vs React Native
 
Reasons why react native is the future of mobile app development
Reasons why react native is the future of mobile app developmentReasons why react native is the future of mobile app development
Reasons why react native is the future of mobile app development
 
Advantages of building Social Media Apps in React Native
Advantages of building Social Media Apps in React Native			Advantages of building Social Media Apps in React Native
Advantages of building Social Media Apps in React Native
 
the benefits of react native to developing ios and android application from s...
the benefits of react native to developing ios and android application from s...the benefits of react native to developing ios and android application from s...
the benefits of react native to developing ios and android application from s...
 

Mais de Software Infrastructure

Mais de Software Infrastructure (20)

Kotlin
KotlinKotlin
Kotlin
 
NoSql
NoSqlNoSql
NoSql
 
Stream Analytics
Stream AnalyticsStream Analytics
Stream Analytics
 
Quartz Scheduler
Quartz SchedulerQuartz Scheduler
Quartz Scheduler
 
Test Driven Development
Test Driven DevelopmentTest Driven Development
Test Driven Development
 
Deep Learning
Deep Learning Deep Learning
Deep Learning
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
Java9
Java9Java9
Java9
 
Machine learning
Machine learningMachine learning
Machine learning
 
Raspberry PI
Raspberry PIRaspberry PI
Raspberry PI
 
Golang
GolangGolang
Golang
 
Codename one
Codename oneCodename one
Codename one
 
Hazelcast sunum
Hazelcast sunumHazelcast sunum
Hazelcast sunum
 
Microsoft bot framework
Microsoft bot frameworkMicrosoft bot framework
Microsoft bot framework
 
Blockchain use cases
Blockchain use casesBlockchain use cases
Blockchain use cases
 
The Fintechs
The FintechsThe Fintechs
The Fintechs
 
Server Side Swift
Server Side SwiftServer Side Swift
Server Side Swift
 
Push Notification
Push NotificationPush Notification
Push Notification
 
.Net Core
.Net Core.Net Core
.Net Core
 
Java Batch
Java BatchJava Batch
Java Batch
 

Último

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Último (20)

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 

React Native

Notas do Editor

  1. https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/ The Facebook Ads Manager for iOS shipped in February 2015 F8 developer conference in March 2015, Open Source React Native for IOS The Facebook Ads Manager for Android shipped in June 2015 Android Open source in September 2015 (React Native version 0.11)
  2. http://developer.samsung.com/what-is-new/news/Facebook-s-React-Native-gets-backing-from-Microsoft-and-Samsung The React Native team has grown from around 10 to around 20 engineers in the past year and has strong representation in Menlo Park, London, and New York. The main focus areas of the React Native team since the Ads Manager launch have been the following: Improving performance such as startup time, responsiveness, and scroll performance. Integrating with UI and infrastructure of the main Facebook app, both on iOS and Android Building performance tooling such as CPU and memory profilers Building new features needed by product teams at Facebook Supporting product teams by answering questions and fixing bugs quickly Developer experience, such as integrating with internal developer tools and build systems Only IOS and Android are officially supported by Facebook. Outside projects are in developement for using React-Native to build: Windows Universal App Mac OSX desktop App Ubuntu desktop App Apple TV App Samsung Tizen SmartTV / SmartWatch App
  3. Contributors, Commits count bigger than React
  4. https://www.youtube.com/watch?v=0MlT74erp60
  5. http://www.slideshare.net/TadeuZagallo/javascript-react-native-and-performance-at-reacteurope-2016?qid=56ebb2fd-1d03-4521-9e0b-a78fb844f74a&v=&b=&from_search=19 http://www.slideshare.net/TadeuZagallo/react-native-internals?qid=56ebb2fd-1d03-4521-9e0b-a78fb844f74a&v=&b=&from_search=28
  6. Minimum data transfer from bridge for performance Platform.OS == ‘ios’ or ‘android’ http://www.slideshare.net/Polidea/react-native-building-native-ios-apps-with-javascript?qid=56ebb2fd-1d03-4521-9e0b-a78fb844f74a&v=&b=&from_search=42
  7. Good benefits of Javascript is their asychronous natures React-Native use Javascript asynchronous call via the bridge to invokes the host native platform’s underlying APIs and UI elements Since, React-Native dont run on main UI thread, it can asynchronous call without impact user’s experience. http://www.slideshare.net/KevinONeill42/react-native-58258744?qid=56ebb2fd-1d03-4521-9e0b-a78fb844f74a&v=&b=&from_search=43
  8. http://www.slideshare.net/kobkrit/react-native-lecture-4-basic-elements-and-ui-layout-by-using-flexbox?qid=49a8bf5e-c250-4c44-a69e-0fa94eed5cd5&v=&b=&from_search=4
  9. Simple Render (Hello World)
  10. Tools: http://www.slideshare.net/adrian_philipp/experiences-building-apps-with-react-native?qid=56ebb2fd-1d03-4521-9e0b-a78fb844f74a&v=&b=&from_search=32