[SymfonyLive Paris slides] Symfony on steroids
: Vue.js, Mercure, Panther

Thanks to the new capabilities of the web platform (web components, Progressive Web Apps…) and the rise of modern JS libraries (Vue, React, Angular) almost all modern Symfony applications must leverage the frontend ecosystem.
Symfony 4 embed many gems that make it easy to integrate modern JavaScript within the framework, including the first component entirely written in JS: Webpack Encore.

In Symfony 4.2, another component that is super convenient for apps containing JS code has been released: Panther, a PHP library compatible with BrowserKit, that drives real web browsers to create end-to-end (E2E) tests with ease.
During this talk, I’ll show you how to cleanly integrate modern JavaScript code with Symfony and Twig and how to test such applications using Panther.

The examples will use VueJS, because it’s probably the easiest JS framework to get started with as a PHP developer, but all the tips and tricks will be applicable with other libraries such as React or Angular.

Finally, we’ll add some real time capabilities to our app using Mercure.rocks

Symfony and API Platform get “push” and real-time capabilities (Mercure protocol)

Mercure.rocks is a brand new protocol allowing to push data updates to web browsers and other HTTP clients in a convenient, fast, reliable and battery-efficient way. It is especially useful to publish real-time updates of resources served through web APIs, to reactive web and mobile apps.

Both Symfony and API Platform now have an official support for this protocol!

From the ground, Mercure has been designed to work with technologies not able to maintain persistent connections. It’s especially relevant in serverless environments, but is also convenient when using PHP or FastCGI scripts.

Mercure is basically a higher-level replacement for WebSocket. Unlike WebSocket, it is compatible with HTTP/2 and HTTP/3.
It has been designed with hypermedia APIs in mind, is auto-discoverable through the Web Linking RFC and is also compatible with GraphQL.
It natively supports authorization, reconnection in case of network issue (with refetching of missed events), subscribing to several topics, topics patterns (using templated URIs)…

Because it is built on top of Server-sent Events and plain old HTTP requests, it is already compatible with all modern browsers, and requires 0 client-side dependencies.

The protocol is open (available as an Internet Draft), and a reference open source implementation of the server written in Go is available.—

API Platform 2.4: MongoDB, Elasticsearch, Mercure, OpenAPI v3, CQRS with Symfony Messenger, HTTP/2 Push, improved React apps and more!

I’m pleased to announce the immediate availability of API Platform 2.4 beta! This new version is a huge one, that comes with a large set of new features.

For newcomers, API Platform is a full-stack framework to develop in a breath high quality API-driven projects. Among other (lower level) libraries, API Platform provides:

API Platform supports modern REST formats (JSON-LD/Hydra, JSONAPI, OpenAPI, HAL…) as well as GraphQL.

To create your initial project, you just have to describe the public structures of the data to expose through the API. API Platform will take care of exposing the web API and bootstrapping the clients to consume it: get started with API Platform.

Version 2.4 introduces a lot of very interesting new features. Here is the curated list:

  • Read and write support for MongoDB, the reference document database, including a lot of useful filters
  • Read support for Elasticsearch, the open source search and analytics engine, including filters for advanced search
  • Automatic “push” of updated resources from the server to the clients using the brand new Mercure protocol
  • Integration with the Symfony Messenger component to easily implement the CQRS pattern and to handle messages asynchronously (using brokers such as RabbitMQ, Apache Kafka, Amazon SQS or Google PubSub)
  • Ability to leverage the “Server Push” feature of HTTP/2 to preemptively send the relations of a requested resource to the client
  • Automatic availability of list filters in the React-based admin when a corresponding one is available API-side
  • Full compatibility with the version 3 of the OpenAPI specification format (formerly known as Swagger), and integration of the beautiful ReDoc documentation generator
  • Improved DTOs support
  • Per resource configuration of HTTP cache headers
  • Ability to easily use the Sunset HTTP header to advertise the removal date of deprecated endpoints

The full changelog is available on GitHub.

Let’s dive into these new features!

MongoDB support

MongoDB is one of the most popular NoSQL database. Native support for MongoDB was the most requested, and the most awaited API Platform feature! Sam Van der Borght started the work in March 2016. In July 2017 the Pull Request has been ported to API Platform v2 by Pablo Godinez helped by Hamza Amrouche (API Platform Core Team), Alexandre Delplace and others. Finally, since August 2018 Alan Poulain (API Platform Core Team and author of the GraphQL subsystem) produced a huge effort to finish and polish the patch.

With 114 commits and 234 files changed over almost 3 years. This is one of the biggest contributions to the project.

The MongoDB integration relies on Doctrine MongoDB ODM 2.0 (currently in beta). To enable this feature, just install and configure DoctrineMongoDBBundle. API Platform will autodetect it. Then, create a class mapped with MongoDB, and mark it as an API resource:

The support for MongoDB leverages the flexibility of API Platform: it has been implemented as a data provider and a data persister. Relations, pagination as well as boolean, date, numeric, order, range and search filters are also supported!

A big thanks to all contributors of this amazing feature, and to Andreas Braun, the maintainer of Doctrine MongoDB ODM, for the in-depth reviews!

Elasticsearch support

Elasticsearch is another very popular open-source data store. It allows to perform full-text searches and advanced analyzes on very large datasets. Orange has sponsored the development of an Elasticsearch data provider for API Platform, as well as some interesting search filters. The implementation has been realized by Baptiste Meyer (API Platform Core Team). Thanks to Orange, this feature is now available for everybody in API Platform 2.4.

To enable and configure the Elasticsearch support, refer to the official documentation. Then, a simple resource class corresponding to an Elasticsearch index is enough to benefit from the full power of API Platform:

Then, you can use an URL such as /tweets?message=foo to search using Elasticsearch.

Keep in mind that it’s your responsibility to populate your Elastic index. To do so, you can use Logstash, a custom data persister or any other mechanism that fits for your project (such as an ETL).

Baptiste also took this opportunity to improve the code handling the pagination. It is now a generic class used by all native data providers (Doctrine ORM, MongoDB and Elasticsearch), that you can reuse in your own.

Read and improve the Elasticsearch related documentation.

Real time update of client with Mercure

Mercure is a brand new protocol built on top of HTTP/2 and Server-sent Events (SSE). It’s a modern and high-level alternative to WebSocket (WebSocket is not compatible with HTTP/2). Mercure is especially useful to publish updates of resources served through web APIs in real time. It is natively supported by modern browsers (no required library nor SDK) and is very useful to update reactive web and mobile apps.

In version 2.4, I added Mercure support to the server component of API Platform and to the React and React Native app generators. The Docker Compose setup provided with API Platform has also been updated to provide a Mercure hub.

Configuring the framework to automatically dispatch updates to the currently connected clients is straightforward:

Thanks to the auto-discoverability capabilities of Mercure, the generated clients will automatically subscribe to updates, and render them when received:

Mercure in API Platform 2.4

Read and improve the Mercure subsystem documentation.

CQRS and async message handling with Symfony Messenger

Messenger is a new Symfony component created by Samuel Roze (Symfony and API Platform Core Team). It allows to dispatch messages using message queues (RabbitMQ, Kafka, Amazon SQS, Google PubSub…) and to handle them asynchronously. It provides a message bus that is very useful to implement the CQRS design pattern.

In API Platform 2.4, I added a convenient way to leverage the capabilities of Messenger. This new feature is particularly useful to create service-oriented (RPC-like) endpoints:

Thanks to the new messenger attribute, this object will automatically be dispatched to the bus. It can then be handled (synchronously or asynchronously) by a message handler:

That’s all you need to use Messenger!

Read and improve the Messenger subsystem documentation.

Server Push

HTTP/2 allows a server to pre-emptively send (or “push”) responses (along with corresponding “promised” requests) to a client in association with a previous client-initiated request. This can be useful when the server knows the client will need to have those responses available in order to fully process the response to the original request.

RFC 7540


This is capability is especially useful for REST APIs performance: it allows the server to instantly push the relations of the current resource that will be needed by the client, even before the client knows that it will have to issue an extra HTTP request.

API Platform 2.4 makes it very easy to push relations using HTTP/2:

Thanks to the push attribute, if the client asks for /books/1 the web server will directly send both the requested book resource and the related author (e.g. /authors/12) to the client.

For best performance, this feature should be used in conjunction with the built-in HTTP cache invalidation system (based on Varnish).

Read and improve the HTTP/2 Server Push subsystem documentation.

Filters detection in API Platform Admin

Jean-François Thuillier and Arnaud Oisel patched API Platform Admin and the underlying API Doc Parser JavaScript library to automatically detect and use filters exposed by the API spec (Hydra or OpenAPI). A video is worth thousand words:

Filters support in API Platform

The only code that you need to get such UI is the following:

The UI is built client-side dynamically by parsing the API spec. Awesome isn’t it?

Jean-François also added some convenient helpers to help customizing the admin, and Laury Sorriaux fixed a long standing limitation: it’s now possible to use the admin even with API not served at the root of the domain (such as /api).

Read and improve the docs of API Platform Admin.

OpenAPI v3 and ReDoc

API Platform 2.4 now fully support the new version of the OpenAPI (formerly Swagger) specification format (v3). It also leverages new features introduced by this version such as links.

To retrieve the OpenAPI specification of the API in version, use the following url: /docs.json?spec_version=3.

You can also dump the specification in JSON or in YAML format:

  • bin/console api:openapi:export --spec-version=3 # JSON
  • bin/console api:openapi:export --spec-version=3 --yaml # YAML

Also, in addition to Swagger UI, we added support for ReDoc, a beautiful, human-readable, API docs generator written in React:

ReDoc in API Platform 2.4

OpenAPI v3 support has been contributed by Anthony Grassiot (API Platform Core Team). ReDoc integration has been contributed by Grégoire Hébert. A big thanks to them!

Read and improve the OpenAPI related documentation.

Improved DTO support

Handling Data Transfer Objects was known to be difficult with API Platform. Back in October, the API Platform and the Sylius teams worked together to improve the API of the popular e-commerce solution… using API Platform (stay tuned!). During this workshop Antoine Bluchet and I worked on a new way to handle DTOs with API Platform:

The new input and output attributes allow to use specific classes respectively for the writeable and the readable representation of the resource.

As demonstrated in the example using Symfony Messenger, it’s also possible to set these new attributes to false to hint that the operation will take no inputs or no outputs.

These new attributes are automatically taken into account by all API Platform subsystems, including GraphQL, Hydra and OpenAPI.

Read and improve the DTO related documentation.

Cache HTTP headers

A convenient way has been to configure the HTTP cache per resource has been added by Daniel West:

With this config, API Platform will automatically generate the following Cache-Control HTTP header: Cache-Control: max-age=60, public, s-maxage=120. Thanks Daniel!

Read and improve the HTTP cache headers documentation.

Sunset HTTP header

The Sunset HTTP response header field indicates that a URI is likely to become unresponsive at a specified point in the future.

draft-wilde-sunset-header Internet Draft

This header plays well with the deprecation mechanism available since API Platform 2.3. Thanks to a nice contribution of Thomas Blank, it’s now easy to set this header using API Platform:

Read and improve the documentation related to API evolution.

Improved client generator

API Platform 2.4 is shipped with an improved version of the React and Vue.js client generators:

  • Relations are now always handled properly
  • HTML number fields as well as lists (arrays) are converted to the appropriate JSON type when sent to the API
  • API not server at the root of the domain (such /api) are now supported (thanks to Fabien Kovacic)

Download and promote API Platform

API Platform 2.4 is available for download on GitHub. While you are here, if you like the project, help us making it popular by starring it on GitHub!

[SymfonyCon slides] Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and Panther

Thanks to the new capabilities of the web platform (web components, Progressive Web Apps…) and the rise of modern JS libraries (Vue, React, Angular) almost all modern Symfony applications must leverage the frontend ecosystem.
Symfony 4 embed many gems that make it easy to integrate modern JavaScript within the framework, including the first component entirely written in JS: Webpack Encore.

In Symfony 4.2, another component that is super convenient for apps containing JS code has been released: Panther, a PHP library compatible with BrowserKit, that drives real web browsers to create end-to-end (E2E) tests with ease.
During this talk, I’ll show you how to cleanly integrate modern JavaScript code with Symfony and Twig and how to test such applications using Panther.

The examples will use VueJS, because it’s probably the easiest JS framework to get started with as a PHP developer, but all the tips and tricks will be applicable with other libraries such as React or Angular.

Finally, we’ll add some real time capabilities to our app using Mercure.rocks

HTTP/2: speed up your apps and dispatch real time updates (Symfony and API Platform’s features announcement)

HTTP/2 can improve the loading time of webpages up to 2 times. Did you know that it’s very easy to optimize your Symfony applications to leverage the advanced features of this new protocol?

This talk also contains the announcement of 3 new PHP packages:

Agenda:

  • a historically contextualized presentation of the different versions of the HTTP protocol;
  • a state of the protocol support in the PHP ecosystem;
  • a guide explaining how to serve your PHP and Symfony apps with h2, using Nginx, Apache and Docker;
  • many code samples showing how to use h2 to improve the loading time of your assets and APIs using the WebLink component and Twig
  • examples of how to take advantage of the protocol using the curl and Guzzle clients
  • the Mercure Protocol
  • Mercure x Symfony
  • Mercure x API Platform

Upcoming conferences and workshops

I’ll speak at several conferences until the end of 2018.

The topics will be varied: Panther, modern JavaScript, HTTP/2 and a brand new project to be announced (teasing: it’s written in Go, and it will be very helpful for serverless architectures!).

See you at:

I’ll also be available to chat, and I’ll carry a lot of API Platform goodies. Don’t hesitate to get in touch!

Introducing Symfony Panther: a Browser Testing and Web Scraping Library for PHP

Today, an introduction blog post to Panther was published on the Symfony blog! Panther is a new browser testing and web scraping library I contributed to the Symfony project,
In the blog post, I showcase how to use Symfony, API Platform and VueJS together to create a small but modern app, and how to test it on Panther:

API Platform: A Framework for API-driven Projects (DevTalks Bucharest slides)

Here the slide deck I presented during DevTalks Bucharest 2018.

It covers the main features of the API Platform framework: 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.

This is an updated version of the talk I did during the SymfonyLive London 2017 conference, demonstrating the latest features of API Platform, and adapted to target a broader, non-Symfony/PHP audience.

Be paid to improve API Platform during the Rails Girls Summer of Code

(french translation below)

API Platform (the API-driven Open Source framework I created) has been selected for the Rails Girls Summer of Code program!

The goal of the RCSOC is to improve the diversity in Open Source development. It allows groups of 2 women students to work full-time on a FOSS project (such as API Platform) during the summer. Students are paid and mentored.

Rails Girls Summer of Code is a global fellowship program for women and non-binary coders. Students receive a three-month scholarship to work on existing Open Source projects and expand their skill set.

Our worker cooperative, Les-Tilleuls.coop, will also support the program by providing money, coaches (including me) and desktops (in Lille, France):

In our company, we attempt as much as possible to support associations engaged in the fight against social inequalities, or involved in a better access to culture and respect of the environment. Since our foundation in 2011, we have always upheld diversity in Open Source. Thus, it’s no surprise that we support Rails Girls’s Summer of Code program.

If you’re interested in working 3 months with us to improve cutting-edge Open Source projects, don’t by shy, apply!


API Platform, le framework API-driven que nous développons, compte parmi les projets sélectionnés pour le Rails Girls Summer of Code de cette année !

Ce programme vise à favoriser la diversité dans le mode du logiciel libre. Il permet à des groupes de 2 étudiantes d’être payées durant l’été pour travailler (en binôme) sur des projets Open Source.

Notre SCOP Les-Tilleuls.coop participe également au programme en tant que sponsor, et va fournir des bureaux (à Euratechnologies, Lille) et des “coachs” afin d’accompagner les participantes :

Chez Les-Tilleuls.coop, nous tentons autant que possible d’accompagner des associations ou des entités engagées dans la lutte contre les inégalités sociales, l’accès à la culture, la formation, ou encore le respect de l’environnement.  Notre coopérative s’implique aussi dans une meilleure diversité dans le numérique et c’est donc avec une certaine évidence que nous apportons notre soutien au programme “Summer of Code 2018” organisé par l’association Rails Girls (RGSoC).

Si vous êtes intéressées pour travailler 3 mois sur des projets Open Source innovants, ne soyez pas timides, postulez !

API Platform 2.2: GraphQL, JSON API, React admin and PWA, Kubernetes instant deployment and many more new features


I’m glad to announce the immediate availability of API Platform 2.2 beta 1. This is a huge release that comes with a lot of exciting features including (but not limited too):

  • GraphQL and JSON API support
  • Symfony 4 / Flex integration
  • API Platform Admin integration (built with ReactJS and Admin On Rest)
  • ReactJS and Vue.js Progressive Web App generators integration (a React Native app generator is also available)
  • Revamped Docker containers for both PHP and JavaScript components, including out of the box support for HTTP2, HTTPS and a built-in invalidation-based cache mechanism using Varnish
  • The ability to deploy in seconds in any Kubernetes cluster
  • A new, super-easy, way to register filters through annotations
  • And literally dozens of developer experience, performance and quality improvements

V2.2 will definitely be the best version of API Platform, and is probably the most advanced “full-stack” solution to create API-driven projects. The paradigm shift introduced by this new version has been detailed in my talk during the SymfonyCon 2017.

It took 6 months and 483 commits from more than 60 contributors to craft this version. The documentation has also been dramatically improved, even if some work is still to do (upgrading the getting started guide and migrating all articles to the new Flex directory structure, finish to document some new features).

Thank you very much to all contributors of the project! You rock!

Let’s see more in depth all of these new features:

The New Distribution

The easiest way to get started with API Platform has always been to use the provided Docker setup. In version 2.2, the Docker configuration has been totally redesigned to fit with the new features provided by Symfony Flex and to integrate our JavaScript components.

To get started:

You get:

– An API skeleton following the Flex directory structure. Just add classes representing your public data model (see the example below) to get a working hypermedia and/or GraphQL web API.

The API is available in HTTP/2 and HTTPS thanks to the provided development proxy. It also automatically benefits from the API Platform’s built-in cache mechanism (the Varnish container is also provided). CORS headers are automatically configured. As you can see, the nice documentation is – of course – still available if you open the entrypoint in a browser.

– A ReactJS Progressive Web App skeleton with a fancy welcome page designed by Laury Sorriaux:

Execute  docker-compose exec client generate-api-platform-client to bootstrap a nice and fully-featured Progressive Web App (that can even work offline) using React, Redux and Bootstrap 4 and respecting accessibility recommendations.

To generate the PWA, the tool parses the API hypermedia description automatically generated in the Hydra format by the API component. This generator can work with any server exposing a Hydra documentation (done with API Platform or not).

The tool also has Vue.js, React Native and TypeScript skeletons thanks to the great contributions of Alain Hippolyte, Piotr Synowiec and Antoine Bluchet.

Read the full documentation of the API Platform Client Generator.

– Last but not least, a dynamically generated admin for the API is also automatically available:

Like the client generator, the API Platform Admin component also leverages the Hydra documentation to automatically guess the structure of the data exposed by the API.

Because it is built on top of React and Admin On Rest (aka React Admin), the UI is fully customizable.

Morgan Auchedé is the new maintainer of this component, and has greatly improved it since its initial release.

– In this version of API Platform, the MySQL container has been replaced by a Postgres one.

Instant Kubernetes Deployment

Kubernetes has become the most popular way to deploy, run and manage containers in production. Both Google Cloud Platform, Microsoft Azure and Amazon Web Services provide managed Kubernetes environment.

API Platform 2.2 contains a built-in Helm (the k8s package manager) chart to deploy with ease:

Your app is now up and running in a managed cluster! Read the related documentation to learn more about the Kubernetes support.

GraphQL Support

GraphQL is a query language for APIs designed by Facebook that is becoming a very popular alternative to the REST pattern. GraphQL support has been the most wanted feature for a while, it is now fully implemented!

The new GraphQL subsystem of API Platform now supports:

To enable the GraphQL support, you just have to install the GraphQL PHP library:

Then, create an API Platform entity, as usual:

Yes, both GraphQL and REST formats can be used for the same entity! Thanks to API Platform’s hypermedia support, you can even run a GraphQL request, then apply REST operations to the retrieved resources using their IRIs! The best of both worlds.

Your GraphQL API is ready! Browse https://localhost:8443/graphql :

There is a lot to say about the GraphQL support, how to use it in collaboration with REST and how to apply fine-grained configurations. I’ll write a follow-up post dedicated to it, stay tuned!

The GraphQL support is an important team work of Raoul Clais, Alan Poulain, Baptiste Meyer and myself.

JSON API Support

JSON API is a rising, well designed, hypermedia format. Unlike JSON-LD (the default format exposed by API Platform), it’s not a web standard; and it has less features but it is also simpler to learn and understand.

With API Platform 2.2, you don’t have to choose, you can have both! And even more because API Platform supports out of the box JSON-LD/Hydra, HAL, JSON API, YAML, XML, raw JSON and as we’ve seen just before, GraphQL.

To enable JSON API, add the following config:

Easy enough?

The JSON API support has been contributed by Hamza Amrouche, Hector Hurtarte and Baptiste Meyer.

Declaring API Filters Using Annotations

The API Platform filtering system is very powerful. It contains a lot of built-in filters and can easily be extended. However, until now, it wasn’t really easy to configure: it was requiring to declare services manually.

Because Symfony Flex is all about service autowiring and autoconfiguration, simplifying the filters configuration was a top priority task.

Hopefully, Antoine Bluchet created a nice way to do it using annotations:

Nothing more! You can now filter the collection of organizations by the name  property, both with REST and GraphQL!

In addition to these main features, a lot of other configuration options and various improvements have been introduced. Read the full changelogs for more information:

Help Us: Test, Star, Spread the Word!

If you have some existing API Platform projects, or if you want to give a try to the framework, please test this new version and report any problem on our GitHub issue tracker!

If you like API Platform, please tell the world and give us a star on GitHub.

Since API Platform 2.2, the Symfony Thanks command is also shipped with API Platform. Thanks to this tool, you can send a star to all the PHP libraries you use in your project (including API Platform) by simply running: docker-compose exec php composer thanks

If you want to learn API Platform, come to one of the workshops organized during these upcoming tech conferences: