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). * A raw React, Redux and React Router code generator to bootstrap fully-featured Single Page Applications and native mobile apps thanks to the API documentation exposed by API Platform (client-side and server-side validation, on fields error, Twitter Bootstrap compatibility, a11y support...)

1. API PLATFORM 2.1
When Symfony meets React

2. Kévin Dunglas
Founder of Les-Tilleuls.coop
Symfony Core Team
API Platform creator
@dunglas

3. Les-Tilleuls.coop
Self-managed company since 2011
100% owned by employees
19 people, 97% growth in 2016
Hiring in Lille, London and Amiens: jobs@les-tilleuls.coop

4. The Web of 2017

6. 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. SPA: Rich and Fast Webapps
Downloaded and executed only 1 time (first page load)
Use asynchronous HTTP requests to retrieve and modify the raw
data (usually JSON) using an API
Huge ecosystem: React/Redux, Angular, Vue, Ember… and probably a
new one while I’m speaking
Holds the presentation logic (good-bye Twig)
Standalone apps built using JavaScript, HTML and CSS
Modernized stack: ES2015/16/17, Babel, Webpack, Yarn, Flow,
TypeScript…

8. 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. API Platform:
a Framework for 2017

10. 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

11. Features of API Platform 2.0

12. They Already Use API Platform

13. Getting
Started

14. Install
Get Docker
If you don’t already have it…

15. Install
Provided Docker images - PHP, Nginx, MySQL and Varnish (optional)
optimized for Symfony:
Create the database:
Download and extract the ZIP from api-platform.com
Browse http://localhost
$ docker-compose up
$ docker-compose exec php bin/console
doctrine:schema:create

17. A working
API
with just 1
PHP class

18. Your Turn!

19. Create your Own
Data Model
Write some PHPDoc (optional)
Add the @ApiResource annotation
Map its properties using the
Doctrine ORM (optional)
Update the database schema
$ docker-compose run web bin/console
doctrine:schema:update --force
Create a Plain Old PHP Object

20. Your API is
Ready!

21. 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. What’s this Format?
JSON-LD and Hydra

24. Credit: Martin Fowler
http://martinfowler.com/articles/richardsonMaturityModel.html

25. 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

32. 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

36. Data
Validation

37. Add
validation rules
Many validation constraints available
Ability to create custom constraints
Use the Symfony Validator
component

39. Relations

40. Add a Relation

42. Embedding Relations

43. Embedded Relations

44. How does it
Work?

45. REST
Wikipedia

46. 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.

47. 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

48. …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…)

49. 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

50. Event-Driven Architecture

51. Client-Side
Tooling

53. Foundation of the most popular JS ecosystem out there
A JavaScript library for building user interfaces
Created by Facebook
JSX: write markup inside code

55. Just like Composer, but for
JavaScript.
$ curl -o- -L https://yarnpkg.com/
install.sh | bash
$ brew install yarn
Mac users:

56. Create React App
Babel: a JavaScript compiler (ES2015+, JSX, Flow…)
An app skeleton generator
All tools and configs to get started:
Webpack: a module bundler (compile and package your JS, CSS…)
$ yarn global add create-react-app
$ create-react-app my-app
$ cd my-app
$ yarn start
ESLint: identify and report bugs and bad patterns in the code
Integrated web server, live reloading, development and debugging tools

58. A Basic React Component

60. Adding some Properties

61. Adding some Properties

62. Configuring CORS headers

63. Loading Some Fixtures

64. Loading some Fixtures
$ docker-compose exec php bin/console
hautelook:fixtures:load

65. The Admin
Generator

66. 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

67. API Platform Admin

69. Customizing the Admin

71. The CRUD
Generator

72. API Platform Generate CRUD
Like Sensio Generator Bundle, but 100% client-side
Rock solid stack
$ yarn global add api-platform-generate-crud
Twitter Bootstrap support + accessibility (ARIA roles)
Consume the API using ES2015’s fetch()
Automatically generate files by parsing the Hydra API doc

73. The Stack
React, ES2015+, JSX
React Router: client-side routing library
Redux: an extensible container to manage the states of the app
Redux Form: manage form states
Redux Thunk: asynchronous actions (AJAX requests)
Optional: Twitter Bootstrap

74. Redux
css-tricks.com

77. Register the Generated code

79. The API Client

80. Actions and Creators

81. Reducers

82. Components…

83. …Components Wiring

84. The Form

85. React Native Generator
Coming
Soon!

86. Thanks!
Any questions?
api-platform/api-platform @ApiPlatform
https://api-platform.com

87. Extra: More
Features!

88. 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

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

90. Filters

91. 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

92. Content Negotiation

93. Content Negotiation: HAL

94. Content Negotiation: XML

95. Events

96. The Schema Generator
Pick an existing data model from (resources and properties) from
schema.org:
$ docker-compose exec php
vendor/bin/schema generate-types src/ schema.yml

97. The Schema Generator

98. The Schema Generator
PHP classes, properties, getters and setters (PSR compliant)
Doctrine ORM mapping (including relations and mapped superclasses)
Validation constraints
Full PHPDoc extracted from schema human-readable descriptions
Mapping with schema.org's IRIs
The generator uses schema.org data to automatically bootstrap:
Relations between classes (supported by the API system too)

99. Rate this talk:
Follow me: @dunglas
joind.in/talk/7abdc