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

Backend For Frontend: The Missing Manual at Devoxx Ukraine

Backend For Frontend: The Missing Manual at Devoxx Ukraine

Nikita Galkin

November 01, 2019
Tweet

More Decks by Nikita Galkin

Other Decks in Programming

Transcript

  1. Backend For Frontend:
    The Missing Manual
    by Nikita Galkin
    Nov 1, 2019

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

  3. BUSINESS
    ISSUE

    View full-size slide

  4. Client Development
    takes a lot of time
    and it’s expensive

    View full-size slide

  5. Browser War
    hasn’t ended, but
    accelerated so
    that we stopped
    noticing it
    caniuse.com

    View full-size slide

  6. web-confluence.appspot.com

    View full-size slide

  7. ▰ Browser API as
    Desktop API. Chrome
    Experiments
    ▰ Business wants a
    feature faster
    ▰ Frontend Frameworks
    evolving . RealWorld
    Examples

    View full-size slide

  8. Additional requirements:
    ▰ UX/UI
    ▰ Adaptive design
    ▰ SEO
    ▰ Accessibility
    ▰ JAMstack (ex: GatsbyJS)
    ▰ Progressive Web Applications
    ▰ Performance

    View full-size slide

  9. Włodzimierz Rożkow Telegram

    View full-size slide

  10. Hybrid App Development

    View full-size slide

  11. Netflix Technology Blog, Jul 9, 2012
    ▰ ✋✋✋ one-size-fits-all (OSFA) REST
    API
    ▰ Embrace the Differences of the Devices
    ▰ Separate Content Gathering
    from Content Formatting/Delivery
    ▰ Redefine the Border Between
    Client and Server

    View full-size slide

  12. BACKEND FOR
    FRONTEND
    PATTERN

    View full-size slide

  13. CLIENT API GATEWAYS

    View full-size slide

  14. BACKEND FOR
    FRONTEND
    APPROACH

    View full-size slide

  15. Netflix Technology Blog, Jul 9, 2012
    ▰ ✋✋✋ one-size-fits-all (OSFA) REST
    API
    ▰ Embrace the Differences of the Devices
    ▰ Separate Content Gathering
    from Content Formatting/Delivery
    ▰ Redefine the Border Between
    Client and Server

    View full-size slide

  16. Don't make FrontEnd
    Developer think

    View full-size slide

  17. SPECIFICATION
    FIRST

    View full-size slide

  18. Design APIs before development!
    Design APIs in a format that's readable for
    machines. For example:
    ▰ Swagger for REST
    ▰ AsyncAPI for WS
    ▰ gRPC or JSON-RPC for RPC
    ▰ GraphQL for batch and spec from the box

    View full-size slide

  19. CODE OR SCHEME FIRST

    View full-size slide

  20. CONTROL
    RESPONSE TIME

    View full-size slide

  21. 39
    ▰ http2 and gzip
    ▰ For REST use ETag for
    browser cache and
    optimistic locking
    ▰ Precomputed data is
    better than cache
    ▰ Log and analyze long
    requests

    View full-size slide

  22. PREFER SINGLE
    PROTOCOL

    View full-size slide

  23. REST
    ● client -> server
    ● Initial state
    WebSocket:
    ● server <-> client
    ● client Subscription
    ● server Updates

    View full-size slide

  24. Server Side Events
    ● EventSource at browser
    ● Stream at BackEnd
    ● Only text data
    ● Reconnect from the box with last message id
    ● Events and retry from server
    ● http2 required for many connections
    ● Awesome for fintech projects

    View full-size slide

  25. CHOOSE THE
    FORMAT
    CAREFULLY

    View full-size slide

  26. ● Object serialization
    ○ BigNumber example
    ○ Date to timestamp or string?
    ● JSON doesn’t support binary data,
    so use multipart/form-data or base64
    ● Client can request different content type.
    Use Accept header
    ● Compare binary size (protobuf, etc) only
    with gzip/brotli

    View full-size slide

  27. ➜ ~ node -v
    v10.16.0
    ➜ ~ node
    > const b = 15346349309n;
    undefined
    > b*b
    235510437113844777481n
    > Number(b) * Number(b)
    235510437113844800000
    > JSON.stringify(b)
    Thrown:
    TypeError: Do not know how to serialize a BigInt
    at JSON.stringify ()

    View full-size slide

  28. CREATE
    CONVENIENT
    BACKEND

    View full-size slide

  29. ENVIRONMENT FOR
    LOCAL FRONTEND
    DEVELOPMENT

    View full-size slide

  30. REST Example:
    ● Consistency
    ● Pagination: skip=10&take=10
    ● Order: order[name]=ASC&order[date]=DESC
    ● Fields: fields[name]&fields[date]
    ● Singular VS Collection
    ○ Entity
    ○ Entity Array+Aggregations

    View full-size slide

  31. v1.0 v1.1 v2.0 v2.1 v3.0
    Versioning

    View full-size slide

  32. Domain knowledge
    should be
    represented in a
    single place as
    source code

    View full-size slide

  33. By Dmytro Naumenko

    View full-size slide

  34. ▰ Faster Development
    ▰ Save your colleagues time
    ▰ Move Border Between Client and Server
    ▰ Provide WebApi Specification
    ▰ Control Small Response Time

    View full-size slide

  35. HAPPY BACKEND
    DEVELOPMENT!

    View full-size slide