An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End Developer at Orfium)
1 like•700 views
The document provides an overview of React Native, highlighting its features, essential tools, and APIs for developing native mobile applications using JavaScript. It covers examples of code implementation, debugging tools, and potential challenges developers may face, such as module stability and performance issues. Additionally, it touches on alternatives to React Native and concludes with key considerations for developers before choosing to work with React Native or Expo.
![#RNISAWESOME
import React from 'react';
const data = {[
{id: '11', key: 'Devin'},
{id: '12', key: 'Jackson'},
{id: '13', key: 'James'},
{id: '14', key: 'Joel'},
]}
const Rankings = () => (
<ul>
{data.map(({ key, id }) => (
<li key={id}>{key}</span>
)}
</ul>
);
export default Rankings;
import React from 'react';
import { Text, View, FlatList } from ΄react-native΄;
const Rankings = () => (
<View>
<FlatList
data={[
{id: '11', key: 'Devin'},
{id: '12', key: 'Jackson'},
{id: '13', key: ‘James'},
]}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <Text>{item.key}
</Text>}
/>
</View>
);
export default Rankings;
LIST](https://image.slidesharecdn.com/react-native-presentation-190212150825/85/An-Emoji-Introduction-to-React-Native-Panagiotis-Vourtsis-Senior-Front-End-Developer-at-Orfium-14-320.jpg)
An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End Developer at Orfium)
- 1. Panagiotis Vourtsis Front-End Developer @orfium AN EMOJI INTRO TO REACT NATIVE
- 2. #RNISAWESOME WHAT I WILL TRY TO COVER ▸ What is RN anyway? ▸ RN API ▸ Examples ▸ Daily tools ▸ Native Modules ▸ Other alternatives
- 5. #RNISAWESOME NATIVE APPS ? REALLY ?? ▸ Faster ▸ Responsive ▸ Complex gestures ▸ Mobile functionalities usage ▸ Different market for users but how to stay up with the scale etc?
- 6. WHAT IS RN ANYWAY?
- 7. #RNISAWESOME REACT AND REACT NATIVE ReactJS is a JavaScript library where you can use it to build user interfaces for the web either standalone or being served from a server. What you will need? ‣ A bundler - Webpack setup ‣ Testing environment ‣ jest maybe ‣ enzyme maybe ‣ …etc
- 8. #RNISAWESOME REACT AND REACT NATIVE React Native is a mobile framework that uses ReactJS and compiles to native app components. This way it allowing you to build native mobile applications for different platforms (iOS, Android, and Windows Mobile) in JavaScript. In order to do so you will may need Xcode or Android Studio It comes out of the box with: ‣ packager (bundler) called metro ‣ jest environment for testing ‣ flow for typing
- 10. SOME EXAMPLES
- 11. #RNISAWESOME import React from 'react'; const Welcome = () => ( <div> Welcome GreeceJS </div> ); export default Welcome; import React from 'react'; import { Text, View } from ΄react-native΄; const Welcome = () => ( <View> <Text>Welcome GreeceJS </Text> </View> ); export default Welcome; SIMPLE TRANSFORMATION
- 12. #RNISAWESOME import React from 'react'; const Welcome = () => ( <div> <span>Welcome GreeceJS </span> <span style={{ marginTop: 100 }}> Hey i am right here! </span> </div> ); export default Welcome; import React from 'react'; import { Text, ScrollView } from ΄react- native΄; const Welcome = () => ( <ScrollView> <Text>Welcome GreeceJS </Text> <Text style={{ marginTop: 100 }}> Hey i am right here !! </Text> </ScrollView> ); export default Welcome; SCROLL CONTENT
- 14. #RNISAWESOME import React from 'react'; const data = {[ {id: '11', key: 'Devin'}, {id: '12', key: 'Jackson'}, {id: '13', key: 'James'}, {id: '14', key: 'Joel'}, ]} const Rankings = () => ( <ul> {data.map(({ key, id }) => ( <li key={id}>{key}</span> )} </ul> ); export default Rankings; import React from 'react'; import { Text, View, FlatList } from ΄react-native΄; const Rankings = () => ( <View> <FlatList data={[ {id: '11', key: 'Devin'}, {id: '12', key: 'Jackson'}, {id: '13', key: ‘James'}, ]} keyExtractor={(item) => item.id} renderItem={({ item }) => <Text>{item.key} </Text>} /> </View> ); export default Rankings; LIST
- 16. #RNISAWESOME { container: { width: 100%; position: relative; margin-top: 10px; } } StyleSheet.create({ container: { width: ‘100%’, position: ‘relative’, marginTop: 10 } }) STYLING
- 17. Native App MAIN THREAD JAVASCRIPT BRIDGE - NATIVE MODULES API ASYNC BATCHED SERIALISABLE SYNC
- 18. %Memorypercore 0 15 30 45 60 PROFILE TO DO LIST PAGE VIEW MAPS 56,02% 24,29% 44,2% 26,52% 42,34% 18% 45,73% 28,38% Swift RN CPU USAGE
- 19. #RNISAWESOME DAILY TOOLS This is the regular hot reload of react, on every change you can see the changes on your simulator HOT RELOADING Reloads the app on every change LIVE RELOAD DEBUGGING - PERFORMANCE Enables the debugging inspector REMOTE JS DEBUGGING Shows the frames per screen in order to see which screens underperform SHOW PERF MONITOR
- 20. #RNISAWESOME DAILY TOOLS RN debugging tools ‣ react-devtools (npm) ‣ react-native debugger (redux) de- ‣ Inspect network requests like in web ‣ Redux inspect for state ‣ React profiling
- 21. #RNISAWESOME REACT NATIVE CHALLENGES Not very stable modules, event official ones (react-navigation) iOS / android behave differently in some cases Although is react doesn’t behave like a web app Need to understand native renders differently Keep in mind of performance when dealing with lists Dealing with emulators vs physical devices Error logging for production is often difficult to debug
- 22. #RNISAWESOME REACT NATIVE PROS & CONS ✓ Hot reloading ✓ Multiple platforms ✓ Faster build for smaller apps ✓ On the fly JS Bundle ✓ Bigger pool of devs - Lack of modules - Native developers still needed - Immaturity on tools
- 23. #RNISAWESOME CURRENTLY Facebook FB Ads Skype Discord Pinterest WalmartInstagramFB Analytics TURNED AWAY Udacity Airbnb REACT NATIVE APPS
- 24. WHAT IF THERE ARE NO READY MODULES ??
- 25. NATIVE MODULES
- 27. #RNISAWESOME public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new MeetupPackage() ); } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } }
- 28. #RNISAWESOME public class JSMeetupPackage implements ReactPackage { @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { List<NativeModule> modules = new ArrayList<>(); modules.add(new JSMeetupModule(reactContext)); return modules; } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { List<ViewManager> modules = new ArrayList<>(); modules.add(new JSMeetupViewManager(reactContext)); return modules; // if we have a view else return Collections.emptyList(); } }
- 29. #RNISAWESOME class JSMeetupModule extends ReactContextBaseJavaModule { private static String mPremium = ""; public JSMeetupModule(ReactApplicationContext reactContext) { super(reactContext); ... } @Override public String getName() { return "JSMeetup"; } @ReactMethod public void setPremium(String premium) { mPremium = premium; } }
- 31. #RNISAWESOME class JSMeetupReactView extends Component { setPremium(str) { NativeModules.JSMeetup.setPremium(str); } render() { return <JSMeetupView {...this.props} ref="JSMeetupReactView" />; }; } const JSMeetupView = requireNativeComponent( 'JSMeetupView', JSMeetupReactView, { nativeOnly: { onChange: true } } ); module.exports = JSMeetupReactView;
- 32. #RNISAWESOME public class JSMeetupViewManager extends SimpleViewManager<JSMeetupView> { private JSMeetupView view; public JSMeetupViewManager(ReactApplicationContext reactContext) { view = new JSMeetupView(reactContext); } … @ReactProp(name = "inputUrl") public void setInputUrl(JSMeetupView view, @Nullable String inputUrl) { view.setInputUrl(inputUrl); } @Override public void receiveCommand(JSMeetupView root, int commandId, @Nullable ReadableArray args) { switch (commandId) { case "blah": root.blah(); break; } } }
- 33. #RNISAWESOME public class JSMeetupView extends AnyComponent implements LifecycleEventListener { public JSMeetupView(ReactApplicationContext context) { super(context); context.addLifecycleEventListener(this); } public void setInputUrl(String inputUrl) { ... } public void blah() { ... } }
- 35. #RNISAWESOME class JSMeetupReactView extends Component { setPremium(str) { NativeModules.JSMeetup.setPremium(str); } setInputUrl(url) { NativeModules.JSMeetup.setInputUrl(url); } blah() { UIManager.dispatchViewManagerCommand( findNodeHandle(this.refs.JSMeetupReactView), UIManager.JSMeetupView.Commands.blah, null ); } render() { return <JSMeetupView {...this.props} ref="JSMeetupReactView" />; }; } const JSMeetupView = requireNativeComponent( 'JSMeetupView', JSMeetupReactView, { nativeOnly: { onChange: true } } ); module.exports = JSMeetupReactView;
- 36. EXPO VS RN INIT
- 37. #RNISAWESOME Expo is the easiest way to start building a new React Native application. It allows to start a project without installing or configuring any tools to build native code
- 38. #RNISAWESOME EXPONENTRN INIT ios/ android/ index.js App.js index.js App.js it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app
- 39. #RNISAWESOME ▸ Will I need access to the Native portion of the codebase? ▸ Will I need any third party packages in my app that are not supported by Expo? ▸ Will my app need to play audio while it is not in the foreground? ▸ Will my app need location services while it is not in the foreground? ▸ Will I need push notification support? ▸ Am I comfortable working in Xcode and Android Studio?
- 41. #RNISAWESOME ▸ Ionic ▸ Run on a “webview” with cordova - performance issues ▸ Write once run everywhere ▸ Mimic the platform’s widgets to make your application look native ▸ Angular (lately you can write with VUE as well) ▸ Xamarin ▸ a complete set of tools (diagnostics, debugging) ▸ Just in time & Ahead of time compilation = faster application startup ▸ You need to write on C#
- 42. THANK YOU ! Panagiotis Vourtsis Front-End Developer @orfium #RNISAWESOME https://www.youtube.com/watch?v=hDviGU-57lU https://medium.com/the-react-native-log/comparing-the-performance- between-native-ios-swift-and-react-native-7b5490d363e2 https://gist.github.com/panvourtsis/ 714155aa2325b7b3b35bdb91f53fe2d3 LINKS