React applications Failures

Transcript

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
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
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 ➡