Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React applications Failures

React applications Failures

Nikita Galkin

July 09, 2022

More Decks by Nikita Galkin

Other Decks in Technology


  1. 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
  2. Creating new features and fixing bugs was so difficult that

    after the team leader left,the application was rewritten from scratch.
  3. 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
  4. Tech Stack ▰ React ▰ Redux Toolkit ▰ React-Bootstrap ▰

    REST as protocol ▰ Nest.js on BE ▰ PostgreSQL
  5. 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.
  6. Bugs were on FE: ▰ Pagination state was not reset

    after search ▰ Search input without debounce
  7. 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
  8. The project: ▰ Ecommerce ▰ New version with better UI

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

    3. Next.js Server-side Rendering 4. Next.js Static Generation
  10. 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
  11. The project: ▰ Tinder for Gamers ▰ From scratch ▰

    Business has inflated expectations ▰ Goal 5.000.000 users in a year
  12. Frontend: ▰ Custom design ▰ No CI/CD Development: ▰ Hard

    integration ▰ Failed milestones ▰ Any requirement change – refactoring ▰ The release never happened
  13. 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
  14. Requirements ▰ Lessons scheduling ▰ Homeworks ▰ Payments ▰ Video

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

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

    conflicts. Instead of implementation BE, better use Firebase RTDB.
  17. 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.