$30 off During Our Annual Pro Sale. View Details »

React applications Failures

React applications Failures

Nikita Galkin

July 09, 2022
Tweet

More Decks by Nikita Galkin

Other Decks in Technology

Transcript

  1. None
  2. Nikita Galkin Love and Know: ▰ How to make developers

    and business happy ▰ Technical and process debt elimination Believe that: ▰ Any problem must be solved at the right level ▰ Software is easy. People are hard ▰ A problem should be highlighted, an idea should be "sold", a solution should be demonstrated Links: Site GitHub Twitter Facebook 2
  3. ▰ Telegram channel, daily ▰ Voice chat, weekly ▰ Workshops,

    coming soon
  4. Sharing your failures, to turn mistakes into lessons

  5. F A I L U R E GraphQL Obsession

  6. None
  7. None
  8. Creating new features and fixing bugs was so difficult that

    after the team leader left,the application was rewritten from scratch.
  9. L E A R N E D L E S

    S O N S ▰ Don't shift responsibility from Backend to Frontend ▰ GraphQL is good for Backend for Frontend ▰ Browser cache is the simplest way for speed appl
  10. F A I L U R E Glitching search

  11. Tech Stack ▰ React ▰ Redux Toolkit ▰ React-Bootstrap ▰

    REST as protocol ▰ Nest.js on BE ▰ PostgreSQL
  12. Some users have complained that the search shows irrelevant results.

    Others have said that the search does not find anything. Development took two weeks. Bug hunting – 3 months.
  13. Bugs were on FE: ▰ Pagination state was not reset

    after search ▰ Search input without debounce
  14. None
  15. L E A R N E D L E S

    S O N S ▰ The first time you will fail a new feature even if you are Senior. ▰ Search analytics is very useful for business ▰ Backend logs help
  16. F A I L U R E Conversion rate

  17. The project: ▰ Ecommerce ▰ New version with better UI

    and new tech stack ▰ Smaller conversion rate
  18. Long loading time fixes 1. SPA 2. SPA + CDN

    3. Next.js Server-side Rendering 4. Next.js Static Generation
  19. L E A R N E D L E S

    S O N S ▰ Use CDN and HTTP 2 ▰ For some cases SPA is bad, JAM stack can be better tech stack ▰ A/B testing
  20. F A I L U R E Highload from the

    start
  21. The project: ▰ Tinder for Gamers ▰ From scratch ▰

    Business has inflated expectations ▰ Goal 5.000.000 users in a year
  22. Backend: ▰ Microservices ▰ GraphQL ▰ Premature Service Cost optimization

    for expected users count
  23. Frontend: ▰ Custom design ▰ No CI/CD Development: ▰ Hard

    integration ▰ Failed milestones ▰ Any requirement change – refactoring ▰ The release never happened
  24. L E A R N E D L E S

    S O N S ▰ Use design system with development-ready components ▰ Make stable developer environment ▰ Small iteration with regular integration for testing product and tech stack ▰ The first version will be thrown out
  25. F A I L U R E Education Platform

  26. Requirements ▰ Lessons scheduling ▰ Homeworks ▰ Payments ▰ Video

    calls ▰ Pair work of student and teacher on one material in real time
  27. Implementations 1. REST + WebSockets 2. REST + WebSockets with

    resubscribe 3. WebSockets But Google Docs won…
  28. Multi User real time application are hard because of data

    conflicts. Instead of implementation BE, better use Firebase RTDB.
  29. L E A R N E D L E S

    S O N S ▰ It’s better to test technology on a small feature. ▰ In certain situations, the right or wrong technical solution does not matter.
  30. QUESTIONS TIME! Slides at the channel ➡