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. 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 full-size slide

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

    View full-size slide

  3. Sharing your failures,
    to turn mistakes into lessons

    View full-size slide

  4. F
    A
    I
    L
    U
    R
    E
    GraphQL Obsession

    View full-size slide

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

    View full-size slide

  6. 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 full-size slide

  7. F
    A
    I
    L
    U
    R
    E
    Glitching search

    View full-size slide

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

    View full-size slide

  9. 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 full-size slide

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

    View full-size slide

  11. 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 full-size slide

  12. F
    A
    I
    L
    U
    R
    E
    Conversion rate

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 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 full-size slide

  21. F
    A
    I
    L
    U
    R
    E
    Education Platform

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. 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 full-size slide

  26. QUESTIONS TIME!
    Slides
    at the channel ➡

    View full-size slide