Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.

Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.

API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)

Learn how to use API Platform and Symfony to create super easily rich web and mobile applications relying on React (JS) for their presentational layer.

In just a few minutes, we will create a hypermedia API thanks to API Platform, Symfony and Doctrine. We will do it step by step, and the API will be 100% functional with support for pagination, validation, filters, resources embedding. The API will be automatically documented using Swagger and Hydra and beautiful user interface for developers will be available. HTTP cache, authorization and authentication can then be added in a breath.

Then, we will introduce all new client-side tools for API Platform:

* A fully featured JavaScript (Single Page App) administration system with a modern user interface (Material Design) ; built on top of Admin On Rest (React and Redux). This admin is builded dynamically thanks to the API discoverability (Hydra).

5.
APIs: the Heart of the New Web
Central point to access data
Encapsulate the business logic
Same features available for all channels:
webapps, native mobile apps, IoT, enterprise, customers and providers
information systems
APIs are the foundations of this new web

7.
Native Mobile Apps
Use HTTP requests to retrieve and modify the raw data
(usually JSON) using an API but can also work offline
Can be developed using the JS stack: React Native, NativeScript
(Angular) - good-bye Cordova
Downloaded from stores (App Store, Google Play)
Look’n’Feel consistent with the platform (iOS or Android)

9.
Goals of the Framework
Support modern open API formats
Create a rock-solid API-first system in minutes
Batteries included: everything to create and consume the API
Be able to override, extend and customize everything

19.
Out of the Box Features
JSON-LD + Hydra encoding (HAL, XML, YAML, CSV and raw
JSON can be enabled through config and you can add yours)
Swagger documentation
Fully featured JavaScript UI using Swagger UI (now built
with React) available for all URLs of the API
Create (POST), Retrieve (GET item and lists), Update
(PUT) and Delete (DELETE) operations
Pagination for lists (30 items per page), fully configurable

23.
Hydra
Make the API auto-discoverable by clients: all available
resources, properties, types and operations are described
Provide a standard format for common structures:
collections, paginations, filters, errors…
Documentation of the REST API in JSON-LD
Draft W3C

32.
Lexicon
Operation: action on an item or on a collection, usually through HTTP.
Internally a Symfony route.
DELETE /books/22
Resource: data exposed by the API, identified by an URL.
Internally a PHP object (an entity), externally a document
(JSON, HTML, XML…).
item: /books/22
collection: /books
Property: property of a resource. Internally, a class’ property. Externally
a document field (e.g. a JSON property). Typed.

33.
It’s Symfony…
Configured with the most popular libraries
for APIs
Compatible with all existing bundles
Use Doctrine ORM by default (but you can
use the persistence system you want)
Symfony full stack application

34.
…with something more
Properties’ types and relations are guessed using the Symfony
PropertyInfo component
The Metadata component guesses the API’s data
structure (resources and properties) form PHP classes
marked with @ApiResource
The structure is stored in an intermediate representation used to
serialize data and generate API docs (Hydra, Swagger…)

35.
And Even More…
Symfony routes are automatically registered for all operations on
collections and items. By default:
item: GET, PUT, DELETE
collection: GET, POST
Data is normalized and denormalized using hypermedia normalizers
(JSON-LD, Hydra, HAL…) for the Symfony Serializer Component

48.
API Platform Admin
Like Sonata or EasyAdminBundle but as a React SPA
Built on top of Admin On Rest (by Marmelab)
$ yarn add api-platform-admin
Material Design UI
Consume the API using AJAX
Automatically generate the admin by parsing the Hydra API doc

65.
New in API Platform 2.1
An API as fast as a static website: builtin invalidation-based HTTP
cache (Varnish and CloudFlare support)
Client-side tools to consume the API built with React
and Redux: an app generator and an admin
Advanced, per-operation authorization rules
Native sub-resources support (e.g. GET /users/1/comments)
A ton of Developer eXperience improvements and better docs

66.
Filters
Register the filter service (built-in or custom):
Map the filter to the resource

68.
Content Negotiation
Adding a new format is as simple as creating a new
Symfony Normalizer for it
Built-in formats: JSON-LD, HAL, XML, YAML, CSV, JSON, HTML (UI)
To retrieve a resource in a given format: add an Accept
HTTP header or use the format name as file extension