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

React applications Failures

React applications Failures

Nikita Galkin

July 09, 2022
Tweet

More Decks by Nikita Galkin

Other Decks in Technology

Transcript

  1. View Slide

  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

    View Slide

  3. ▰ Telegram channel, daily
    ▰ Voice chat, weekly
    ▰ Workshops, coming soon

    View Slide

  4. Sharing your failures,
    to turn mistakes into lessons

    View Slide

  5. F
    A
    I
    L
    U
    R
    E
    GraphQL Obsession

    View Slide

  6. View Slide

  7. View Slide

  8. Creating new
    features and fixing
    bugs was so difficult
    that after the team
    leader left,the
    application was
    rewritten from
    scratch.

    View Slide

  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

    View Slide

  10. F
    A
    I
    L
    U
    R
    E
    Glitching search

    View Slide

  11. Tech Stack
    ▰ React
    ▰ Redux Toolkit
    ▰ React-Bootstrap
    ▰ REST as protocol
    ▰ Nest.js on BE
    ▰ PostgreSQL

    View Slide

  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.

    View Slide

  13. Bugs were on FE:
    ▰ Pagination state was
    not reset after search
    ▰ Search input without
    debounce

    View Slide

  14. View Slide

  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

    View Slide

  16. F
    A
    I
    L
    U
    R
    E
    Conversion rate

    View Slide

  17. The project:
    ▰ Ecommerce
    ▰ New version with better
    UI and new tech stack
    ▰ Smaller conversion rate

    View Slide

  18. Long loading time fixes
    1. SPA
    2. SPA + CDN
    3. Next.js Server-side
    Rendering
    4. Next.js Static
    Generation

    View Slide

  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

    View Slide

  20. F
    A
    I
    L
    U
    R
    E
    Highload from the start

    View Slide

  21. The project:
    ▰ Tinder for Gamers
    ▰ From scratch
    ▰ Business has
    inflated expectations
    ▰ Goal 5.000.000
    users in a year

    View Slide

  22. Backend:
    ▰ Microservices
    ▰ GraphQL
    ▰ Premature Service
    Cost optimization
    for expected users
    count

    View Slide

  23. Frontend:
    ▰ Custom design
    ▰ No CI/CD
    Development:
    ▰ Hard integration
    ▰ Failed milestones
    ▰ Any requirement
    change – refactoring
    ▰ The release never
    happened

    View Slide

  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

    View Slide

  25. F
    A
    I
    L
    U
    R
    E
    Education Platform

    View Slide

  26. Requirements
    ▰ Lessons scheduling
    ▰ Homeworks
    ▰ Payments
    ▰ Video calls
    ▰ Pair work of student
    and teacher on one
    material in real time

    View Slide

  27. Implementations
    1. REST + WebSockets
    2. REST + WebSockets
    with resubscribe
    3. WebSockets
    But Google Docs won…

    View Slide

  28. Multi User real time
    application are hard
    because of data
    conflicts. Instead of
    implementation BE,
    better use Firebase
    RTDB.

    View Slide

  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.

    View Slide

  30. QUESTIONS TIME!
    Slides
    at the channel ➡

    View Slide