React Europe 2016 Recap

Overview of React Europe 2016 conference - key points, highlights and project announcements by Robert Haritonov and Alexey Kureev.

React Amsterdam June Meetup @ Publitas

Transcript

1. React Europe 2016 Recap Robert Haritonov & Alexey Kureev
2. Front-end Development Lead Liberty Global / Ziggo
 
 Robert Haritonov @operatino r@rhr.me

3. https://react-europe.org June 02-03, 2016
4. @operatino React Europe • Like Google I/O in React world • Lot’s of announcements • Real cutting edge stuff • Deep topics and many community representatioves
5. @operatino Topics • React • Programming and culture • Tools • Lot’s of React Native and GraphQL
6. React
7. @operatino The Redux Journey - Dan Abramov • Redux history • Main concepts • Tools highlights • New egghead.io course
8. A cartoon guide to performance - Lin Clark
9. A cartoon guide to performance - Lin Clark
11. @operatino Recomposing your React application - Andrew Clark • github.com/acdlite/recompose • Higher-order component utilities • More configurable and presentational components • "lodash for React"
13. Programming and Culture
14. @operatino Being Successful at Open Source - Christopher Chedeau • FB open sources only production ready libraries • Talk to people (ask about what they've struggle with) • Promote your contributors work • Ask to write a blog post about your project
15. @operatino Other talks • On the Spectrum of Abstraction - Cheng Lou • A Deepdive Into Flow - Jeff Morrison
16. Tools
17. @operatino React Redux Analytics - Bertrand & Evan • Track Redux Actions • Send state with tracking payload • Fits very well into Lean Startup approach
18. React Redux Analytics - Bertrand & Evan
19. @operatino Debugging flux applications in production - Mihail Diordiev • History, time travel, state diff • Use redux-devtools with any (flux) library • Generate tests out of action history • Remote redux-devtools (sync actions) • Send history on exception
20. The Evolution of React UI Development - Max & Nik
21. @operatino More From Lightning Talks • redux-test-recorder • redux-webworker • github.com/recon-js/recon
22. React Native
23. Hello, let’s talk about React Native
25. Agenda • React Native retrospective • Building li.st for Android with Exponent • JavaScript, React Native and Performance • React Native ❤ 60FPS - Improving React Native • Native Navigation for Every Platform
26. React Native retrospective by Bonnie Eisenman
27. Back to 2014
28. Mobile dev • Platform-specific arcana 1. Objective-C or Swift on iOS 2. Java on Android • Siloed knowledge • Re-build all the things
29. 29.01.2016 React Native has been announced
30. The Promise • Learn once, write everywhere • Write JavaScript for iOS and Android • …with native level performance
31. March 2015 React Native public release
32. #EarlyAdopterProblems • Setup is weird • Best practices are WIP • Can't develop from Linux or Windows • No Android support, release date TBD • Breaking changes in each release
33. September 2015 React Native for Android
35. Watch a full talk https://www.youtube.com/watch?v=-vl57brMWNg
36. Building li.st for Android with Exponent and React by Brent Vatne
37. li.st for Android is written in JS without any custom native views
38. Touch events / Rendering queue
39. Rendering li.st in chunks
40. ListView
41. Viewport Render-ahead distance
42. Windowed List View
43. Spacer
44. UITableView
45. Recycle pool
46. Watch a full talk https://www.youtube.com/watch?v=cI9bDvDEsYE
47. JavaScript, React Native and Performance by Tadeu Zagallo
48. Performance goals • Reduce Memory usage • Reduce Startup overhead
50. Multi-thread optimization
52. JavaScript optimizations
53. Inline / Lazy requires
55. Dead Code Elimination
58. …and a lot more
59. Watch a full talk https://www.youtube.com/watch?v=1oL_OJ3UePU
60. React Native ❤ 60FPS – Improving React Native by Krzysztof Magiera
61. Animations are very important for UX
62. Native Components Animations <NavigatorIOS />, <MapView />, <TouchableNativeFeedback />, <ViewPager />
63. Native Components Animations + Maximum performance + Platform-specific behavior “by default” + Very little work - Very limited set of components - Often impossible to customize
64. Layout Animations LayoutAnimation.spring(); this.setState({…});
65. Layout Animations
66. Layout Animations + Native performance + Very easy API - Works for layout properties only - Not interruptible
67. Animated.js var someValue = new Animated.Value(0);
68. Animated.js + Very flexible + Gesture interaction + Best performance when not 
 animating layout properties - Difficult to express layout animations - Gesture reaction latency - Overloading JS thread
69. Watch a full talk https://www.youtube.com/watch?v=qgSMjYWqBk4
70. Native Navigation for Every Platform by Eric Vicenti
71. URI Action Back Action View 1 View 2
72. Redux concepts for Navigation in React Native
73. Back Action View 1 View 2 URI Action Reducer
74. Native Navigator for every platform
75. Watch a full talk https://www.youtube.com/watch?v=dOSwHABLvdM
76. Thank you!