Backend For Frontend: The Missing Manual at Devoxx Ukraine

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
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
16. iOS RELEASE
18. Włodzimierz Rożkow Telegram
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. 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
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
39. PREFER SINGLE PROTOCOL
40. REST • client -> server • Initial state WebSocket: • server <-> client • client Subscription • server Updates
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!