React Native

Oct 20, 2015Download as PPTX, PDF5 likes1,039 views

The document discusses React Native for Android. It covers topics like React Native, JavaScript environment, ES6 syntax, JSX syntax, Node.js/NPM, React, rendering, debugging, running demos, delivering packages, examples, performance considerations, and what can be learned from building cross-platform mobile apps with React Native. Building native mobile apps for both iOS and Android from the same codebase allows shipping updates faster and reusing code, though it also has challenges to overcome.

Survey
• Node.js / NPM
• JavaScript
• React Native
• React

Content
• React && React Native
• Thinking
• Performance
• JavaScript
• Deep into React Native
• Quick Start
• Hot Deployment
• Why React Native

JavaScript Environment
• JSC: iOS simulators and devices
• V8: Chrome debugging / Debug Server
• JSC: Android emulators and devices

JSX Synax
• Looks similar to XML
• A JavaScript syntax extension
• NOT a part of the ECMAScript spec

JSX Synax
https://facebook.github.io/jsx/

React
• Declarative
• Virtual DOM
• Simple: state / render

Render
• Data changed: setState()
• Initialized: getIinitialState()

Run Demo
• Android …
• iOS: open project in Xcode, then run

Run Demo for Android
• devices: 5.0 above, adb reverse port
• simulators
• devices: set Debug server

Deliver Package
• Android: gradle plugin
• iOS / Android: react-native bundle(since 0.12.0)

Why React Native
• Acceptable performance
• Native look and feel
• Code reuse
• Fast development
• Fast deployment (Still some way to go for Android)

Deep into React Native
• JavaScriptModule
• ReactBridge
• NativeModule
• Native UI Components

ReactBridge
• callFunction(int moduleId, int methodId, NativeArray arguments)
• setGlobalVariable(String propertyName, String data)

Module tables
• NativeModule
• JavaScriptModule

Module tables
• From JS to Native: MessageQueue
• From Native to JS
• Send touch event to JS, JS process UI

Update React Native apps, instantly.
Only for iOS currently.

A compelling reason for using React Native instead
of WebView-based tools is to achieve 60 FPS and a
native look & feel to your apps.
Performance

Dropping JS thread FPS because of doing a lot of
work on the JavaScript thread at the same time

• Development mode (dev=true)
• Slow navigator transitions
• ListView initial rendering is too slow or scroll
performance is bad for large lists

Considerations
• Test on both platforms
• Prone to human error
• Inevitable consequence

Working across separate iOS and Android code
repositories is difficult.
Even with lots of tools and automation.
Code repositories

WeApp
• CSS
• iOS and Android implementation
• Testing

Shipped native app on two platforms, with native
look and feel.
What we learn

Not all of the engineers were familiar with React
when they joined the team.
Yet they built an iOS app with native look and feel
in just five months.
What we learn

And after an additional three months, we released
the Android version of the app.
What we learn

What we learn
• Product engineer: full stack
• Creativity
• Smart and hard working

Веб-технологии продолжают штурмовать мир мобильных устройств, а React Native - очередная попытка JavaScript распространить свое влияние и захватить мир. Для тех, кто что-то слышал о React Native, но все никак не находил времени попробовать. На семинаре мы попробуем, пощупаем, посмотрим.

React native-meetup-talkkiranabburi

The document introduces React Native, which allows building mobile apps using React. It discusses why React Native brings the best of native and web development by allowing use of React to build native mobile apps. Key topics covered include installing React Native, its components, styling, layout system, and debugging. The presenter aims to provide an overview of React Native and take attendees through a code sample.

Optimizing React Native views for pre-animationModusJesus

React Native is a framework that allows developers to use React to build mobile apps for iOS and Android. It uses JavaScript to render UI components to native mobile components. Maintaining 60 frames per second is important for a smooth user experience. To optimize performance, developers should limit the number of components rendered initially, optimize images, avoid over-nesting components, and write efficient JavaScript code.

An iOS Developer's Perspective on React NativeAleksandras Smirnovas

1. The document discusses the author's experience with native iOS development and introduces React Native as a way to write mobile apps using JavaScript instead of Objective-C or Swift. 2. It provides an overview of how React Native works by using JavaScriptCore and Node.js to render components while allowing developers to use familiar Flexbox syntax for layouts instead of Autolayout. 3. The author demonstrates how to install React Native, create a basic app, add components and styles, and use tools like the Inspector and Perf Monitor.

React NativeArtyom Trityak

Getting Started with React Native (and should I use it at all?)Devin Abbott

Intro to react nativeModusJesus

This document provides an overview and introduction to React Native, including: - What React Native is and the problems it solves like enabling cross-platform development using a single JavaScript codebase. - The technologies that comprise React Native like ReactJS and how it binds to native platforms. - Getting started with a basic React Native app and examples of extending it with custom modules. - An overview of the React Native component library and APIs. - Recommendations to get familiar with related technologies like JSX, Flow, and Node.js. - Thoughts on the benefits and challenges of developing with React Native.

React native - React(ive) Way To Build Native Mobile AppsJimit Shah

React Native is an open source framework released by Facebook in 2015 that allows building native mobile apps using React. It uses JavaScript to render components and runs these components on both iOS and Android platforms. The architecture runs JavaScript code on a virtual machine and uses an asynchronous bridge to communicate with native components, allowing truly native UI and performance. It uses CSS flexbox for layout and styling components within JavaScript rather than globally. This provides benefits like deterministic resolution, no dead code, and leveraging React's proven virtual DOM. Getting started requires Node.js, watchman, and the React Native CLI to generate projects that can be run from Xcode or Android Studio.

Creating books app with react nativeAli Sa'o

Ali Hussein Al-Sa'o is a senior front end developer with 10 years of experience in web development. The session will cover an introduction to React and React Native, including what they are, their key characteristics, and an installation guide. It will also discuss debugging in React Native and provide an overview of coding and additional resources. React Native allows building mobile apps using only JavaScript and aims to provide a faster development cycle than alternatives like Cordova through features like live reloading and over-the-air updates.

React Native for ReactJS DevsBarak Cohen

This document introduces React Native, which allows developers to build native mobile apps for iOS and Android from JavaScript. React Native uses React to construct mobile user interfaces and allows sharing of code across platforms. It renders native UI components rather than webviews, supports flexbox layout, and exposes platform APIs. Developers can build full-stack universal apps that share code between web and mobile using React Native and tools like Redux. It provides benefits like hot reloading, native performance, and the ability to add it incrementally to existing apps.

Introduction to React Nativedvcrn

David Mohl presented on React Native, a framework for developing native iOS applications using React. Some key points: - React Native allows building native iOS apps using React and JavaScript instead of Swift, while reusing code across iOS and Android. - It is not a webview, cross-compiler, or solution for "write once, run everywhere". Apps built with React Native are fully native and can access the same APIs and capabilities as apps built using Swift. - Rapid development is enabled through reloading code changes instantly using Hot Reloading. Functional programming principles and reusable components also improve development speed.

React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...Codemotion

React Native allows developers to build mobile apps using JavaScript and React while leveraging native UI components. It brings the "React way" of building UIs with reusable components to mobile development. While code can't always be fully shared, UI components are rendered natively and the workflow is similar to building web apps, with changes compiled and live reloaded on emulators. Debugging also uses Chrome tools. The talk demonstrated building a simple counter app and discussed React Native APIs and interoperating with native code.

From zero to hero with React Native!Commit University

React Native in a nutshellBrainhub

Putting the Native in React Native - React Native Bostonstan229

Experiences building apps with React Native @DomCode 2016Adrian Philipp

React Native is all about combining great user experience on native platforms with the developer experience of React on the web. Since it’s start 1.5 years ago, React Native continuously enjoys a tremendous traction. In 2015 React got popular, I believe 2017 will be the year of React Native. I followed the development since the start and now built several React Native apps. During my talk I like to introduce the library, show useful tooling and give practical advice for building React Native apps.

Introduction to React NativeSambhu Lakshmanan

When to (use / not use) React Native.Bobby Schultz

React Native allows building mobile apps using JavaScript and React by using native platform APIs instead of webviews. It does not replace writing code for each platform but allows sharing business logic code across iOS and Android. React Native uses JavaScript to handle views and state while native platform code handles rendering, animations, and other native tasks. This provides native performance with cross-platform code reuse. Challenges include different data types between JavaScript and native platforms and some debugging requiring Xcode.

Experiences building apps with React Native @UtrechtJS May 2016Adrian Philipp

React Native is all about combining great user experience on native platforms with the developer experience of React on the web. Since it’s start one year ago, React Native continuously enjoys a tremendous traction. In 2015 React got popular, 2016 will be the year of React Native. I followed the development since the start and now I’m busy building my third React Native app. During my talk I like to introduce the library, show useful tooling and give practical advice for building React Native apps.

Introduction to React NativeWaqqas Jabbar

This document provides an introduction to React Native, including prerequisites, key concepts, architecture, libraries, and demos. React Native allows building mobile apps using React that work on both iOS and Android. It provides a native experience while allowing code reuse between platforms. Popular libraries that complement React Native development include React Navigation, React Redux, and NativeBase. The document demonstrates building a simple "Hello World" app and a production app with features like custom fonts and REST API integration. It discusses challenges like frequent React Native updates and debugging tools like Chrome and Reactotron.

NativescriptSoftware Infrastructure

NativeScript is a framework that allows building native iOS and Android apps using JavaScript and CSS. It provides a runtime for creating apps with a single JavaScript codebase that can run natively on each platform. Key features include using existing JavaScript and CSS skills, two-way binding, support for Angular 2, and a low learning curve. The document then discusses the NativeScript runtime, popular IDEs and CLI commands, components and layouts, CSS support, debugging, and example apps built with NativeScript.

JHipsterYuen-Kuei Hsueh

Intro To React NativeFITC

Intro To React Native with Varun Vachhar OVERVIEW React Native introduces a new way to write native mobile apps. You can take everything that you know and love about React and apply it to native apps. Unlike hybrid apps, it gives you access to both native APIs and UI components. The application logic uses JavaScript whereas, the UI is fully native! It also brings the best of the web to native, things like – flexbox layout model, XMLHttpRequest, requestAnimationFrame, etc. OBJECTIVE To introduce the audience to React Native. Show how they can leverage their knowledge of web development to build native apps. TARGET AUDIENCE Developers familiar with React who are interested in building native mobile apps. ASSUMED AUDIENCE KNOWLEDGE Basic knowledge of React, ES6 and CSS. FIVE THINGS AUDIENCE MEMBERS WILL LEARN What is React Native How it is an extension of hybrid How to use polyfills to leverage the best of the web while getting native performance How to debug React Native apps How to use Flexbox and CSS for styling a React Native app

Introduction to react nativeDani Akash

This document introduces React Native, a framework for building mobile apps using React. It allows building Android and iOS apps with shared code. React Native uses a virtual DOM for fast rendering. Components manage state and receive data through props. Lifecycle methods handle mounting, updating, and unmounting. Setting up requires Node.js, React Native CLI, and Android Studio or Xcode. Hot reloading, Flexbox layouts, and libraries like Lottie and React Navigation make development easier.

NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularTodd Anglin

Do you want to build native mobile apps for iOS and Android? Are you a web developer? Then NativeScript is the perfect framework for you. NativeScript is an open source framework for creating native mobile apps using the skills of the web developer: JavaScript, CSS and simple tag-based markup. Create rich, high-performance iOS and Android apps with 100% native UI using many of the skills you already have. Topics covered include: NativeScript framework core concepts and getting started Accessing native device capabilities with JavaScript Building native mobile apps with Angular 2 Common app patterns (login, settings, data bound list and more) Styling NativeScript with CSS Targeting specific devices and screens Debugging and deploying to devices There has never been a better (and easier) way for web developers to create native mobile apps.

TypeScriptSoftware Infrastructure

This document provides an overview of TypeScript, including what it is, why it was created, its key features and benefits. It begins by explaining what JavaScript is and some of its limitations like dynamic typing and lack of modularity. It then introduces TypeScript as a superset of JavaScript that adds optional static typing and class-based object-oriented programming. The document discusses how TypeScript works with existing JavaScript frameworks and libraries, and highlights features like strong typing, better tooling and explicit intent. It provides details on TypeScript's development environment and open source status before concluding with a demonstration and mentioning some alternative languages.

React Native: React Meetup 3Rob Gietema

NativeScript Developer Day Keynote - Todd Anglin & Burke HollandBrian Rinaldi

Erica Cooksey Reactathon 2018🏡 Erica Cooksey

This document discusses sharing code between React Native and native Android apps at Eaze. It describes Eaze's decision to use React Native to leverage their existing React JS team and share resources between mobile and web. While React Native provided initial velocity, native Android development improved performance. The document outlines their approach to sharing code between the platforms using a publish-subscribe model, serializing data and emitting events between native and JS layers via module bindings and callbacks.

React Native - DILo SurabayaDILo Surabaya

More Related Content

What's hot (20)

Creating books app with react nativeAli Sa'o

React Native for ReactJS DevsBarak Cohen

Introduction to React Nativedvcrn

React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...Codemotion

From zero to hero with React Native!Commit University

React Native in a nutshellBrainhub

Putting the Native in React Native - React Native Bostonstan229

Experiences building apps with React Native @DomCode 2016Adrian Philipp

Introduction to React NativeSambhu Lakshmanan

When to (use / not use) React Native.Bobby Schultz

Experiences building apps with React Native @UtrechtJS May 2016Adrian Philipp

Introduction to React NativeWaqqas Jabbar

NativescriptSoftware Infrastructure

JHipsterYuen-Kuei Hsueh

Intro To React NativeFITC

Introduction to react nativeDani Akash

NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularTodd Anglin

TypeScriptSoftware Infrastructure

React Native: React Meetup 3Rob Gietema

NativeScript Developer Day Keynote - Todd Anglin & Burke HollandBrian Rinaldi

Creating books app with react nativeAli Sa'o

React Native for ReactJS DevsBarak Cohen

Introduction to React Nativedvcrn

React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...Codemotion

From zero to hero with React Native!Commit University

React Native in a nutshellBrainhub

Putting the Native in React Native - React Native Bostonstan229

Experiences building apps with React Native @DomCode 2016Adrian Philipp

Introduction to React NativeSambhu Lakshmanan

When to (use / not use) React Native.Bobby Schultz

Experiences building apps with React Native @UtrechtJS May 2016Adrian Philipp

Introduction to React NativeWaqqas Jabbar

NativescriptSoftware Infrastructure

JHipsterYuen-Kuei Hsueh

Intro To React NativeFITC

Introduction to react nativeDani Akash

NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularTodd Anglin

TypeScriptSoftware Infrastructure

React Native: React Meetup 3Rob Gietema

NativeScript Developer Day Keynote - Todd Anglin & Burke HollandBrian Rinaldi

Similar to React Native (20)

Erica Cooksey Reactathon 2018🏡 Erica Cooksey

React Native - DILo SurabayaDILo Surabaya

Developing a mobile cross-platform libraryKostis Dadamis

Here, I am including the experience I had while exploring solutions for developing a mobile cross-platform library, i.e. a single codebase that could be part of mobile apps running under different platforms. It covers my journey from mobile cross-platform developments tools (PhoneGap, Titanium, and the likes), code porting tools, and WebViews that weren't up to the task, to C++ and JavaScript engines that did work. There aren't many resources out there explaining how to approach this problem, so we thought it could be helpful if we shared this experience.

Introduction to React nativeDhaval Barot

React Tech SalonChenguang ZHANG

React is a JavaScript library for building user interfaces that aims to solve issues with data changing over time in large web applications. It introduces components, re-rendering on data changes rather than mutating data, and a virtual DOM for efficient re-rendering. React uses a unidirectional data flow and one-way data binding that improves design architecture and code reusability. Related technologies like JSX, Flux, GraphQL, Relay, and React Native further enhance React's capabilities.

UCCSC 2016Alex Wu

The document discusses plans for developing next generation mobile applications for UC San Diego's campus using React Native. It highlights differences between traditional campus apps and more personalized, conversational apps for the millennial generation. The goals are to better connect students to campus and meet their expectations. Technical goals include leveraging mobile capabilities and enabling distributed development. React Native is chosen as the technology platform to develop cross-platform native mobile apps using common code. Future plans include more personalized features like notifications, surveys and analytics using Amazon Web Services.

20120306 dublin jsRichard Rodger

The document discusses how JavaScript can be used from the user interface on mobile and web apps through to the server and database using techniques like Node.js. It provides examples of how Node.js allows for high performance server-side JavaScript and how MongoDB can be used as a database. The document outlines lessons learned around challenges of multi-platform development and benefits of outsourcing databases and other services.

Your choices for building a mobile app in 2016Jad Salhani

React nativeNexThoughts Technologies

This document provides an overview of ReactJS and React Native. It defines ReactJS as a JavaScript library for building user interfaces and explains concepts like components, virtual DOM, JSX, props, states, and one-way data flow. It also covers React Native and how it allows building native mobile apps using JavaScript and React. Key differences between Ionic and React Native are outlined. Examples of companies that use ReactJS and React Native are given. Setup and installation instructions for React Native are provided.

React Native - Build Native Mobile AppMobio Solutions

Super tools to boost productivity in React dev env!Souvik Basu

This document discusses various tools that can boost productivity for frontend developers. It covers tools for prototyping, design, coding, debugging, testing, building, deploying, releasing, supporting, and learning code. Some key tools mentioned include pencil and paper, Mural, Sketch, Figma, VS Code, React Boilerplate, Storybook, Chrome Dev Tools, Jest, Netlify, LogRocket, and Udemy courses. The document emphasizes learning fundamentals, ergonomic setups, regular breaks, and maintaining a holistic lifestyle to maximize productivity.

Cross-platform development on mobile devicesaction.vn

This document discusses options for cross-platform mobile development and compares developing native apps separately versus using cross-platform environments. It reviews several cross-platform options like Unity and ngCore and notes pros and cons for different app types. While cross-platform speeds development, interfaces may differ and performance can be reduced compared to native. The document recommends understanding each environment's characteristics and provides examples like DeNA's ngCore and Arctic.js game engines.

OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNABuff Nguyen

This document discusses options for cross-platform mobile development and compares their pros and cons. It outlines that cross-platform frameworks allow developing for both iOS and Android at once but can limit capabilities and have differing UI implementations. Games may perform better than business apps on such frameworks. The document also introduces several specific cross-platform options like ngCore, JSX, and Arctic.js and notes tools like ExGame for porting Flash games to mobile.

MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementZach Lendon

This document discusses React, a JavaScript library for building user interfaces. It notes that React uses virtual DOM for faster rendering. React components render on state changes and use props and state as inputs. Scaling with React involves using Flux architecture and stores instead of MVC controllers. React can also be integrated with other frameworks like Backbone and Angular by triggering re-renders on data changes.

Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Zach Lendon

Introduction to react native with reduxMike Melusky

This document provides an introduction and overview of React Native with Redux. It begins with an introduction to React components, props, and state. It then covers building a sample React Native app and advanced concepts like navigation and Redux. The document compares React Native to other native frameworks and provides resources for learning more. It was presented at Philly.NET on March 24, 2018 and discusses topics like React basics, React Native, native navigation solutions, and integrating Redux.

Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Ryan Cuprak

Java EE 7 provides a strong foundation for developing the back end for your HTML5 mobile applications. This heavily code-driven session shows you how you can effectively utilize Java EE 7 as a back end for your Apache Cordova mobile applications. The session demonstrates Java EE 7 technologies such as JAX-RS 2.0, WebSocket, JSON-P, CDI, and Bean Validation. It provides an overview of the basics of Apache Cordova as well as the tooling support added in NetBeans 8. The session also demonstrates an integrated approach to rapidly developing HTML5 mobile applications with Java EE 7 and NetBeans and concludes with best practices and pitfalls.

NodeJS and what is actually doesVictor Reyes Heitmann

Node.js is a JavaScript runtime environment that allows JavaScript to be run on the server side. It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient for data-intensive real-time applications that require persistent connections. Some common uses of Node.js include real-time web applications, building APIs, and handling multiple connections at once without creating new threads. The document discusses why Node.js is well-suited for applications that require maintaining persistent connections from the browser to send updates in real-time using techniques like long-polling.

Node.js for .NET DevelopersDavid Neal

20120802 timisoaraRichard Rodger

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine that allows for writing server-side code in JavaScript. It has a single-threaded, event-driven architecture that makes it efficient for data-intensive real-time applications. Some key advantages of Node.js include using JavaScript for both client-side and server-side code, high performance due to event-driven and non-blocking model, and rich ecosystem of third-party modules. Mobile web apps can be built with Node.js by using HTML5 features and JavaScript on the server and client sides.

Erica Cooksey Reactathon 2018🏡 Erica Cooksey

React Native - DILo SurabayaDILo Surabaya

Developing a mobile cross-platform libraryKostis Dadamis

Introduction to React nativeDhaval Barot

React Tech SalonChenguang ZHANG

UCCSC 2016Alex Wu

20120306 dublin jsRichard Rodger

Your choices for building a mobile app in 2016Jad Salhani

React nativeNexThoughts Technologies

React Native - Build Native Mobile AppMobio Solutions

Super tools to boost productivity in React dev env!Souvik Basu

Cross-platform development on mobile devicesaction.vn

OGDC2012 Cross-Platform Development On Mobile Devices_Mr.Takaaki Mizuno_DeNABuff Nguyen

MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementZach Lendon

Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Zach Lendon

Introduction to react native with reduxMike Melusky

Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)Ryan Cuprak

NodeJS and what is actually doesVictor Reyes Heitmann

Node.js for .NET DevelopersDavid Neal

20120802 timisoaraRichard Rodger

Recently uploaded (19)

(Hosting PHising Sites) for Cryptography and network securityaluacharya169

5-Proses-proses Akuisisi Citra Digital.pptxandani26

IT Services Workflow From Request to Resolutionmzmziiskd

Perguntas dos animais - Slides ilustrados de múltipla escolhasocaslev

Computers Networks Computers Networks Computers NetworksTito208863

DNS Resolvers and Nameservers (in New Zealand)APNIC

Understanding the Tor Network and Exploring the Deep Webnabilajabin35

While the Tor network, Dark Web, and Deep Web can seem mysterious and daunting, they are simply parts of the internet that prioritize privacy and anonymity. Using tools like Ahmia and onionland search, users can explore these hidden spaces responsibly and securely. It’s essential to understand the technology behind these networks, as well as the risks involved, to navigate them safely. Visit https://torgol.com/

Top Vancouver Green Business Ideas for 2025 Powered by 4GoodHostingsteve198109

Vancouver in 2025 is more than scenic views, yoga studios, and oat milk lattes—it’s a thriving hub for eco-conscious entrepreneurs looking to make a real difference. If you’ve ever dreamed of launching a purpose-driven business, now is the time. Whether it’s urban mushroom farming, upcycled furniture sales, or vegan skincare sold online, your green idea deserves a strong digital foundation. The 2025 Canadian eCommerce landscape is being shaped by trends like sustainability, local innovation, and consumer trust. To stay ahead, eco-startups need reliable hosting that aligns with their values. That’s where 4GoodHosting.com comes in—one of the top-rated Vancouver web hosting providers of 2025. Offering secure, sustainable, and Canadian-based hosting solutions, they help green entrepreneurs build their brand with confidence and conscience. As eCommerce in Canada embraces localism and environmental responsibility, choosing a hosting provider that shares your vision is essential. 4GoodHosting goes beyond just hosting websites—they champion Canadian businesses, sustainable practices, and meaningful growth. So go ahead—start that eco-friendly venture. With Vancouver web hosting from 4GoodHosting, your green business and your values are in perfect sync.

Best web hosting Vancouver 2025 for you businesssteve198109

highend-srxseries-services-gateways-customer-presentation.pptxelhadjcheikhdiop

OSI TCP IP Protocol Layers description fcbr49917

White and Red Clean Car Business Pitch Presentation.pptxcanumatown

APNIC -Policy Development Process, presented at Local APIGA Taiwan 2025APNIC

APNIC Update, presented at NZNOG 2025 by Terry SweetserAPNIC

Determining Glass is mechanical textileAzizul Hakim

Smart Mobile App Pitch Deck丨AI Travel App Presentation Templateyojeari421237

🚀 Smart Mobile App Pitch Deck – "Trip-A" | AI Travel App Presentation Template This professional, visually engaging pitch deck is designed specifically for developers, startups, and tech students looking to present a smart travel mobile app concept with impact. Whether you're building an AI-powered travel planner or showcasing a class project, Trip-A gives you the edge to impress investors, professors, or clients. Every slide is cleanly structured, fully editable, and tailored to highlight key aspects of a mobile travel app powered by artificial intelligence and real-time data. 💼 What’s Inside: - Cover slide with sleek app UI preview - AI/ML module implementation breakdown - Key travel market trends analysis - Competitor comparison slide - Evaluation challenges & solutions - Real-time data training model (AI/ML) - “Live Demo” call-to-action slide 🎨 Why You'll Love It: - Professional, modern layout with mobile app mockups - Ideal for pitches, hackathons, university presentations, or MVP launches - Easily customizable in PowerPoint or Google Slides - High-resolution visuals and smooth gradients 📦 Format: - PPTX / Google Slides compatible - 16:9 widescreen - Fully editable text, charts, and visuals

project_based_laaaaaaaaaaearning,kelompok 10.pptxredzuriel13

Reliable Vancouver Web Hosting with Local Servers & 24/7 Supportsteve198109

Looking for powerful and affordable web hosting in Vancouver? 4GoodHosting offers premium Canadian web hosting solutions designed specifically for individuals, startups, and businesses across British Columbia. With local data centers in Vancouver and Toronto, we ensure blazing-fast website speeds, superior uptime, and enhanced data privacy—all critical for your business success in today’s competitive digital landscape. Our Vancouver web hosting plans are packed with value—starting as low as $2.95/month—and include secure cPanel management, free domain transfer, one-click WordPress installs, and robust email support with anti-spam protection. Whether you're hosting a personal blog, business website, or eCommerce store, our scalable cloud hosting packages are built to grow with you. Enjoy enterprise-grade features like daily backups, DDoS protection, free SSL certificates, and unlimited bandwidth on select plans. Plus, our expert Canadian support team is available 24/7 to help you every step of the way. At 4GoodHosting, we understand the needs of local Vancouver businesses. That’s why we focus on speed, security, and service—all hosted on Canadian soil. Start your online journey today with a reliable hosting partner trusted by thousands across Canada.

Mobile database for your company telemarketing or sms marketing campaigns. Fr...DataProvider1

(Hosting PHising Sites) for Cryptography and network securityaluacharya169

5-Proses-proses Akuisisi Citra Digital.pptxandani26

IT Services Workflow From Request to Resolutionmzmziiskd

Perguntas dos animais - Slides ilustrados de múltipla escolhasocaslev

Computers Networks Computers Networks Computers NetworksTito208863

DNS Resolvers and Nameservers (in New Zealand)APNIC

Understanding the Tor Network and Exploring the Deep Webnabilajabin35

Top Vancouver Green Business Ideas for 2025 Powered by 4GoodHostingsteve198109

Best web hosting Vancouver 2025 for you businesssteve198109

highend-srxseries-services-gateways-customer-presentation.pptxelhadjcheikhdiop

OSI TCP IP Protocol Layers description fcbr49917

White and Red Clean Car Business Pitch Presentation.pptxcanumatown

APNIC -Policy Development Process, presented at Local APIGA Taiwan 2025APNIC

APNIC Update, presented at NZNOG 2025 by Terry SweetserAPNIC

Determining Glass is mechanical textileAzizul Hakim

Smart Mobile App Pitch Deck丨AI Travel App Presentation Templateyojeari421237

project_based_laaaaaaaaaaearning,kelompok 10.pptxredzuriel13

Reliable Vancouver Web Hosting with Local Servers & 24/7 Supportsteve198109

Mobile database for your company telemarketing or sms marketing campaigns. Fr...DataProvider1

React Native

1. React Native for Android 廖祜秋

5. Thanks.

7. Not only for Android.

8. Let’s start again.

9. React Native 廖祜秋

10. A month ago …

11. Survey • Node.js / NPM • JavaScript • React Native • React

12. Content • React && React Native • Thinking • Performance • JavaScript • Deep into React Native • Quick Start • Hot Deployment • Why React Native

13. JavaScript Environment • JSC: iOS simulators and devices • V8: Chrome debugging / Debug Server • JSC: Android emulators and devices

14. ES6

15. JSX Synax • Looks similar to XML • A JavaScript syntax extension • NOT a part of the ECMAScript spec

16. JSX Synax https://facebook.github.io/jsx/

17. Node.js / NPM Full stack development

18. React • Declarative • Virtual DOM • Simple: state / render

19. Render • Data changed: setState() • Initialized: getIinitialState()

20. JavaScript & React

21. React Native

22. Quick Start

23. Quick Start

24. Debug Server

25. Run Demo • Android … • iOS: open project in Xcode, then run

26. Run Demo for Android • devices: 5.0 above, adb reverse port • simulators • devices: set Debug server

27. Deliver Package • Android: gradle plugin • iOS / Android: react-native bundle(since 0.12.0)

28. Examples

29. Why React Native

30. Why React Native • Acceptable performance • Native look and feel • Code reuse • Fast development • Fast deployment (Still some way to go for Android)

31. Deep into React Native

32. Deep into React Native • JavaScriptModule • ReactBridge • NativeModule • Native UI Components

33. ReactBridge

34. ReactBridge • callFunction(int moduleId, int methodId, NativeArray arguments) • setGlobalVariable(String propertyName, String data)

35. Module tables • NativeModule • JavaScriptModule

36. JavaScriptModule

37. NativeModule

38. NativeModule

39. Module tables • From JS to Native: MessageQueue • From Native to JS • Send touch event to JS, JS process UI

40. Reuse of current code • Module • UI

41. Hot Deployment

42. Update React Native apps, instantly. Only for iOS currently.

43. Android ?

44. Performance

46. A compelling reason for using React Native instead of WebView-based tools is to achieve 60 FPS and a native look & feel to your apps. Performance

47. Sources of performance problems.

48. Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time

49. • Development mode (dev=true) • Slow navigator transitions • ListView initial rendering is too slow or scroll performance is bad for large lists

50. Considerations • Test on both platforms • Prone to human error • Inevitable consequence

51. Working across separate iOS and Android code repositories is difficult. Even with lots of tools and automation. Code repositories

52. What do we have?

53. WeApp

54. WeApp • CSS • iOS and Android implementation • Testing

55. What we learn?

56. Shipped native app on two platforms, with native look and feel. What we learn

57. 3 -> 7 What we learn

58. Not all of the engineers were familiar with React when they joined the team. Yet they built an iOS app with native look and feel in just five months. What we learn

59. And after an additional three months, we released the Android version of the app. What we learn

60. What we learn • Product engineer: full stack • Creativity • Smart and hard working

61. Q & A

62. What we learn

63. 廖祜秋liaohuqiu_秋百万 Q & A

React Native

Recommended

More Related Content

What's hot (20)

Similar to React Native (20)

Recently uploaded (19)

React Native