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 !

1. Alexandre Gomes
EMBRACE THE « REACT FATIGUE »
PROFESSIONAL JS CONFERENCE
8-9 NOVEMBER‘19 KYIV, UKRAINE

4. #1 cause of developers shortage
💀

5. 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 😪

6. JS Fatigue

7. React Fatigue ?
🤔

8. React Fatigue

9. More influential voices ?

10. 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

11. React Fatigue

12. React « Frameworks »

13. 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.

14. Full-stack « Frameworks »

15. Yo 👋
! From 🥐 , living in 🍺
! Full-Stack, focusing on front-end
logic
! Just talk to me later on!
! @alexgomesdev 🐦

16. 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 !

17. «Complex project »
! Complex apps NEED patterns
! React isn’t the simple thing people usually think of

18. cryptodoggos

19. At first, I was like 🦅
! I’m lazy
! No DSL to learn
! No opinionation
! React it is!
! (incidentally, unidirectional
data flow and functional
style)

20. 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

22. Add a bit of state management

23. Async / Side-effects in redux

24. redux-saga to the rescue

25. Just moving the problem away
! Boilerplate
! Abstracting REST API / network (Ethereum, etc..) calls to redux
! There must be a better alternative ?

26. Redux ecosystem is huge
! flux pattern
! redux, react-redux API
! redux-saga
! redux-thunk
! reselect
! redux-promise
! redux-form/react-redux-form
! redux-watch

27. Some HOC extract

28. How to compose components ?
🤔

29. Composition looks coo.. oh wait

30. Better ? Meh

31. compose() to the rescue

32. “Yo man, REST is dead”

33. 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

34. Doesn’t define how

35. Doesn’t define how

36. GraphQL: Just about data fetching ?

37. 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

38. “Who uses CSS in 2017 !?”

39. webpack Sass/LESS loader ?

40. JSS ?

41. React 16.3: Context API

42. 🙌

43. React 16.8: Hooks
! New way to interact with React
! Functional
! Easy to test
! Easier to do composition, out-of-the-box

44. Hooks are great ? Going from this

45. To that !

46. 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

47. Now I looked like this

48. The bad news: There’s no solution!

49. 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

50. « Would a new React dev learn easily? »
! Try to minimise the « onion effect »
! Gatsby: Need to learn React + GraphQL

51. 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

52. Every pattern can be dirty
! Try to think your pattern at scale in advance
! Regularly reconsider your choices

53. Don’t go full hipster.

54. 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 !

55. Embrace it
! Don’t forget why you chose a library vs. a framework 🎉
! Skeptical mindset
! React Fatigue is a strength
! Embrace the ecosystem ⚛

56. Stay curious!
! Stay curious
○ Read about new libs / patterns
○ Analytic mind on trends
○ Don’t always go with the community