R E A C T N AT I V E

J A N VÁ C L AV Í K D A N R Y S

A N D H O W D I D W E G E T T H E R E

4 / 4 / 2 0 1 6

A B O U T U S

- Known each other since 7

- Studied Czech Technical University in Prague

- Mobile developers in

- Digital nomads sometimes

- Taught Ionic 1, 2, React Native on CodeCamp.cz

J A N D A N

A N D R O I D I O S AV E N U E I O N I C 1 I O N I C 2 R N2 0 1 2 2 0 1 4 2 0 1 5 2 0 1 5 2 0 1 6 2 0 1 6

T R I E D O U T A L O T

S T O N E A G E2 0 1 2 – 2 0 1 4

N AT I V E D E V E L O P M E N T

N AT I V E D E V E L O P M E N T

- Native experience

- One app developed two or more times

- Different skill sets, programming languages

- High costs

N AT I V E D E V E L O P M E N T

O U R E X P E R I E N C E W I T H N AT I V E

- Android and iOS university courses

- Android 2.3

- No Android studio (Eclipse)

- no Swift (Obj-C)

D A R K A G E2 0 1 5

AV E N U E

A V E N U E

- Internal multiplatform framework in

- One codebase, but painful development

- Web technologies (jQuery, Backbone, Underscore,…)

- Cordova based

- Hydra code

A V E N U E C O D E

This doesn’t even look like a code!

This doesn’t even look like a code!

BUT STILL BETTER THAN OBJECTIVE-C

O B J E C T I V E – C

CHEAT SHEET: How to read a method in Objective-C

A V E N U E E X A M P L E

A N C I E N T H I S T O R Y2 0 1 5 – 2 0 1 6

I O N I C 1

I O N I C 1

- Missing piece of Cordova

- Super fast for prototyping

- UI elements are not native

- Problems with native components

- Performance on Android

- Angular 1

OBJEVTE VÍCEBUBBLEOLOGY

M I D D L E A G E S2 0 1 6

I O N I C 2

I O N I C 2

- Component oriented (like RN)

- Add Electron support, Android Material, Windows UI

- Improved structure and Navigation

- Long waiting for stable version, breaking changes

- Painful debugging

- Performance limitations

I O N I C 2 S H O W C A S E

I O S A N D R O I D W U P( U N F O R T U N AT E LY D E A D )

M O D E R N T I M E S2 0 1 6 A N D L AT E R

R E A C T N AT I V E

R E A C T N AT I V E

https://speakerdeck.com/felipecsl/react-native-at-airbnb

R E A C T N AT I V E

- Native experience

- Multi-platform

- iOS, Android (WUP, Desktop, web)

- Used by AirBNB, Facebook, Instagram, Vogue

- Functional programming

- Easy to debug

- Huge community (+/-)

H U G E C O M M U N I T Y

- You have to choose components wisely

- Find components on JS.coach

- Choose by stars, issues, docs, demos, PR

- No complete UI framework like Ionic

- Nachos UI kit

- Native Base

- Material Kit

- Lot of interesting libraries

- Lottie, Airbnb Maps

E X A M P L E S A I R B N B M A P S

E X A M P L E S L O T T I E

M O R E S O U R C E S T O S E E

- Articles:

- The Cost of Native Mobile App Development is Too Damn High (http://bit.ly/2hWbwyl)

- ReactJS x React Native http://bit.ly/2oywqGg

- RN @ Instagram (http://bit.ly/2oVmkf4)

- iOS dev toolset (http://bit.ly/2oEOc86)

- Newsletter: React Native Newsletter (http://reactnative.cc)

- Platform: Expo (https://expo.io)

- Stack: Ignite (https://github.com/infinitered/ignite)

- Presentation: RN @ Airbnb (http://bit.ly/2oxEzek)

H O P P Y C A R

- Car sharing in the Czech Republic and Germany

- Early app version on the stores

- ~90 % Android/iOS code sharing

- Stack: Ignite framework, Redux, Redux Observable, Axios, Ramda,…

- CI/CD: Fastlane, Bitrise, Hockeyapp

5 0 + S C R E E N S

H C S C R E E N S H O T S

H C S C R E E N S H O T S

N O T F O R E V E R Y O N E …

QUEST I ONS?

@danielrys

linkedin.com/in/rysdaniel

@janvaclavik

www.janvaclavik.cz

linkedin.com/in/janvaclavik

T H A N K S