Backend For Frontend: The Missing Manual

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
5. TERMS
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
17. Włodzimierz Rożkow Telegram
18. iOS RELEASE
19. Hybrid App Development
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
31. 31 Overengineering for Startups
32. My choice!
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
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
46. PREFER SINGLE PROTOCOL
47. REST • client -> server • Initial state WebSocket: • server <-> client • client Subscription • server Updates
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