Backend For Frontend: The Missing Manual

Transcript

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

   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. View Slide

4. View Slide

5. TERMS
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. BUSINESS
    ISSUE
    

    View Slide

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

    View Slide

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

    View Slide

13. web-confluence.appspot.com
    

    View Slide

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

    View Slide

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

    View Slide

16. View Slide

17. Włodzimierz Rożkow Telegram
    

    View Slide

18. iOS
    RELEASE
    

    View Slide

19. Hybrid App Development
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

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
    

    View Slide

24. BACKEND FOR
    FRONTEND
    PATTERN
    

    View Slide

25. TRADITIONAL
    

    View Slide

26. API GATEWAY
    

    View Slide

27. CLIENT API GATEWAYS
    

    View Slide

28. TOOLS
    

    View Slide

29. Tools:
    ▰ Amazon API Gateway
    ▰ Google Cloud Apigee
    ▰ Microsoft Azure API
    Management
    ▰ Kong
    ▰ Tyk
    ▰ etc
    

    View Slide

30. View Slide

31. 31
    Overengineering
    for Startups
    

    View Slide

32. My choice!
    

    View Slide

33. View Slide

34. MonolithFirst
    

    View Slide

35. BACKEND FOR
    FRONTEND
    APPROACH
    

    View Slide

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
    

    View Slide

37. Don't make FrontEnd
    Developer think
    

    View Slide

38. SPECIFICATION
    FIRST
    

    View Slide

39. View Slide

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
    

    View Slide

41. CODE OR SCHEME FIRST
    

    View Slide

42. CONTROL
    RESPONSE TIME
    

    View Slide

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
    

    View Slide

44. View Slide

45. View Slide

46. PREFER SINGLE
    PROTOCOL
    

    View Slide

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

    View Slide

48. View Slide

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
    

    View Slide

50. CHOOSE THE
    FORMAT
    CAREFULLY
    

    View Slide

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
    

    View Slide

52. SVG JPG
    

    View Slide

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 ()
    

    View Slide

54. CREATE
    CONVENIENT
    BACKEND
    

    View Slide

55. ENVIRONMENT FOR
    LOCAL FRONTEND
    DEVELOPMENT
    

    View Slide

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
    

    View Slide

57. v1.0 v1.1 v2.0 v2.1 v3.0
    Versioning
    

    View Slide

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

    View Slide

59. By Dmytro Naumenko
    

    View Slide

60. SUMMARY
    

    View Slide

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

    View Slide

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
    

    View Slide