React Native Crash Course

Given by the writer of “React Native – writing moble apps with Javascript”, this 50-minute crash course will give you the full flavor of React Native. Join Vlad Novick for a comprehensive overview of React Native, including its underlying mechanisms. You will see the full scope of its capabilities, understand best practices in meeting today’s challenges, what benefits and tooling it brings to mobile development and why more and more businesses are considering React Native when creating production grade best seller apps.

Transcript

1. v n o v i c k . c o m React Native C rash Course
2. v n o v i c k . c o m Vladimir Novick S o f t w a r e A r c h i t e c t & C o n s u l t a n t Web, Mobile, Virtual Reality, Augmented Reality, Mixed Reality & Internet of Things @VladimirNovick
3. v n o v i c k . c o m https:/ /goo.gl/mYiVmF React Native build mobile apps with JavaScript w Your go-to guide to creating native iOS and Android mobile applications using React and JavaScript
4. v n o v i c k . c o m Agenda ! What is React NaCve and why it’s different How React NaCve changes developer experience ! React NaCve under the hood and how it works ! GeJng started with React NaCve ! Styling React NaCve apps ! NavigaCon ! AnimaCons ! ! Networking PlaMorm APIs ! WriCng naCve code ! Deployment !
5. v n o v i c k . c o m Assumptions ! You are familiar with JavaScript and Web development You’ve at least heard about ReactJS library ! You are interested to learn React NaCve !
6. v n o v i c k . c o m Developer Experience E x p e r i e n c e d e v e l o p e r i s g o i n g t h r o u g h w h i l e d e v e l o p i n g
7. v n o v i c k . c o m DX in modern Web ! Hot reload / live reload Crome dev tools ! Instant visual feedback ! Remote code updates ! InspecCng app structure ! InspecCng network traffic ! Flexbox layout styling !
8. v n o v i c k . c o m DX in modern Web
9. v n o v i c k . c o m $188 billion US $ by 2020 Worldwide mobile apps revenues 0 50 100 150 200 2015 2016 2020 69.7 88.3 188.9 Billions of US $ World of mobile apps
10. v n o v i c k . c o m A little bit of history 2011 Facebook developed and started using ReactJS March 2013 ReactJS public release Summer 2013 React Native started as Facebook internal Hackathon 2015 React Native public release 2017 React Native is popular and powers lots of bestseller apps H o w R e a c t N a t i v e w a s b o r n
11. v n o v i c k . c o m What is ReactJS Declara?ve Component Based Learn once A J a v a S c r i p t l i b r a r y f o r b u i l d i n g u s e r i n t e r f a c e s
12. v n o v i c k . c o m React can run anywhere ! Browser Physical devices (react-iot) ! Mobile (React NaCve) ! Desktop ! ! VR (React VR) ! Server ! Other
13. v n o v i c k . c o m JSX
14. v n o v i c k . c o m Virtual DOM
15. v n o v i c k . c o m The ecosystem ! Npm (Node package manager) community packages Flux architecture (Redux/MobX/MST) ! ! Webpack (bundling, hot module reload, transpilaCon) Modern JavaScript (ES6/7/next) !
16. v n o v i c k . c o m The idea of React Native “React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.”
17. v n o v i c k . c o m Motivation ! Code reuse between various plaMorms Android/iOS/Web DeclaraCve and more funcConal programming style ! SCcking to the same ecosystem as on web ! Styling using modern CSS techniques in mobile world ! ! Smaller dev team is able to handle both Android and iOS
18. v n o v i c k . c o m Architecture
19. v n o v i c k . c o m Threading model ! Main Thread - layout, measuring, drawing Shadow thread - calculates layout changes ! ! JS thread - event loop execuCng js code and sending batched updates before next frame renders (60fps) NaCve modules threads - plaMorm apis !
20. v n o v i c k . c o m Execution flow Start Main Thread JS thread Shadow thread Na?ve Modules Layout React Render JS Startup Native Code
21. v n o v i c k . c o m Getting started
22. v n o v i c k . c o m Getting started CRNA " Good for a start, no need for iOS, Android dependencies RN CLI # When you want to integrate with exisCng app, want to write NaCve code
23. v n o v i c k . c o m RN CLI
24. v n o v i c k . c o m Project lifecycle React Native CLI React Native App JS Code JS Packager c r e a t e s i n s t a l l e d o n t o f e d i n t o f e d i n t o S i m u l a t o r o n l o c a l m a c h i n e
25. v n o v i c k . c o m CRNA B u i l t w i t h E x p o n e n t
26. v n o v i c k . c o m Exponent ! Built on top of React NaCve ! Desktop XDE ! AddiConal NaCve APIs ! Mobile Client ! Expo Snack playground heps:/ /snack.expo.io/
27. v n o v i c k . c o m Expo snack
28. v n o v i c k . c o m XDE ! Share your project in Expo Client app ! Develop on device without addiConal setup ! Manages react naCve packager processes ! AddiConal logging ! Publishing e x p o . i o / t o o l s
29. v n o v i c k . c o m CRNA vs Expo Can be ejected to vanilla React NaCve Can be ejected to React NaCve + Expokit
30. v n o v i c k . c o m Running your app CRNA " XDE RN CLI #
31. v n o v i c k . c o m Folder structure
32. v n o v i c k . c o m CRNA
33. v n o v i c k . c o m react-native-cli
34. v n o v i c k . c o m Code overview i n d e x . j s A p p . j s
35. v n o v i c k . c o m React Native DX
36. v n o v i c k . c o m
37. v n o v i c k . c o m Yoga Yoga is a cross-platform layout engine enabling maximum collaboration within your team by implementing an API familiar to many designers and opening it up to developers across different platforms. ! Do you know Flexbox? Then you know Yoga Styling your app looks like CSS ! ! Supports Java, C#, ObjecCve-C, C
38. v n o v i c k . c o m Navigation ! reactnavigaCon.org - If you start from scratch. Considered as standard and is advised in React NaCve docs ! airbnb.io/naCve-navigaCon - If you integrate React NaCve in exisCng app
39. v n o v i c k . c o m react-navigation
40. v n o v i c k . c o m Animations
41. v n o v i c k . c o m Layout Anima?on " Animated " Applied to all style properCes of component No need for specific values (heights/ widths) ! ! ! Less configurable ! Animates everything on next render Extremely configurable Can target specific components ! ! Uses requestAnimaConFrame by default For complex computaCon animaCons can stueer ! ! C o n s P r o s
42. v n o v i c k . c o m A n i m a t e d L a y o u t A n i m a t i o
43. v n o v i c k . c o m Layout Anima?on " Animated "
44. v n o v i c k . c o m F e t c h Fetch API Networking X H R W S XmlHttpRequest Web Sockets
45. v n o v i c k . c o m Platform APIs AccessibilityInfo, ActionSheetIOS, AdSupportIOS, Alert, AlertIOS, Animated, AppRegistry, AppState, AsyncStorage, BackAndroid, BackHandler, CameraRoll, Clipboard, DatePickerAndroid, Dimensions, Easing, Geolocation, ImageEditor, ImagePickerIOS, ImageStore, InteractionManager, Keyboard, LayoutAnimation, Linking, NativeMethodsMixin, NetInfo, PanResponder, PermissionsAndroid, PixelRatio, PushNotificationIOS, Settings, Share, StatusBarIOS, StyleSheet, Systrace, TimePickerAndroid, ToastAndroid, Vibration, VibrationIOS, Layout Props, Shadow Props
46. v n o v i c k . c o m Expo SDK APIs Accelerometer, Amplitude, AppLoading, Art, Asset, Audio, AV, BarCodeScanner, BlurView, Branch, Constants, Contacts, DocumentPicker, ErrorRecovery, Facebook, FacebookAds, Font, GLView, Google, Gyroscope, ImagePicker, KeepAwake, LinearGradient, Location, MapView, Notifications, Pedometer, Permissions, Segment, SQLite, Svg, takeSnapshotAsync, Util, Video, WebBrowser
47. v n o v i c k . c o m Dealing with native modules linking packages with native modules
48. v n o v i c k . c o m Writing your own native modules Objective-C
49. v n o v i c k . c o m Java ! Create the module by creaCng class that extends ReactContextBaseJavaModule Override createNaCveModules method ! Create class that implements ReactPackage ! ! Expose methods to JS using @ReactMethod
50. v n o v i c k . c o m N a t i v e m o d u l e C u s t o m p a c k a g e
51. v n o v i c k . c o m JS side
52. v n o v i c k . c o m Create a bundle Regular pre deploy pipeline Upload to store Create a bundle Create a bundle with production settings meaning it won’t have and dev tools and will be optimized for prod Upload to store By using tools like CodePush you will be able to change your JS bundle without uploading again Regular pre deploy pipeline Screenshots, Icons, certificates - the regular staff. Do it manually or use FastLane Deployment
53. v n o v i c k . c o m Contact me for consultation vnovick.com Thank you