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
   

   View Slide

2. Front-end Development Lead
   Liberty Global / Ziggo

   

   Robert Haritonov
   @operatino r@rhr.me

   

   View Slide

3. https://react-europe.org
   June 02-03, 2016
   

   View Slide

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
   

   View Slide

5. @operatino
   Topics
   • React
   • Programming and culture
   • Tools
   • Lot’s of React Native and GraphQL
   

   View Slide

6. React
   

   View Slide

7. @operatino
   The Redux Journey - Dan Abramov
   • Redux history
   • Main concepts
   • Tools highlights
   • New egghead.io course
   

   View Slide

8. A cartoon guide to performance - Lin Clark
   

   View Slide

9. A cartoon guide to performance - Lin Clark
   

   View Slide

10. View Slide

11. @operatino
    Recomposing your React application - Andrew Clark
    • github.com/acdlite/recompose
    • Higher-order component utilities
    • More configurable and presentational components
    • "lodash for React"
    

    View Slide

12. View Slide

13. Programming and Culture
    

    View Slide

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
    

    View Slide

15. @operatino
    Other talks
    • On the Spectrum of Abstraction - Cheng Lou
    • A Deepdive Into Flow - Jeff Morrison
    

    View Slide

16. Tools
    

    View Slide

17. @operatino
    React Redux Analytics - Bertrand & Evan
    • Track Redux Actions
    • Send state with tracking payload
    • Fits very well into Lean Startup approach
    

    View Slide

18. React Redux Analytics - Bertrand & Evan
    

    View Slide

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
    

    View Slide

20. The Evolution of React UI Development - Max & Nik
    

    View Slide

21. @operatino
    More From Lightning Talks
    • redux-test-recorder
    • redux-webworker
    • github.com/recon-js/recon
    

    View Slide

22. React Native
    

    View Slide

23. Hello, let’s talk about
    React Native
    

    View Slide

24. View Slide

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
    

    View Slide

26. React Native
    retrospective
    by Bonnie Eisenman
    

    View Slide

27. Back to 2014
    

    View Slide

28. Mobile dev
    • Platform-specific arcana
    1. Objective-C or Swift on iOS
    2. Java on Android
    • Siloed knowledge
    • Re-build all the things
    

    View Slide

29. 29.01.2016
    React Native has been announced
    

    View Slide

30. The Promise
    • Learn once, write everywhere
    • Write JavaScript for iOS and Android
    • …with native level performance
    

    View Slide

31. March 2015
    React Native public release
    

    View Slide

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
    

    View Slide

33. September 2015
    React Native for Android
    

    View Slide

34. View Slide

35. Watch a full talk
    https://www.youtube.com/watch?v=-vl57brMWNg
    

    View Slide

36. Building li.st for Android
    with Exponent and React
    by Brent Vatne
    

    View Slide

37. li.st for Android is written
    in JS without any custom
    native views
    

    View Slide

38. Touch events /
    Rendering queue
    

    View Slide

39. Rendering li.st in
    chunks
    

    View Slide

40. ListView
    

    View Slide

41. Viewport
    Render-ahead distance
    

    View Slide

42. Windowed List View
    

    View Slide

43. Spacer
    

    View Slide

44. UITableView
    

    View Slide

45. Recycle pool
    

    View Slide

46. Watch a full talk
    https://www.youtube.com/watch?v=cI9bDvDEsYE
    

    View Slide

47. JavaScript, React
    Native and Performance
    by Tadeu Zagallo
    

    View Slide

48. Performance goals
    • Reduce Memory usage
    • Reduce Startup overhead
    

    View Slide

49. View Slide

50. Multi-thread
    optimization
    

    View Slide

51. View Slide

52. JavaScript
    optimizations
    

    View Slide

53. Inline / Lazy requires
    

    View Slide

54. View Slide

55. Dead Code
    Elimination
    

    View Slide

56. View Slide

57. View Slide

58. …and a lot more
    

    View Slide

59. Watch a full talk
    https://www.youtube.com/watch?v=1oL_OJ3UePU
    

    View Slide

60. React Native ❤ 60FPS
    –
    Improving React Native
    by Krzysztof Magiera
    

    View Slide

61. Animations are very
    important for UX
    

    View Slide

62. Native Components
    Animations
    , ,
    ,
    

    View Slide

63. Native Components
    Animations
    + Maximum performance
    + Platform-specific behavior “by default”
    + Very little work
    - Very limited set of components
    - Often impossible to customize
    

    View Slide

64. Layout Animations
    LayoutAnimation.spring();
    this.setState({…});
    

    View Slide

65. Layout Animations
    

    View Slide

66. Layout Animations
    + Native performance
    + Very easy API
    - Works for layout properties only
    - Not interruptible
    

    View Slide

67. Animated.js
    var someValue = new Animated.Value(0);
    

    View Slide

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
    

    View Slide

69. Watch a full talk
    https://www.youtube.com/watch?v=qgSMjYWqBk4
    

    View Slide

70. Native Navigation for
    Every Platform
    by Eric Vicenti
    

    View Slide

71. URI Action
    Back Action
    View 1 View 2
    

    View Slide

72. Redux concepts for
    Navigation in React Native
    

    View Slide

73. Back Action
    View 1 View 2
    URI Action
    Reducer
    

    View Slide

74. Native Navigator for
    every platform
    

    View Slide

75. Watch a full talk
    https://www.youtube.com/watch?v=dOSwHABLvdM
    

    View Slide

76. Thank you!
    

    View Slide