Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

TERMS

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

BUSINESS ISSUE

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

web-confluence.appspot.com

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Włodzimierz Rożkow Telegram

Slide 18

Slide 18 text

iOS RELEASE

Slide 19

Slide 19 text

Hybrid App Development

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

BACKEND FOR FRONTEND PATTERN

Slide 25

Slide 25 text

TRADITIONAL

Slide 26

Slide 26 text

API GATEWAY

Slide 27

Slide 27 text

CLIENT API GATEWAYS

Slide 28

Slide 28 text

TOOLS

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

31 Overengineering for Startups

Slide 32

Slide 32 text

My choice!

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

MonolithFirst

Slide 35

Slide 35 text

BACKEND FOR FRONTEND APPROACH

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Don't make FrontEnd Developer think

Slide 38

Slide 38 text

SPECIFICATION FIRST

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

CODE OR SCHEME FIRST

Slide 42

Slide 42 text

CONTROL RESPONSE TIME

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

44

Slide 45

Slide 45 text

45

Slide 46

Slide 46 text

PREFER SINGLE PROTOCOL

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

CHOOSE THE FORMAT CAREFULLY

Slide 51

Slide 51 text

● 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

Slide 52

Slide 52 text

SVG JPG

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

CREATE CONVENIENT BACKEND

Slide 55

Slide 55 text

ENVIRONMENT FOR LOCAL FRONTEND DEVELOPMENT

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

By Dmytro Naumenko

Slide 60

Slide 60 text

SUMMARY

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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