Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue"

12 views

Published on

As a subset of the JS community, react has seen a lot of so-called ""good practices"" these last years, made out of libraries and design patterns. As if it wasn't hard enough to stay sane in a crazy JS world, we're now doing the same in react.
Together, let's explore how such abundance of new techniques can actually be embraced, without making you lose your mind !

Published in: Education
  • Be the first to comment

  • Be the first to like this

JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue"

  1. 1. Alexandre Gomes EMBRACE THE « REACT FATIGUE » PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER‘19 KYIV, UKRAINE
  2. 2. #1 cause of developers shortage 💀
  3. 3. JS Fatigue ! Yearly ES spec ! New libraries, features ! New good practices ! Imposter syndrome ! TS is now the industry standard ! Node is now required for front/back-end ! Tooling complexity (webpack, babel) = Entry barrier 😪
  4. 4. JS Fatigue
  5. 5. React Fatigue ? 🤔
  6. 6. React Fatigue
  7. 7. More influential voices ?
  8. 8. A new paradigm ! ! New paradigm: UI as a function of state ! All previously done by a framework ! (switch to micro) ! Fast iterations, new problems to solve ! npm ecosystem
  9. 9. React Fatigue
  10. 10. React « Frameworks »
  11. 11. Full-stack « Frameworks » Vulcan is unique in that it spans the full stack, from the database to the browser. While there exists many excellent back-end frameworks or backend-as-a-service providers, these all still require you to handle your front-end code yourself, including building a set of components to read, write, and display data. But because Vulcan is full-stack, it’s able to speed up these repetitive tasks by providing a whole range of helper components that are fine-tuned to the Vulcan back- end, and as a result just work out of the box.
  12. 12. Full-stack « Frameworks »
  13. 13. Yo 👋 ! From 🥐 , living in 🍺 ! Full-Stack, focusing on front-end logic ! Just talk to me later on! ! @alexgomesdev 🐦
  14. 14. My experience with webdev ! Full-Stack dev ! Worked on the back-end, Node.js ! Entered front-end dev professionally ! Straight up took on a complex project ! I don’t have that much experience !
  15. 15. «Complex project » ! Complex apps NEED patterns ! React isn’t the simple thing people usually think of
  16. 16. cryptodoggos
  17. 17. At first, I was like 🦅 ! I’m lazy ! No DSL to learn ! No opinionation ! React it is! ! (incidentally, unidirectional data flow and functional style)
  18. 18. I’m lazy: no opinionation/DSL ! React is a library, not a framework ! « React is just JS » ! No concepts to learn on top of JS/HTML, just a « simple » API
  19. 19. Add a bit of state management
  20. 20. Async / Side-effects in redux
  21. 21. redux-saga to the rescue
  22. 22. Just moving the problem away ! Boilerplate ! Abstracting REST API / network (Ethereum, etc..) calls to redux ! There must be a better alternative ?
  23. 23. Redux ecosystem is huge ! flux pattern ! redux, react-redux API ! redux-saga ! redux-thunk ! reselect ! redux-promise ! redux-form/react-redux-form ! redux-watch
  24. 24. Some HOC extract
  25. 25. How to compose components ? 🤔
  26. 26. Composition looks coo.. oh wait
  27. 27. Better ? Meh
  28. 28. compose() to the rescue
  29. 29. “Yo man, REST is dead”
  30. 30. GraphQL ! Declarative data-fetching ! Query Language + Schema Definition Language (SDL) ! Ask only for what you need ! Doesn’t define how you get data ! Doesn’t have to be a server ! Just a spec
  31. 31. Doesn’t define how
  32. 32. Doesn’t define how
  33. 33. GraphQL: Just about data fetching ?
  34. 34. Well… not only ! ! Query-Component colocation ! Reduces redux usage ! Complete ecosystem with optimistic UI updates, caching etc (apollo- client) ! New pattern to learn ! New concepts to learn if you use relay ! Defines your app architecture
  35. 35. “Who uses CSS in 2017 !?”
  36. 36. webpack Sass/LESS loader ?
  37. 37. JSS ?
  38. 38. React 16.3: Context API
  39. 39. 🙌
  40. 40. React 16.8: Hooks ! New way to interact with React ! Functional ! Easy to test ! Easier to do composition, out-of-the-box
  41. 41. Hooks are great ? Going from this
  42. 42. To that !
  43. 43. But ! New syntax to learn ! New composition model to learn ! New reasons for debates to emerge in the community ! Entry-barrier to react becoming even higher
  44. 44. Now I looked like this
  45. 45. The bad news: There’s no solution!
  46. 46. Can be mitigated! ! Don’t try to recreate a framework ! Don’t be afraid to try non-standard libs ! Would a new React dev learn easily? ! Avoid lock-in
  47. 47. « Would a new React dev learn easily? »   ! Try to minimise the « onion effect » ! Gatsby: Need to learn React + GraphQL
  48. 48. Avoid lock-in ! How hard is it to opt out of chosen solution? ! react has small lock-in footprint ! rails-like solution = bigger lock-in
  49. 49. Every pattern can be dirty ! Try to think your pattern at scale in advance ! Regularly reconsider your choices
  50. 50. Don’t go full hipster.
  51. 51. Seriously, don’t go full hipster ! Keep it clean ○ One lib/technology per pattern ○ Isolated parts of your app ○ Refactor if/after you ditch that pattern/library ○ No conflicting patterns 🏆 ! Side projects are cool !
  52. 52. Embrace it ! Don’t forget why you chose a library vs. a framework 🎉 ! Skeptical mindset ! React Fatigue is a strength ! Embrace the ecosystem ⚛
  53. 53. Stay curious! ! Stay curious ○ Read about new libs / patterns ○ Analytic mind on trends ○ Don’t always go with the community

×