Shower Presentation Engine

Yours Truly, Famous Inc.

JSON:API - общаемся по стандарту

Никита Юстовский, Tvil.ru

Что это?

JSON:API - это спецификация, описывающая каким образом клиент должен запрашивать получение и изменение ресурсов, а также как именно должен сервер отвечать на такие запросы.

Зачем?

Преимущества

Общее соглашение как для фронтенда, так и для бэкенда

Готовые инструменты

Достаточно прост в освоении

CRUD - Read

            GET /products/?filter[country]=Russia&include=photos
            Accept: application/vnd.api+json

Ответ

            200 OK
            Content-Type: application/vnd.api+json
        
            ...
            "data": [
              {
                "type": "products",
                "id": "123456",
                "attributes": {
                  "name": "Томат",
                  ...

Связи

            ...
            "relationships": {
              "photos": {
                "data": [
                  {
                    "type": "photos",
                    "id": "123456"
                    ...

Связи

            ...
            "included": [
              {
                "type": "photos",
                "id": "123456",
                "attributes": {
                  "url": "https://json-api-slides.example/media/photos/123456"
                  ...

CRUD - Create

            POST /products
            Content-Type: application/vnd.api+json
            Accept: application/vnd.api+json
        
            {
              "data": {
                "type": "products",
                "attributes": { "name": "Томат" }
                  ...
              "relationships": {
                "trademark": {
                  "data": { "type": "trademarks", "id": "123456" }
                  ...

CRUD - Update

            PATCH /products/123456
            Content-Type: application/vnd.api+json
            Accept: application/vnd.api+json
        
            ...
            "data": {
              "type": "products",
              "id": "123456",
              "attributes": {
                "name": "Помидор",
                ...

CRUD

            DELETE /products/123456
            Accept: application/vnd.api+json

Инструменты

https://jsonapi.org/implementations/#client-libraries-javascript

Devour - быстрый старт

            GET /products/?filter[country]=Russia&include=photos
        
            import JsonApi from 'devour-client'
            const jsonApi = new JsonApi({ apiUrl:'https://json-api-slides.example' })
              
            jsonApi.define('product', { name: '' })
            jsonApi.findAll('product', { filter: { country: 'Russia' }, include: 'photos' })

Devour - связи

            jsonApi.define('photo', {
              id: '',
              url: '',
            })
              
            jsonApi.define('product', {
              name: '',
              photos: {
                jsonApi: 'hasMany',
                type: 'photos',
              }
            })

Альтернативы

Спасибо!