React Naitive

Transcript

1. React Native Мощь React для вашего мобильного приложения
2. Зачем нужен еще 1?
5. Чем плохи web-технологии? • Компоненты платформы • Производительность • Сложная система жестов
6. Чем плоха нативная разработка? • Компиляция • не Javascript • Инструменты • Layout
7. Rethinking best practices • Разделение логики по компонентам • JS как шаблонизатор • Virtual Dom, tree diff, полный ререндеринг
8. State TodoList TodoItem TodoItem <div> DOM
9. State TodoList TodoItem TodoItem [[UIView alloc] initWithFrame:viewRect] UIKit
11. JavaScriptCore • импортировать objective-c объекты в JS • выполнять objective-c блоки из js
12. Main Thread JS Thread UIThread Objective C Event Loop
13. Main Thread @implementation HelloJS RCT_EXPORT_MODULE RCT_EXPORT_METHOD(sayHello:(NSString *) name) { RCTLogInfo(@“Hello %@", name); }
14. RCT_EXPORT_MODULE NSMutableArray со всеми классами var HelloJS = require('NativeModules').HelloJS; HelloJS.sayHello(‘cool kid’)
15. OMFG • Cmd + r • livereload • дружественные сообщения об ошибках • Chrome debugger • React!!!
16. Layout
17. Android xml vs dsl • DSL компактнее • no code reuse • same code for every layout
18. Layout в iOS • Мощный графический редактор • TodoList - 160 страниц!
19. CSS это круто
20. Flexbox
21. CSS Facebook style • css в javascript • inline styles
22. var SuperComponent = React.createClass({ render: function() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> </View> ); } }); var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, welcome: { fontSize: 20, }, });
23. Networking • fetch • ajax
24. ReactNative приложения • F8 • Groups • Ads Manager
25. Недостатки • отсутствие IDE • JavaScript • Не совсем web • Еще 1 абстракция • пока нет android • windows phone похоже и не планируется • нет работы :(
27. Nuclide ide
28. Flow • Gradual typing • type checker • Flow vs TypeScript • планы на будущее
29. Learn once, write everywhere
30. Спасибо за внимание