JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue"
- 1. Alexandre Gomes EMBRACE THE 束REACT FATIGUE損 PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER19 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
- 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
- 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, its able to speed up these repetitive tasks by providing a whole range of helper components that are 鍖ne-tuned to the Vulcan back- end, and as a result just work out of the box.
- 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 dont have that much experience !
- 17. 束Complex project損 ! Complex apps NEED patterns ! React isnt the simple thing people usually think of
- 18. cryptodoggos
- 19. At first, I was like ! Im lazy ! No DSL to learn ! No opinionation ! React it is! ! (incidentally, unidirectional data flow and functional style)
- 20. Im 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 ! Doesnt define how you get data ! Doesnt have to be a server ! Just a spec
- 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
- 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: Theres no solution!
- 49. Can be mitigated! ! Dont try to recreate a framework ! Dont 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. Dont go full hipster.
- 54. Seriously, dont 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 ! Dont 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 Dont always go with the community