API Platform: Full Stack Framework Resurrection

API PLATFORMFull Stack Framework Resurrection

Kévin DunglasFounder of Les-Tilleuls.coop

Symfony Core Team

API Platform creator

@dunglas

Les-Tilleuls.coopSelf-managed company since 2011

100% owned by employees

25 people, 97% growth in 2016

Hiring in London, Paris and Lille: [email protected]

The Web of 2017

APIs: the Heart of the New Web

Central point to access data

Encapsulate the business logic

Same features available everywhere:webapps, mobile apps, IoT, customers, providers…

Progressive Web Apps

Downloaded only 1 time, works offline!

Sends async HTTP requests to the API

Huge ecosystem: React, Angular, Vue…

Holds the presentation logic

Static « website »: JS, HTML and CSS

Modernized stack:ES2015, Babel, Webpack, Yarn, Flow, TypeScript, ReasonML…

Native Mobile Apps

Sync data by sending HTTP requests to the API

JS stack:React Native, NativeScript

Downloaded from stores (App Store, Google Play)

Look’n’Feel consistent with the platform (iOS or Android)

Cloud Native Projects

Software built, tested and deployed continuously

Rich and open ecosystem:Docker, Kubernetes, Mesos, Terraform…

Projects are hosted on public and private clouds

Containers and orchestration from dev stations to prod

A Frameworkfor the Modern Web

Goals

Modern API formats

A rock-solid API-first project in minutes

Batteries included:create, consume and deploy the API

Customizable, extensible, modular:config, events, decoration…

They already Use API Platform

Getting Started

Get DockerIf you don’t have it yet…

Install

Grab a release on GitHub

Browse https://localhost

$ docker-compose up

Just 1 class

Included (v2.1 - stable)

PHP FPM and Nginx containers, sensitive defaults for Symfony

Varnish container (more about this later)

Cross-platform Docker setup

MySQL container

Symfony Edition fine tuned for APIs

Upcoming Changes

HTTP/2 and HTTPS dev proxy

Containers for JS dev 🤔 🤗

Symfony Standard Edition Symfony Flex

Simplified directory structure

MySQL PostgreSQL

api-platform/api-platform#422

Too Much?

Go Micro with Flex

Browse http://localhost:8000

$ composer create-p symfony/skeleton api $ cd api $ composer req api

$ make serve

Your Turn!

Create yourClass

PHPDoc extraction (optional)

The hook:@ApiResourceXML and YAML also supported

Doctrine integration (optional)

$ docker-compose exec php bin/console \ doctrine:schema:update --force

Plain Old PHP Object

Your 1st API is ready!

Out of the Box Features

JSON-LD + Hydra formatsBut also… JSONAPI, HAL, XML, YAML, CSV and raw JSON…

OpenAPI (aka Swagger) doc

Nice UI (Swagger UI)

POST, GET (item and lists), PUT, DELETE

Pagination for lists (30 items per page), fully configurable

Data Validation

Symfony

Validation groups

Error levels

Symfony Validator integration

Relations

Class with a Relation

Embedding Relations

Embedded Relations

HTTP Cache (invalidation)

HTTP cache (invalidation)GET responses generated only 1 time, then served by Varnish(also work with CloudFlare and any cache proxy supporting tags)

Responses tagged with IRIs (URLs) of resources they contain(including relations, embedded resources…)

When a write operation occurs cached responses containing outdated data are purged

Builtin, single config flag, trusted proxies config provided

Browse https://localhost:444

Other Features

How does it Work?

Core Library

Distribution

Compatible with all existing bundles

Shipped with Doctrine ORM(soft dependency)

Flex app

Automatic route registration

Metadata Subsystem

Properties’ types and relations extracted with Symfony PropertyInfo

Guesses API’s structure (resources and properties)from classes marked@ApiResource

Intermediate representation of the API structure

Used by Hypermedia normalizers (JSON-LD, Hydra, HAL…)registered in the Symfony Serializer

Event-Driven Architecture

JSON-LD and Hydra

Credit: Martin Fowlerhttp://martinfowler.com/articles/richardsonMaturityModel.html

JSON-LDStandardized hypermedia format: W3C recommandation (2014)

Easy to use: a standard JSON document with some specials keys (starting with @) and mapped with a context

Backed by Google, BBC, Microsoft, US & UK govs...

Compliant with technologies of the semantic web: RDF, SPARQL, triple store...

JSON for Linked Data

Hydra

auto-discoverable API:resources, properties, types, operations

Standardize common API structures:collections, paginations, filters, errors…

In-band API doc

Draft W3C

Client-sidetools

Create React App

Babel: JavaScript compiler (ES2015+, JSX, Flow…)

App skeleton generator

All tools and configs to get started:

Webpack: module bundler (compile and package JS, CSS…)

$ yarn global add create-react-app $ create-react-app my-app $ cd my-app

$ yarn start

ESLint: find and report bugs, bad patterns…

Integrated web server, live reload, dev and debug tools

Data Fixtures

More Properties

More Properties

Install$ docker-compose exec php \ composer req \ doctrine/data-fixtures:^1.2 \ nelmio/alice:^3.0 \ logger \ theofidry/alice-data-fixtures:^1.0@beta \ hautelook/alice-bundle:^2.0@beta

Loading Fixtures

$ docker-compose exec php bin/console hautelook:fixtures:load

Admin

API Platform AdminSonata EasyAdmin-like but as a React PWA

Built on top of Admin On Rest (by Marmelab)

Material Design

Automatically generates the admin by parsing the Hydra API doc

Browse https://localhost:8001

Alternatively…

$ yarn add @api-platform/admin

From any React installation:

Minimal Implementation

Customizing the Admin

Clients Generator

React PWA Generator (default)SensioGeneratorBundle-like, 100% client-side

Rock solid stack

$ yarn global add @api-platform/client-generator

Twitter Bootstrap support + accessibility (ARIA roles)

Use ES2015’s fetch()

Parse Hydra API doc to generate files

The StackReact, ES2015+, JSX

React Router: client-side routing library

Redux: extensible container to manage the states of the app

Redux Form: forms

Redux Thunk: async actions (AJAX requests)

Optional: Twitter Bootstrap

Other SkeletonsReact Native: master branch (@mysiar)

TypeScript definitions: master branch (@soyuka)

Your preferred technology: Pull Requests very appreciated!

Angular: community (momenttech/lysis)

Vue.js: api-platform/client-generator#35 (@alOneh)

React Native

$ generate-api-platform-client \ http://localhost src/ \ —g react-native

Deploy in Clouds

Kubernetes & HelmK8S: « Production-Grade Container Orchestration », by Google

Powers Google Container Engine and Azure Container ServiceHelm: official K8S package manager (like APT or Homebrew), by MicrosoftFree software

Deploy in the CloudA Helm chart is provided with API Platform

# …Build and push the Docker images… # …Connect to your Kubernetes cluster…

$ helm install ./api/helm/api --name api

The project is deployed, managed, and scale!

One More Thing…

GraphQL Support

$ composer req webonyx/graphql-php

api-platform/core#1358 (@alanpoulain)

Thanks!Any questions?

api-platform/api-platform @ApiPlatform

https://api-platform.com