api platform: full stack framework resurrection
TRANSCRIPT
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…
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