SlideShare a Scribd company logo

Experiences building apps with React Native @DomCode 2016

Adrian Philipp
Adrian Philipp

The document discusses React Native, a framework that allows web developers to create mobile apps for various platforms using familiar tools and concepts. It emphasizes productivity through tooling and provides various resources and tricks for effective development, including styling and layout models. While it is not yet fully mature, React Native is gaining popularity with frequent updates and a growing community.

Technology
1 of 30
Downloaded 13 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
REACT NATIVE DomCode, November 2016, Adrian Philipp
1. Web developers can make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
Guess the Liiper iOS app https://github.com/liip/guess-the-liiper-ios
QAPP Question and Answer iOS app - beta Developed at
• Made by Facebook, efficiency across platforms • “Learn once, write anywhere” vs “cross platform” • Platforms: iOS, Android, Windows, macOS, tvOS • High traction: 39.8k stars, releases every 2-3 weeks • Not mature yet REACT NATIVE
UI Explorer React Native Example See README on github how to build and run the app
• Easy way for web developers to get started on mobile REACT NATIVE
• Easy way for web developers to get started on mobile • Styling is similar to CSS REACT NATIVE
• Easy way for web developers to get started on mobile • Styling is similar to CSS • Flexbox layout model REACT NATIVE
• Easy way for web developers to get started on mobile • Styling is similar to CSS • Flexbox layout model • Feels like React (web) REACT NATIVE
Product Pains But production ready NOT MATURE
Show me code… hackernews search app made by algolia REACT NATIVE
BASICS
CODE
APP
CODE
1. Web developers can make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
• Inspector • Hot reloading • Profiling using systrace • Debugger • Editor integration TOOLING
INSPECTOR
HOT RELOADING
PROFILING
DEBUGGER
EDITOR INTEGRATION • WebStorm/PHPStorm: JS/JSX/ES6 support • Microsoft VSCode, Nuclide • Clickable stack trace:
 REACT_EDITOR=pstorm npm start
EDITOR INTEGRATION
ANDROID
1. Web developers can make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
• Learn how mobile platforms work and look • Split smart and dumb components from the start • Use redux when the app gets more complex PLATFORM / ARCHITECTURE
• Components: JS.coach • React Native Playground rnplay • ESLint style from airbnb • NPM script to build "build-ios": "react-native bundle --platform=ios -- entry-file=index.ios.js --bundle-output=ios/ main.jsbundle --assets-dest=ios/assets --dev false", DEV TRICKS
1. Web developers can make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
Twitter: @adrian_philipp Github: adri Website: adrian-philipp.com Mail: mail@adrian-philipp.com Joind.in: https://legacy.joind.in/19687 THANK YOU

More Related Content

What's hot (20)

PDF
Putting the Native in React Native - React Native Boston
stan229
 
PDF
When to (use / not use) React Native.
Bobby Schultz
 
PPTX
SONY BBS - React Native
Mehmet Ali Bağcı
 
PDF
React Native in a nutshell
Brainhub
 
PDF
Lo mejor y peor de React Native @ValenciaJS
Marcel Kalveram
 
PPTX
React Native Intro
Julia Vi
 
PDF
React native
Omid Nikrah
 
PDF
Going Native With React
Eric Nograles
 
PDF
React-Native for multi-platform mobile applications @ Codemotion Rome 2017
Matteo Manchi
 
PDF
React Native for multi-platform mobile applications - Matteo Manchi - Codemo...
Codemotion
 
PDF
What's This React Native Thing I Keep Hearing About?
Evan Stone
 
PDF
A tour of React Native
Tadeu Zagallo
 
PPTX
Introduction to React Native
Waqqas Jabbar
 
PDF
Introduction to react native
Dani Akash
 
PDF
Power of React Native
Murugan Durai
 
PPTX
Hands on react native
Jay Nagar
 
PDF
React Native "A Bad Idea Or A Game Changer" at Code Mania 101
Ranatchai Chernbamrung
 
PDF
Introduction to React Native & Rendering Charts / Graphs
Rahat Khanna a.k.a mAppMechanic
 
PDF
React native in the wild @ Codemotion 2016 in Rome
Alessandro Nadalin
 
PPTX
Nativescript with angular 2
Christoffer Noring
 
Putting the Native in React Native - React Native Boston
stan229
 
When to (use / not use) React Native.
Bobby Schultz
 
SONY BBS - React Native
Mehmet Ali Bağcı
 
React Native in a nutshell
Brainhub
 
Lo mejor y peor de React Native @ValenciaJS
Marcel Kalveram
 
React Native Intro
Julia Vi
 
React native
Omid Nikrah
 
Going Native With React
Eric Nograles
 
React-Native for multi-platform mobile applications @ Codemotion Rome 2017
Matteo Manchi
 
React Native for multi-platform mobile applications - Matteo Manchi - Codemo...
Codemotion
 
What's This React Native Thing I Keep Hearing About?
Evan Stone
 
A tour of React Native
Tadeu Zagallo
 
Introduction to React Native
Waqqas Jabbar
 
Introduction to react native
Dani Akash
 
Power of React Native
Murugan Durai
 
Hands on react native
Jay Nagar
 
React Native "A Bad Idea Or A Game Changer" at Code Mania 101
Ranatchai Chernbamrung
 
Introduction to React Native & Rendering Charts / Graphs
Rahat Khanna a.k.a mAppMechanic
 
React native in the wild @ Codemotion 2016 in Rome
Alessandro Nadalin
 
Nativescript with angular 2
Christoffer Noring
 

Similar to Experiences building apps with React Native @DomCode 2016 (20)

PDF
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
GreeceJS
 
PPTX
React Native - Build Native Mobile App
Mobio Solutions
 
PDF
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
Kobkrit Viriyayudhakorn
 
PDF
l1-reactnativeintroduction-160816150540.pdf
Hương Trà Pé Xjnk
 
PDF
Mobile application development React Native - Tidepool Labs
Harutyun Abgaryan
 
PPTX
Session 01_02-Introduction to React Native .pptx
VHiu94
 
PDF
Build a real app with react native
John Pham
 
PPTX
9 reasons why programmers should learn react native
React Sharing
 
PDF
An Introduction to ReactNative
Michał Taberski
 
PDF
React Native App Development: A Comprehensive Guide
Lucy Zeniffer
 
PPTX
Getting Started With React Native Presntation
Knoldus Inc.
 
PDF
Introduction to React Native
Polidea
 
PDF
"Building Cross-platform Without Sacrificing Performance" by Simon Sturmer (K...
Tech in Asia ID
 
PPTX
React Native.pptx (2)
Emilio Rodriguez Martinez
 
PDF
Learning React Native Building Native Mobile Apps with JavaScript 2nd Edition...
oquinberin6r
 
PDF
Learning React Native Building Native Mobile Apps with JavaScript 2nd Edition...
vbjchnqpsx191
 
PPTX
React native
Vikrant Negi
 
PDF
The Gist of React Native
Darren Cruse
 
PPTX
React Native And Its Ecosystem Presentation
Raduelico
 
PDF
A Complete Guide On React Native App Development.pdf
WDP Technologies
 
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
GreeceJS
 
React Native - Build Native Mobile App
Mobio Solutions
 
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
Kobkrit Viriyayudhakorn
 
l1-reactnativeintroduction-160816150540.pdf
Hương Trà Pé Xjnk
 
Mobile application development React Native - Tidepool Labs
Harutyun Abgaryan
 
Session 01_02-Introduction to React Native .pptx
VHiu94
 
Build a real app with react native
John Pham
 
9 reasons why programmers should learn react native
React Sharing
 
An Introduction to ReactNative
Michał Taberski
 
React Native App Development: A Comprehensive Guide
Lucy Zeniffer
 
Getting Started With React Native Presntation
Knoldus Inc.
 
Introduction to React Native
Polidea
 
"Building Cross-platform Without Sacrificing Performance" by Simon Sturmer (K...
Tech in Asia ID
 
React Native.pptx (2)
Emilio Rodriguez Martinez
 
Learning React Native Building Native Mobile Apps with JavaScript 2nd Edition...
oquinberin6r
 
Learning React Native Building Native Mobile Apps with JavaScript 2nd Edition...
vbjchnqpsx191
 
React native
Vikrant Negi
 
The Gist of React Native
Darren Cruse
 
React Native And Its Ecosystem Presentation
Raduelico
 
A Complete Guide On React Native App Development.pdf
WDP Technologies
 
Ad

Recently uploaded (20)

PDF
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
PPTX
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
PDF
Staying Human in a Machine- Accelerated World
Catalin Jora
 
PDF
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
PDF
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
PDF
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
PPTX
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
PPTX
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
PPTX
Digital Circuits, important subject in CS
contactparinay1
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
PPTX
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
DOCX
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
PDF
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
PPTX
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
PDF
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PPT
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PDF
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
PDF
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
Staying Human in a Machine- Accelerated World
Catalin Jora
 
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
AI Agents in the Cloud: The Rise of Agentic Cloud Architecture
Lilly Gracia
 
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
Digital Circuits, important subject in CS
contactparinay1
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
Ericsson LTE presentation SEMINAR 2010.ppt
npat3
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
Ad

Experiences building apps with React Native @DomCode 2016

  • 1. REACT NATIVE DomCode, November 2016, Adrian Philipp
  • 2. 1. Web developers can make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
  • 3. Guess the Liiper iOS app https://github.com/liip/guess-the-liiper-ios
  • 4. QAPP Question and Answer iOS app - beta Developed at
  • 5. • Made by Facebook, efficiency across platforms • “Learn once, write anywhere” vs “cross platform” • Platforms: iOS, Android, Windows, macOS, tvOS • High traction: 39.8k stars, releases every 2-3 weeks • Not mature yet REACT NATIVE
  • 6. UI Explorer React Native Example See README on github how to build and run the app
  • 7. • Easy way for web developers to get started on mobile REACT NATIVE
  • 8. • Easy way for web developers to get started on mobile • Styling is similar to CSS REACT NATIVE
  • 9. • Easy way for web developers to get started on mobile • Styling is similar to CSS • Flexbox layout model REACT NATIVE
  • 10. • Easy way for web developers to get started on mobile • Styling is similar to CSS • Flexbox layout model • Feels like React (web) REACT NATIVE
  • 11. Product Pains But production ready NOT MATURE
  • 12. Show me code… hackernews search app made by algolia REACT NATIVE
  • 14. CODE
  • 15. APP
  • 16. CODE
  • 17. 1. Web developers can make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
  • 18. • Inspector • Hot reloading • Profiling using systrace • Debugger • Editor integration TOOLING
  • 23. EDITOR INTEGRATION • WebStorm/PHPStorm: JS/JSX/ES6 support • Microsoft VSCode, Nuclide • Clickable stack trace:
 REACT_EDITOR=pstorm npm start
  • 26. 1. Web developers can make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
  • 27. • Learn how mobile platforms work and look • Split smart and dumb components from the start • Use redux when the app gets more complex PLATFORM / ARCHITECTURE
  • 28. • Components: JS.coach • React Native Playground rnplay • ESLint style from airbnb • NPM script to build "build-ios": "react-native bundle --platform=ios -- entry-file=index.ios.js --bundle-output=ios/ main.jsbundle --assets-dest=ios/assets --dev false", DEV TRICKS
  • 29. 1. Web developers can make apps 2. Know and use tooling to be more productive 3. Learn platform concepts and dev tricks REACT NATIVE
  • 30. Twitter: @adrian_philipp Github: adri Website: adrian-philipp.com Mail: [email protected] Joind.in: https://legacy.joind.in/19687 THANK YOU