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: A Framework for API-driven Projects

During this talk, I'll present the main features of API Platform. We will install the framework, design an API data model as a set of tiny plain old PHP classes and learn how to get:

* A 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 admin interface (a la Sonata / EasyAdmin – but 100% client-side) built with React
* Client apps skeletons: React/Redux, React Native, Vue.js, Angular…

Finally, we'll see ho to deploy the project in 1 command on Google Container Engine or any cloud with a Kubernetes.

  • Login to see the comments

API Platform: A Framework for API-driven Projects

  1. 1. Framework for API-driven Projects
  2. 2. @dunglas - Kévin Dunglas Founder of Symfony Core Team API Platform creator @dunglas
  3. 3. @dunglas - Self-managed company since 2011 100% owned by employees 25 people, 97% growth in 2016 Hiring in London, Paris and Lille:
  4. 4. or
  5. 5. The Web in 2018
  6. 6. @dunglas - APIs: the Heart of the New Web
  7. 7. @dunglas - 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…
  8. 8. @dunglas - 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…
  9. 9. @dunglas - 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)
  10. 10. @dunglas - 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
  11. 11. A Framework for the Modern Web
  12. 12. @dunglas - Goals Modern API formats: JSON-LD, GraphQL… A rock-solid API-first project in minutes Batteries included: create, consume and deploy the API Customizable, extensible, modular: config, events, decoration…
  13. 13. Getting Started
  14. 14. @dunglas - Docker All you need is (but it’s optional)
  15. 15. @dunglas - Install Download the latest release on or GitHub https://localhost $ docker-compose up
  16. 16. @dunglas - What’s Inside? Postgres Container 3: back office (dev) Container 2: generated front office Progressive Web App (dev) HTTP/2 and HTTPS proxy (dev) Container 1: API Server (PHP + Symfony Flex) Varnish cache (more later) dev ➡ CI ➡ prod
  17. 17. Describe the API Schema
  18. 18. @dunglas -
  19. 19. Map With the Database
  20. 20. @dunglas - Persistence Public and internal models can be different Work with any persistence layer: 2 interfaces to implement Experimental ElasticSearch and MongoDB built-in support RAD: built-in support for Doctrine ORM, 100% optional Compatible with CQRS and Event Sourcing
  21. 21. @dunglas -
  22. 22. Your 1st API is ready!
  23. 23. @dunglas - Out of the Box Features JSON-LD + Hydra formats But also… GraphQL, JSONAPI, HAL, YAML, CSV, XML, raw JSON… OpenAPI (aka Swagger) support API documentation (Swagger UI) POST, GET (item and lists), PUT, DELETE Pagination for lists (30 items per page), fully configurable
  24. 24. Data Validation
  25. 25. @dunglas - Validation groups Error levels Symfony Validator integration Custom validators
  26. 26. Filtering
  27. 27. @dunglas - Creating custom filters is easy 8 built-in filters, with different strategies
  28. 28. Hypermedia
  29. 29. @dunglas -
  30. 30. Embedding Relations
  31. 31. @dunglas -
  32. 32. @dunglas - Embedded Relations
  33. 33. Cache Layer (invalidation)
  34. 34. @dunglas - HTTP cache (invalidation) GET responses generated only 1 time, then served by Varnish (can work with CloudFlare and Fastly too) Responses are tagged with resources’s IDs they contain (including relations, embedded resources…) On write: cached responses containing stale data are purged Builtin, single config flag https://localhost:8444
  35. 35. Other Features
  36. 36. @dunglas - Other Features Deprecation / API evolution Extensible: compatible with all Symfony bundles Every part can be replaced (dependency injection) Authentification and authorization
  37. 37. JSON-LD and Hydra
  38. 38. @dunglas - 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
  39. 39. @dunglas - Hydra Allow to create auto-discoverable APIs: resources, properties, types, operations Standard for common API structures: collections, paginations, filters, errors… In-band hypermedia API docs W3C community group
  40. 40. Client-side tools
  41. 41. Admin
  42. 42. @dunglas - API Platform Admin Material Design back office interface Built on top of React Admin Hypermedia: parses Hydra docs 100% dynamic: no code generation https://localhost:444 100% client-side, 100% JS: work with any Hydra enabled API 100% customizable: bring your own React components!
  43. 43. @dunglas - Show Me the Code!
  44. 44. Clients Generator
  45. 45. @dunglas - React PWA Generator (default) Scaffolds a client-side apps Twitter Bootstrap support + accessibility (ARIA roles) Uses ES2015’s fetch() Parses Hydra API doc to generate files
 (experimental Swagger support) $ docker-compose exec client 
  46. 46. @dunglas - 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
  47. 47. @dunglas - Other Skeletons React Native (@mysiar) Your preferred technology: Pull Requests very appreciated! TypeScript definitions (@soyuka) Vue.js (@alOneh) Angular (momenttech/lysis)
  48. 48. @dunglas - React Native $ generate-api-platform-client —g react-native
  49. 49. Deploy in Clouds
  50. 50. @dunglas - Kubernetes & Helm k8s: « Production-Grade Container Orchestration » Google GKE / Amazon EKS / Azure AKS Helm: K8S package manager (like APT or Homebrew) Open Source
  51. 51. @dunglas - 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 scales!
  52. 52. GraphQL?
  53. 53. @dunglas - GraphQL Support $ docker-compose exec php 
 composer req webonyx/graphql-php
  54. 54. @dunglas - They Already Use API Platform
  55. 55. @dunglas - They Build API Platform 10 maintainers MIT licensed (Free Open Source Software) 150+ contributors 2.9k GitHub Stars 3000+ commits
  56. 56. Thanks! Any questions? api-platform/api-platform @ApiPlatform