React Europe 2016 Recap

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

Bad3e55f0b96b80bc4ffb40d1c1414dc?s=128

Robert Haritonov

June 24, 2016
Tweet

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

  10. None
  11. @operatino Recomposing your React application - Andrew Clark • github.com/acdlite/recompose

    • Higher-order component utilities • More configurable and presentational components • "lodash for React"
  12. None
  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

  24. None
  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

  34. None
  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

  49. None
  50. Multi-thread optimization

  51. None
  52. JavaScript optimizations

  53. Inline / Lazy requires

  54. None
  55. Dead Code Elimination

  56. None
  57. None
  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!