Backend For Frontend: The Missing Manual at Devoxx Ukraine

Backend For Frontend: The Missing Manual at Devoxx Ukraine

A2443b68836f2d166eae52b940e99bf6?s=128

Nikita Galkin

November 01, 2019
Tweet

Transcript

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

    1, 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. iOS RELEASE

  17. None
  18. Włodzimierz Rożkow Telegram

  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. BACKEND FOR FRONTEND APPROACH

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

  31. SPECIFICATION FIRST

  32. None
  33. 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
  34. CODE OR SCHEME FIRST

  35. CONTROL RESPONSE TIME

  36. 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
  37. 40

  38. 41

  39. PREFER SINGLE PROTOCOL

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

    server <-> client • client Subscription • server Updates
  41. None
  42. 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
  43. CHOOSE THE FORMAT CAREFULLY

  44. • 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
  45. SVG JPG

  46. ➜ ~ 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>)
  47. CREATE CONVENIENT BACKEND

  48. ENVIRONMENT FOR LOCAL FRONTEND DEVELOPMENT

  49. 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
  50. v1.0 v1.1 v2.0 v2.1 v3.0 Versioning

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

    source code
  52. By Dmytro Naumenko

  53. SUMMARY

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

    Border Between Client and Server ▰ Provide WebApi Specification ▰ Control Small Response Time
  55. HAPPY BACKEND DEVELOPMENT!