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.
Alexandre Gomes
EMBRACE THE « REACT FATIGUE »
PROFESSIONAL JS CONFERENCE
8-9 NOVEMBER‘19 KYIV, UKRAINE
#1 cause of developers shortage
💀
JS Fatigue
! Yearly ES spec
! New libraries, features
! New good practices
! Imposter syndrome
! TS is now the industry st...
JS Fatigue
React Fatigue ?
🤔
React Fatigue
More influential voices ?
A new paradigm !
! New paradigm: UI as a function of state
! All previously done by a framework ! (switch to micro)
! Fast...
React Fatigue
React « Frameworks »
Full-stack « Frameworks »
Vulcan is unique in that it spans the full stack, from the database to the browser.
While there ...
Full-stack « Frameworks »
Yo 👋
! From 🥐 , living in 🍺
! Full-Stack, focusing on front-end
logic
! Just talk to me later on!
! @alexgomesdev 🐦
My experience with webdev
! Full-Stack dev
! Worked on the back-end, Node.js
! Entered front-end dev professionally
! Stra...
«Complex project »
! Complex apps NEED patterns
! React isn’t the simple thing people usually think of
cryptodoggos
At first, I was like 🦅
! I’m lazy
! No DSL to learn
! No opinionation
! React it is!
! (incidentally, unidirectional
data ...
I’m lazy: no opinionation/DSL
! React is a library, not a framework
! « React is just JS »
! No concepts to learn on top o...
Add a bit of state management
Async / Side-effects in redux
redux-saga to the rescue
Just moving the problem away
! Boilerplate
! Abstracting REST API / network (Ethereum, etc..) calls to redux
! There must ...
Redux ecosystem is huge
! flux pattern
! redux, react-redux API
! redux-saga
! redux-thunk
! reselect
! redux-promise
! re...
Some HOC extract
How to compose components ?
🤔
Composition looks coo.. oh wait
Better ? Meh
compose() to the rescue
“Yo man, REST is dead”
GraphQL
! Declarative data-fetching
! Query Language + Schema Definition Language (SDL)
! Ask only for what you need
! Doe...
Doesn’t define how
Doesn’t define how
GraphQL: Just about data fetching ?
Well… not only !
! Query-Component colocation
! Reduces redux usage
! Complete ecosystem with optimistic UI updates, cachi...
“Who uses CSS in 2017 !?”
webpack Sass/LESS loader ?
JSS ?
React 16.3: Context API
🙌
React 16.8: Hooks
! New way to interact with React
! Functional
! Easy to test
! Easier to do composition, out-of-the-box
Hooks are great ? Going from this
To that !
But
! New syntax to learn
! New composition model to learn
! New reasons for debates to emerge in the community
! Entry-ba...
Now I looked like this
The bad news: There’s no solution!
Can be mitigated!
! Don’t try to recreate a framework
! Don’t be afraid to try non-standard libs
! Would a new React dev l...
« Would a new React dev learn easily? »  
! Try to minimise the « onion effect »
! Gatsby: Need to learn React + GraphQL
Avoid lock-in
! How hard is it to opt out of chosen solution?
! react has small lock-in footprint
! rails-like solution = ...
Every pattern can be dirty
! Try to think your pattern at scale in advance
! Regularly reconsider your choices
Don’t go full hipster.
Seriously, don’t go full hipster
! Keep it clean
○ One lib/technology per pattern
○ Isolated parts of your app
○ Refactor ...
Embrace it
! Don’t forget why you chose a library vs. a framework 🎉
! Skeptical mindset
! React Fatigue is a strength
! Em...
Stay curious!
! Stay curious
○ Read about new libs / patterns
○ Analytic mind on trends
○ Don’t always go with the communi...
JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue"
JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue"
JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue"
JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue"
Upcoming SlideShare
Loading in …5
×

of

JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 1 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 2 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 3 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 4 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 5 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 6 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 7 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 8 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 9 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 10 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 11 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 12 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 13 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 14 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 15 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 16 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 17 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 18 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 19 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 20 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 21 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 22 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 23 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 24 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 25 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 26 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 27 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 28 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 29 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 30 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 31 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 32 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 33 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 34 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 35 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 36 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 37 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 38 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 39 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 40 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 41 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 42 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 43 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 44 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 45 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 46 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 47 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 48 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 49 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 50 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 51 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 52 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 53 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 54 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 55 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 56 JS Fest 2019/Autumn. Alexandre Gomes. Embrace the "react fatigue" Slide 57
Upcoming SlideShare
What to Upload to SlideShare
Next

0 Likes

Share

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

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 !

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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 !

Views

Total views

231

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×