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 2.1
When Symfony meets React
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
19 people, 97% growth in 2016
Hiring in Lille, L...
The Web of 2017
APIs: the Heart of the New Web
Central point to access data
Encapsulate the business logic
Same features available for all...
SPA: Rich and Fast Webapps
Downloaded and executed only 1 time (first page load)
Use asynchronous HTTP requests to retriev...
Native Mobile Apps
Use HTTP requests to retrieve and modify the raw data
(usually JSON) using an API but can also work off...
API Platform:
a Framework for 2017
Goals of the Framework
Support modern open API formats
Create a rock-solid API-first system in minutes
Batteries included:...
Features of API Platform 2.0
They Already Use API Platform
Getting
Started
Install
Get Docker
If you don’t already have it…
Install
Provided Docker images - PHP, Nginx, MySQL and Varnish (optional)
optimized for Symfony:
Create the database:
Down...
A working
API
with just 1
PHP class
Your Turn!
Create your Own
Data Model
Write some PHPDoc (optional)
Add the @ApiResource annotation
Map its properties using the
Doctr...
Your API is
Ready!
Out of the Box Features
JSON-LD + Hydra encoding (HAL, XML, YAML, CSV and raw
JSON can be enabled through config and you c...
What’s this Format?
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
Make the API auto-discoverable by clients: all available
resources, properties, types and operations are described
P...
Data
Validation
Add
validation rules
Many validation constraints available
Ability to create custom constraints
Use the Symfony Validator
...
Relations
Add a Relation
Embedding Relations
Embedded Relations
How does it
Work?
REST
Wikipedia
Lexicon
Operation: action on an item or on a collection, usually through HTTP.
Internally a Symfony route.
DELETE /books/2...
It’s Symfony…
Configured with the most popular libraries
for APIs
Compatible with all existing bundles
Use Doctrine ORM by...
…with something more
Properties’ types and relations are guessed using the Symfony
PropertyInfo component
The Metadata com...
And Even More…
Symfony routes are automatically registered for all operations on
collections and items. By default:
item: ...
Event-Driven Architecture
Client-Side
Tooling
Foundation of the most popular JS ecosystem out there
A JavaScript library for building user interfaces
Created by Faceboo...
Just like Composer, but for
JavaScript.
$ curl -o- -L https://yarnpkg.com/
install.sh | bash
$ brew install yarn
Mac users:
Create React App
Babel: a JavaScript compiler (ES2015+, JSX, Flow…)
An app skeleton generator
All tools and configs to get...
A Basic React Component
Adding some Properties
Adding some Properties
Configuring CORS headers
Loading Some Fixtures
Loading some Fixtures
$ docker-compose exec php bin/console
hautelook:fixtures:load
The Admin
Generator
API Platform Admin
Like Sonata or EasyAdminBundle but as a React SPA
Built on top of Admin On Rest (by Marmelab)
$ yarn ad...
API Platform Admin
Customizing the Admin
The CRUD
Generator
API Platform Generate CRUD
Like Sensio Generator Bundle, but 100% client-side
Rock solid stack
$ yarn global add api-platf...
The Stack
React, ES2015+, JSX
React Router: client-side routing library
Redux: an extensible container to manage the state...
Redux
css-tricks.com
Register the Generated code
The API Client
Actions and Creators
Reducers
Components…
…Components Wiring
The Form
React Native Generator
Coming
Soon!
Thanks!
Any questions?
api-platform/api-platform @ApiPlatform
https://api-platform.com
Extra: More
Features!
New in API Platform 2.1
An API as fast as a static website: builtin invalidation-based HTTP
cache (Varnish and CloudFlare ...
Filters
Register the filter service (built-in or custom):
Map the filter to the resource
Filters
Content Negotiation
Adding a new format is as simple as creating a new
Symfony Normalizer for it
Built-in formats: JSON-LD...
Content Negotiation
Content Negotiation: HAL
Content Negotiation: XML
Events
The Schema Generator
Pick an existing data model from (resources and properties) from
schema.org:
$ docker-compose exec ph...
The Schema Generator
The Schema Generator
PHP classes, properties, getters and setters (PSR compliant)
Doctrine ORM mapping (including relation...
Rate this talk:
Follow me: @dunglas
joind.in/talk/7abdc
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
Upcoming SlideShare
Loading in …5
×

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

15,985 views

Published on

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

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. API PLATFORM 2.1 When Symfony meets React
  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 19 people, 97% growth in 2016 Hiring in Lille, London and Amiens: 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 for all channels: webapps, native mobile apps, IoT, enterprise, customers and providers information systems APIs are the foundations of this new web
  6. 6. 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…
  7. 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)
  8. 8. API Platform: a Framework for 2017
  9. 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
  10. 10. Features of API Platform 2.0
  11. 11. They Already Use API Platform
  12. 12. Getting Started
  13. 13. Install Get Docker If you don’t already have it…
  14. 14. 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
  15. 15. A working API with just 1 PHP class
  16. 16. Your Turn!
  17. 17. 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
  18. 18. Your API is Ready!
  19. 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
  20. 20. What’s this Format? JSON-LD and Hydra
  21. 21. Credit: Martin Fowler http://martinfowler.com/articles/richardsonMaturityModel.html
  22. 22. 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
  23. 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
  24. 24. Data Validation
  25. 25. Add validation rules Many validation constraints available Ability to create custom constraints Use the Symfony Validator component
  26. 26. Relations
  27. 27. Add a Relation
  28. 28. Embedding Relations
  29. 29. Embedded Relations
  30. 30. How does it Work?
  31. 31. REST Wikipedia
  32. 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. 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. 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. 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
  36. 36. Event-Driven Architecture
  37. 37. Client-Side Tooling
  38. 38. Foundation of the most popular JS ecosystem out there A JavaScript library for building user interfaces Created by Facebook JSX: write markup inside code
  39. 39. Just like Composer, but for JavaScript. $ curl -o- -L https://yarnpkg.com/ install.sh | bash $ brew install yarn Mac users:
  40. 40. 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
  41. 41. A Basic React Component
  42. 42. Adding some Properties
  43. 43. Adding some Properties
  44. 44. Configuring CORS headers
  45. 45. Loading Some Fixtures
  46. 46. Loading some Fixtures $ docker-compose exec php bin/console hautelook:fixtures:load
  47. 47. The Admin Generator
  48. 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
  49. 49. API Platform Admin
  50. 50. Customizing the Admin
  51. 51. The CRUD Generator
  52. 52. 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
  53. 53. 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
  54. 54. Redux css-tricks.com
  55. 55. Register the Generated code
  56. 56. The API Client
  57. 57. Actions and Creators
  58. 58. Reducers
  59. 59. Components…
  60. 60. …Components Wiring
  61. 61. The Form
  62. 62. React Native Generator Coming Soon!
  63. 63. Thanks! Any questions? api-platform/api-platform @ApiPlatform https://api-platform.com
  64. 64. Extra: More Features!
  65. 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. 66. Filters Register the filter service (built-in or custom): Map the filter to the resource
  67. 67. Filters
  68. 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
  69. 69. Content Negotiation
  70. 70. Content Negotiation: HAL
  71. 71. Content Negotiation: XML
  72. 72. Events
  73. 73. 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
  74. 74. The Schema Generator
  75. 75. 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)
  76. 76. Rate this talk: Follow me: @dunglas joind.in/talk/7abdc

×