API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
22 likes23,331 views
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...)
More Related Content
What's hot (20)
Similar to API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017) (20)
More from Les-Tilleuls.coop (11)
Recently uploaded (20)
API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017)
- 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: [email protected]
- 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
- 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
- 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
- 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
- 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
- 64. Loading some Fixtures $ docker-compose exec php bin/console hautelook:fixtures:load
- 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
- 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
- 77. Register the Generated code
- 79. The API Client
- 81. Reducers
- 82. Components…
- 84. The Form
- 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
- 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
- 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