Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
API PLATFORM
Full Stack Framework Resurrection
Kévin Dunglas
Founder of Les-Tilleuls.coop
Symfony Core Team
API Platform creator
@dunglas
Les-Tilleuls.coop
Self-managed company since 2011
100% owned by employees
25 people, 97% growth in 2016
Hiring in London, ...
The Web of 2017
APIs: the Heart of the New Web
Central point to access data
Encapsulate the business logic
Same features available everywh...
Progressive Web Apps
Downloaded only 1 time, works offline!
Sends async HTTP requests to the API
Huge ecosystem: React, An...
Native Mobile Apps
Sync data by sending HTTP requests to the API
JS stack:
React Native, NativeScript
Downloaded from stor...
Cloud Native Projects
Software built, tested and deployed continuously
Rich and open ecosystem:
Docker, Kubernetes, Mesos,...
A Framework
for the Modern Web
Goals
Modern API formats
A rock-solid API-first project in minutes
Batteries included:
create, consume and deploy the API
...
They already Use API Platform
Getting
Started
Get Docker
If 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 l...
Upcoming Changes
HTTP/2 and HTTPS dev proxy
Containers for JS dev 🤔 🤗
Symfony Standard Edition Symfony Flex
Simplified dir...
Too Much?
Go Micro with Flex
Browse http://localhost:8000
$ composer create-p symfony/skeleton api
$ cd api
$ composer req api
$ mak...
Your Turn!
Create your
Class
PHPDoc extraction (optional)
The hook:@ApiResource
XML and YAML also supported
Doctrine integration (opt...
Your 1st API
is ready!
Out of the Box Features
JSON-LD + Hydra formats
But also… JSONAPI, HAL, XML, YAML, CSV and raw JSON…
OpenAPI (aka Swagger)...
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 c...
Other
Features
How does it
Work?
Core Library
Distribution
Compatible with all existing bundles
Shipped with Doctrine ORM
(soft dependency)
Flex app
Automatic route reg...
Metadata Subsystem
Properties’ types and relations extracted with Symfony PropertyInfo
Guesses API’s structure (resources ...
Event-Driven Architecture
JSON-LD and Hydra
Credit: Martin Fowler
http://martinfowler.com/articles/richardsonMaturityModel.html
JSON-LD
Standardized hypermedia format: W3C recommandation (2014)
Easy to use: a standard JSON document with some specials...
Hydra
auto-discoverable API:
resources, properties, types, operations
Standardize common API structures:
collections, pagi...
Client-side
tools
Create React App
Babel: JavaScript compiler (ES2015+, JSX, Flow…)
App skeleton generator
All tools and configs to get star...
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-d...
Loading Fixtures
$ docker-compose exec php bin/console
hautelook:fixtures:load
Admin
API Platform Admin
Sonata EasyAdmin-like but as a React PWA
Built on top of Admin On Rest (by Marmelab)
Material Design
Au...
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-platfor...
The Stack
React, ES2015+, JSX
React Router: client-side routing library
Redux: extensible container to manage the states o...
Other Skeletons
React Native: master branch (@mysiar)
TypeScript definitions: master branch (@soyuka)
Your preferred techn...
React Native
$ generate-api-platform-client 
http://localhost src/ 
—g react-native
Deploy in
Clouds
Kubernetes & Helm
K8S: « Production-Grade Container Orchestration », by Google
Powers Google Container Engine and Azure Co...
Deploy in the Cloud
A Helm chart is provided with API Platform
# …Build and push the Docker images…
# …Connect to your Kub...
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
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
Upcoming SlideShare
Loading in …5
×

API Platform: Full Stack Framework Resurrection

9,186 views

Published on

Install API Platform. Design the API data model as a set of tiny plain old PHP classes. Instantly get:

- Fully featured dev environment with Symfony Flex and React containers, HTTP/2 and HTTPS support and a cache proxy
- Pagination, data validation, access control, relation embedding, filters and error handling
- Support for modern REST API formats: JSON-LD/Hydra, OpenAPI/Swagger, JSONAPI, HAL, JSON...
- GraphQL support
- An API responding in a just few milliseconds thanks to the builtin invalidation based cache mechanism
- A dynamically created Material Design admini interface (a la Sonata / EasyAdmin - but 100% client-side) built with React.
- Client apps skeletons: React/Redux, React Native, Vue.js, Angular...

Finally, deploy in 1 command on Google Container Engine or any cloud with a Kubernetes instance with the provided Helm chart.

Yes, you just need is describing a data model, just a few line of codes to get all of that!

Published in: Software
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

API Platform: Full Stack Framework Resurrection

  1. 1. API PLATFORM Full Stack Framework Resurrection
  2. 2. Kévin Dunglas Founder of Les-Tilleuls.coop Symfony Core Team API Platform creator @dunglas
  3. 3. Les-Tilleuls.coop Self-managed company since 2011 100% owned by employees 25 people, 97% growth in 2016 Hiring in London, Paris and Lille: jobs@les-tilleuls.coop
  4. 4. The Web of 2017
  5. 5. 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…
  6. 6. 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…
  7. 7. 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)
  8. 8. 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
  9. 9. A Framework for the Modern Web
  10. 10. 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…
  11. 11. They already Use API Platform
  12. 12. Getting Started
  13. 13. Get Docker If you don’t have it yet…
  14. 14. Install Grab a release on GitHub Browse https://localhost $ docker-compose up
  15. 15. Just 1 class
  16. 16. 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
  17. 17. 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
  18. 18. Too Much?
  19. 19. Go Micro with Flex Browse http://localhost:8000 $ composer create-p symfony/skeleton api $ cd api $ composer req api $ make serve
  20. 20. Your Turn!
  21. 21. Create your Class PHPDoc extraction (optional) The hook:@ApiResource XML and YAML also supported Doctrine integration (optional) $ docker-compose exec php bin/console doctrine:schema:update --force Plain Old PHP Object
  22. 22. Your 1st API is ready!
  23. 23. Out of the Box Features JSON-LD + Hydra formats But 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
  24. 24. Data Validation
  25. 25. Symfony Validation groups Error levels Symfony Validator integration
  26. 26. Relations
  27. 27. Class with a Relation
  28. 28. Embedding Relations
  29. 29. Embedded Relations
  30. 30. HTTP Cache (invalidation)
  31. 31. 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
  32. 32. Other Features
  33. 33. How does it Work?
  34. 34. Core Library
  35. 35. Distribution Compatible with all existing bundles Shipped with Doctrine ORM (soft dependency) Flex app Automatic route registration
  36. 36. 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
  37. 37. Event-Driven Architecture
  38. 38. JSON-LD and Hydra
  39. 39. Credit: Martin Fowler http://martinfowler.com/articles/richardsonMaturityModel.html
  40. 40. JSON-LD Standardized 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
  41. 41. Hydra auto-discoverable API: resources, properties, types, operations Standardize common API structures: collections, paginations, filters, errors… In-band API doc Draft W3C
  42. 42. Client-side tools
  43. 43. 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
  44. 44. Data Fixtures
  45. 45. More Properties
  46. 46. More Properties
  47. 47. 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
  48. 48. Loading Fixtures $ docker-compose exec php bin/console hautelook:fixtures:load
  49. 49. Admin
  50. 50. API Platform Admin Sonata 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
  51. 51. Alternatively… $ yarn add @api-platform/admin From any React installation:
  52. 52. Minimal Implementation
  53. 53. Customizing the Admin
  54. 54. Clients Generator
  55. 55. 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
  56. 56. The Stack React, 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
  57. 57. Other Skeletons React 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)
  58. 58. React Native $ generate-api-platform-client http://localhost src/ —g react-native
  59. 59. Deploy in Clouds
  60. 60. Kubernetes & Helm K8S: « Production-Grade Container Orchestration », by Google Powers Google Container Engine and Azure Container Service Helm: official K8S package manager (like APT or Homebrew), by Microsoft Free software
  61. 61. Deploy in the Cloud A 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!
  62. 62. One More Thing…
  63. 63. GraphQL Support $ composer req webonyx/graphql-php api-platform/core#1358 (@alanpoulain)
  64. 64. Thanks! Any questions? api-platform/api-platform @ApiPlatform https://api-platform.com

×