Backend For Frontend: The Missing Manual

Backend For Frontend: The Missing Manual

A2443b68836f2d166eae52b940e99bf6?s=128

Nikita Galkin

August 10, 2019
Tweet

Transcript

  1. Backend For Frontend: The Missing Manual by Nikita Galkin Aug

    10, 2019
  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. None
  4. None
  5. TERMS

  6. None
  7. None
  8. None
  9. None
  10. BUSINESS ISSUE

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

  12. Browser War hasn’t ended, but accelerated so that we stopped

    noticing it caniuse.com
  13. web-confluence.appspot.com

  14. ▰ Browser API as Desktop API. Chrome Experiments ▰ Business

    wants a feature faster ▰ Frontend Frameworks evolving . RealWorld Examples
  15. Additional requirements: ▰ UX/UI ▰ Adaptive design ▰ SEO ▰

    Accessibility ▰ JAMstack (ex: GatsbyJS) ▰ Progressive Web Applications ▰ Performance
  16. None
  17. Włodzimierz Rożkow Telegram

  18. iOS RELEASE

  19. Hybrid App Development

  20. None
  21. None
  22. None
  23. 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
  24. BACKEND FOR FRONTEND PATTERN

  25. TRADITIONAL

  26. API GATEWAY

  27. CLIENT API GATEWAYS

  28. TOOLS

  29. Tools: ▰ Amazon API Gateway ▰ Google Cloud Apigee ▰

    Microsoft Azure API Management ▰ Kong ▰ Tyk ▰ etc
  30. None
  31. 31 Overengineering for Startups

  32. My choice!

  33. None
  34. MonolithFirst

  35. BACKEND FOR FRONTEND APPROACH

  36. 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
  37. Don't make FrontEnd Developer think

  38. SPECIFICATION FIRST

  39. None
  40. 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
  41. CODE OR SCHEME FIRST

  42. CONTROL RESPONSE TIME

  43. 43 ▰ http2 and gzip ▰ For REST use ETag

    for browser cache and optimistic locking ▰ Precomputed data is better than cache ▰ Log and analyze long requests
  44. 44

  45. 45

  46. PREFER SINGLE PROTOCOL

  47. REST • client -> server • Initial state WebSocket: •

    server <-> client • client Subscription • server Updates
  48. None
  49. 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
  50. CHOOSE THE FORMAT CAREFULLY

  51. • 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
  52. SVG JPG

  53. ➜ ~ 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 (<anonymous>)
  54. CREATE CONVENIENT BACKEND

  55. ENVIRONMENT FOR LOCAL FRONTEND DEVELOPMENT

  56. 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
  57. v1.0 v1.1 v2.0 v2.1 v3.0 Versioning

  58. Domain knowledge should be represented in a single place as

    source code
  59. By Dmytro Naumenko

  60. SUMMARY

  61. ▰ Faster Development ▰ Save your colleagues time ▰ Move

    Border Between Client and Server ▰ Provide WebApi Specification ▰ Control Small Response Time
  62. HAPPY BACKEND DEVELOPMENT! You can find me on Twitter as

    @galk_in Slides are available at speakerdeck.com/galkin or at my site galk.in