Тимофей Плотников - Введение в React-Native

Я расскажу о React-Native с позиции бывалого мобильного разработчика. Стоит ли обратить внимание на кроссплатформенную разработку, какие подводные камни вас ждут и постараюсь представить куда будет двигаться мобильная разработка в будущем

GDG South DevFest 2017

Transcript

1. Введение в React native Step 0
2. темы доклада Project manager, S Media Link @timofey_plotnikov vk.com/kristoft Тимофей Плотников 2 года разработки и проектирования под Android 1 приложение под iOS Использовал Kotlin даже до RC Люблю осваивать и внедрять новые технологии
3. темы доклада Hello world для react-native - не сегодня Что такое кроссплатформенность Какие проблемы хотим решить Как эти проблемы решает react-native Подумаем о том, куда движется мобильная разработка Обзор
4. темы доклада Кроссплатформенность - это способность программного обеспечения работать более чем на одной аппаратной платформе и (или) операционной системе.
5. темы доклада Write once - run anywhere
6. темы доклада Существующие инструменты Web-based Native-based Independent Flutter
7. темы доклада HTML/CSS/JS WebView Низкая производительность Ограниченный доступ к платформе Не «нативный» внешний вид Web-based
8. темы доклада Любой язык (в теории) Одно Activity/ViewController на полный экран Отрисовка на OpenGL или другом нативном рендере Не «нативный» внешний вид Производительность напрямую зависит от реализации Independent
9. темы доклада Любой язык (в теории) Связь с платформой через мост Использование нативных View «Нативный» внешний вид Производительность платформы (в теории) Native-based
10. темы доклада REACT NATIVE
11. темы доклада made by Facebook born in 2015 (2 years old) v.0.48 (alpha!) declarative UI single-threaded still much of platform-specific code Overview
12. темы доклада JavaScript Bridge System services, (Location, Bluetooth, Sensors, Camera, Audio, etc) OEM Widgets Canvas Events
13. темы доклада iOS project Android project
14. темы доклада 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() ); } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); } }
15. темы доклада #import "AppDelegate.h" #import <React/RCTBundleURLProvider.h> #import <React/RCTRootView.h> @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { NSURL *jsCodeLocation; jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@«App» initialProperties:nil launchOptions:launchOptions]; rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; UIViewController *rootViewController = [UIViewController new]; rootViewController.view = rootView; self.window.rootViewController = rootViewController; [self.window makeKeyAndVisible]; return YES; } @end
16. темы доклада import React, { Component } from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; export class App extends Component { render() { return ( <View style={styles.container}> <Text>Hello, React Native!</Text> </View> ); } } var styles = StyleSheet.create({ container: { display : 'flex', backgroundColor: 'orange', height: '100%', flexDirection: 'column', justifyContent: 'center' } });
17. темы доклада Мифы и легенды
18. темы доклада Любой, кто знает React, может написать мобильное приложение с помощью React Native. Если ты не знаешь / не готов узнать нативную разработку, то серьезного приложения у тебя не получится
19. темы доклада Написанный один раз код хорошо будет работать как на iOS, так и на Android На самом деле многие функции работают по-разному на разных платформах. Особенно это касается верстки
20. темы доклада 60 fps! 60 fps кончается там, где начинаются запросы в сеть и анимация
21. темы доклада Hot-reload Тут все работает без нареканий :)
22. темы доклада Будьте готовы, что технология ещё в альфе React-native - это не полноценный фреймворк для написания приложений, это лишь View-часть Не смотря на заявленную кроссплатформенность, придется писать платформозависимый код Вы сможете быстро создать прототип, очень быстро Но этот прототип может доставить вам множество приключений Итоги
23. Спасибо за внимание!