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:

Download the last release
Decompress the archive and open a terminal in the resulting directory
Run docker-compose up

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:

helm upgrade --install ./api/helm/api \

--set php.repository=gcr.io/test-api-platform/php \

--set nginx.repository=gcr.io/test-api-platform/nginx \

--set secret=MyAppSecretKey \

--set postgresql.postgresPassword=MyPgPassword \

--set postgresql.persistence.enabled=true \

--set corsAllowUrl='^https?://[a-z\]*\.mywebsite.com$'

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:

100% of the main specification, including queries (read) and mutations (write)
100% of the GraphQL Relay Server Specification (= compatibility with both Relay and Apollo clients)
Pagination
Filters (built-in and custom ones, see below)
Validation
Access control rules
Generation of optimized SQL queries (automatic joins depending of requested data)
The GraphiQL UI

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

1	docker-compose exec php composer req webonyx/graphql-php

Then, create an API Platform entity, as usual:

<?php

namespace App\Entity;

use ApiPlatform\Core\Annotation\ApiResource;

use Doctrine\ORM\Mapping as ORM;

use Symfony\Component\Validator\Constraints as Assert;

/**

* An organization.

* @ApiResource

* @ORM\Entity

class Organization

{

/**

* @ORM\Id

* @ORM\Column(type="guid")

* @Assert\NotBlank

public $id;

/**

* @ORM\Column(type="text")

* @Assert\NotBlank

public $name;

}

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:

# config/packages/api_platform.yaml

api_platform:

# ...

formats:

# ...

jsonapi: ['application/vnd.api+json']

error_formats:

# ...

jsonapi: ['application/vnd.api+json']

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:

<?php

// api/src/Entity/Organization.php

namespace App\Entity;

use ApiPlatform\Core\Annotation\ApiFilter;

use ApiPlatform\Core\Bridge\Doctrine\Orm\Filter\SearchFilter;

/**

* ...

class Organization

{

// ...

/**

* @ApiFilter(SearchFilter::class)

* ...

public $name;

}

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:

Don’t miss the next opportunities to learn @ApiPlatform during a 1 day workshop:
– « Creating and deploying API Platform apps on @platformsh » / @APIdaysGlobal
– « Mastering the API Platform’s server component » / @symfony_live Paris (2 sessions) then Phantasialand

— Kévin Dunglas (@dunglas) January 23, 2018

HTTP/2, PHP and Symfony: a brief history of the protocol powering the web, and how to use it

Here are the slides I presented yesterday during the Paris Symfony Meetup.

On the menu: a brief history of HTTP, how to use it with PHP (server and client-side) and how to push with Symfony 4.

Learn more about Symfony’s HTTP/2 support in my in-depth presentation of the WebLink Component.

Symfony 4 Run-through (Forum PHP 2017)

Symfony is a framework broadly recognized for its quality, reliability and ability to drive large enterprise projects. But for the last few years, Symfony has also gained many features to develop faster, and to refactor more easily. Symfony 4 offers major improvements in this area that will deeply change the way we build applications.

Let’s talk about:

Symfony 4 main concepts and new features: micro-framework by default, 12-factor app, new components …
Flex, the new and powerful Symfony installer that can also automatically install and configure libraries and bundles
Symfony 4’s new simplified (and “bundle-less”) directory structure
The autowiring (now enabled by default), which allows the automatic injection of dependencies without having to write any configuration (no more YAML and XML)
The revamped controllers mechanism
Webpack Encore, the first Symfony component ever written in JavaScript, designed to easily integrate JavaScript and CSS tools in a PHP project
The official integrations of the Doctrine (ORM), API Platform (API) and EasyAdmin libraries (admin generator)
How to easily use Symfony 4 with Docker from dev to cloud deployment with a dedicated skeleton

You’ll learn how to leverage Symfony for large projects, prototypes, small applications and even your “weekend projects”, and how to migrate from smallest to the largest.

Recordings:

Symfony 4: HTTP/2 Push and Preloading

A few months ago, I’ve contributed a new component to Symfony: WebLink. By implementing cutting edge web standards, namely HTTP/2 Server Push and W3C’s Resource Hints, it brings great opportunities to boost webapp’s performance.

Thanks to Symfony WebLink, HTTP/2 (h2) servers are able to push resources to clients before they even know that they need them (think to CSS or JavaScript files, or relations of an API resource). WebLink also enables other very efficient optimisations that work with HTTP 1:

telling the browser to fetch or to render another webpage in the background ;
init early DNS lookups, TCP handshakes or TLS negotiations

Let’s discover how easy it is to use it and the real life benefits you can expect. The WebLink components is available since Symfony 3.3 (it means you can start to use it today), but in this article I’ll use Symfony 4 to celebrate the release of its first beta yesterday!

To get started, download my Docker installer and runtime for Symfony 4/Flex. It includes everything you need to run Symfony (PHP 7.1 configured properly for Symfony, and Composer) and a development reverse proxy (Apache) supporting HTTP/2 Server Push and HTTPS (most clients only support HTTP/2 over TLS).

Unzip the downloaded archive, open a shell in the resulting directory and run the following commands:

# Optional: use Symfony 4 beta (will default to Symfony 3.3 if you omit this line)

$ docker-compose build --build-arg STABILITY=beta app

# Install Flex and start the project

$ docker-compose up

Open https://localhost, if this nice page appears, you successfully created your first Symfony 4 project and are browsing it in HTTP/2!Let’s create a very simple homepage using the Twig templating engine. Because Symfony Flex starts as a micro framework, the first step is to install the library itself: docker-compose exec app composer req twig (run this in a new shell)

Flex is smart enough to download Twig, automatically register it into Symfony and enable Symfony features requiring the library. It also generates a base HTML5 layout in the templates/ directory (we will not use it but you should).

Now, download Bootstrap 4, extract the archive and copy the file dist/css/bootstrap.min.css in the public/ directory of our project. As you may know Symfony already has a nice integration with the upcoming version 4 of the most popular CSS framework.

Note: in a real project, you should use Yarn or NPM with Symfony Encore to install Bootstrap.

Now, it’s time to create the template of our homepage:

<!DOCTYPE html>

<html>

<head>

<title>Welcome!</title>

</head>

<body>

<h1>Hello World</h1>

<p class="lead">That's a lot of highly dynamic content, right?</p>

</main>

</body>

</html>

And finally, register our new template as the homepage using the builtin TemplateController:

# config/routes.yaml

index:

path: /

defaults:

_controller: 'Symfony\Bundle\FrameworkBundle\Controller\TemplateController::templateAction'

template: 'homepage.html.twig'

Clear the cache: docker-compose exec app bin/console c:c (this step will become optional when #24642 will be merged)

Refresh your browser, this nice HP should appear:

2 HTTP requests are issued by the browser, one for the homepage, and another one for Bootstrap.

But we know from the very beginning that the browser will need Bootstrap. Instead of waiting that the browser downloads the homepage, parses the HTML (notice “Initiator: Parser” in Chrome DevTools), encounters the reference to bootstrap.min.css and finally sends a new HTTP request, we could take benefit of the HTTP/2 Push feature to directly send both resources to the browser. Let’s do it!

Install the WebLink component: docker-compose exec app composer req weblink

As for Twig, Flex will automatically download and register this component into our app.

Now, update the template to use the preload Twig helper that leverages the WebLink component:

Reload the page:As you can see (Initiator: Push), both responses have been sent directly by the server. bootstrap.min.css has started to be received before the browser even requested it!

How does it works?

The WebLink component tracks Link HTTP headers to add to the response. When using the preload() helper, a Link header with a preload rel attribute is added to the response:

According to the Preload specification, when a HTTP/2 server detects that the original (HTTP 1) response contains this HTTP header, it will automatically trigger a push for the related file in the same HTTP/2 connection.

The Apache server provided by my Docker setup supports this feature. It’s why Bootstrap is pushed to the client! Popular proxy services and CDN including Cloudflare, Fastly and Akamai also leverage this feature. It means that you can push resources to clients and improve performance of your apps in production right now! All you need is Symfony 3.3+ and a compatible web server (the free version of Nginx doesn’t support Server Push) or CDN service.

If you want to prevent the push but let the browser preload the resource by issuing an early separate HTTP request, use the nopush attribute:

Before using HTTP/2 Push, be sure to read this great article about known issues, cache implications and the state of the support in popular browsers.

In addition to HTTP/2 Push and preloading, the WebLink component also provide some helpers to send Resource Hints to clients, the following helpers are available:

dns_prefetch: “indicate an origin that will be used to fetch required resources, and that the user agent should resolve as early as possible”
preconnect: “indicate an origin that will be used to fetch required resources. Initiating an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation, allows the user agent to mask the high latency costs of establishing a connection”
prefetch: “identify a resource that might be required by the next navigation, and that the user agent should fetch, such that the user agent can deliver a faster response once the resource is requested in the future”
prerender: “identify a resource that might be required by the next navigation, and that the user agent should fetch and execute, such that the user agent can deliver a faster response once the resource is requested in the future”

The component can also be used to send HTTP link not related to performance. For instance, any link defined in the HTML specification:

The previous snippet will result in this HTTP header being sent to the client:

Link: </index.jsonld>; rel="alternate",</bootstrap.min.css>; rel="preload"; nopush

You can also add links to the HTTP response directly from a controller or any service:

<?php

// src/Controller/BlogPostAction.php

namespace App\Controller;

use Fig\Link\GenericLinkProvider;

use Fig\Link\Link;

use Symfony\Component\HttpFoundation\Request;

use Symfony\Component\HttpFoundation\Response;

final class BlogPostAction

{

public function __invoke(Request $request): Response

{

$linkProvider = $request->attributes->get('_links', new GenericLinkProvider());

$request->attributes->set('_links', $linkProvider->withLink(new Link('preload', '/bootstrap.min.css')));

return new Response('Hello');

}

# app/config/routes.yaml

blog_post:

path: /post

defaults:

_controller: 'App\Controller\BlogPostAction'

Last but not least, as all Symfony components, WebLink can be used as a standalone PHP library:

<?php

require __DIR__.'/../vendor/autoload.php';

use Fig\Link\GenericLinkProvider;

use Fig\Link\Link;

use Symfony\Component\WebLink\HttpHeaderSerializer;

$linkProvider = (new GenericLinkProvider())

->withLink(new Link('preload', '/bootstrap.min.css'));

header('Link: '.(new HttpHeaderSerializer())->serialize($linkProvider->getLinks()));

echo 'Hello';

It is already as a standalone library by the Bolt CMS. While we’re speaking about interoperability, WebLink can deal with any link implementing PSR-13.

Thanks to Symfony WebLink, there is no excuses to not to switch to HTTP/2!

Learn more about these new features in the relevant Pull Requets: #22273 and #21478.

Your Symfony app is slow? Contact Les-Tilleuls.coop, we can help you make it fast!

Upcoming conferences

I’ll speak at a lot of conferences until the end of this year, mostly about API Platform and Symfony 4. Here is my schedule:

September, 22: Symfony Live London
API Platform – full stack framework reboot (english)

We’ll start by creating a fully-featured API in just a few minutes with API Platform, Symfony and Doctrine. The API will support pagination, data validation, access control, relation embedding, filters and error handling. It will expose many formats (JSON-LD, Hydra, JSONAPI, HAL, JSON, XML, YAML and CSV), will be documented with Swagger/OpenAPI and will have a nice UI done in React. Last but not least, the API will respond in a just few milliseconds thanks to its builtin invalidation based cache mechanism.

Then, we will use the ReactJS tools provided by the API Platform to consume the exposed Hydra documentation. In a few more minutes, we will get a Material Design administration interface (a la Sonata / EasyAdmin – but 100% client-side) built with React. Finally, we’ll discover 2 nice code generators to bootstrap a SPA (React, Redux and React Router) and iOS and Android mobile apps (React Native).

September, 27: Paris API
API Platform – full stack framework reboot (english)

October, 26: Forum PHP Paris (french)
Développer plus rapidement avec Symfony 4

Symfony est un framework universellement reconnu pour sa qualité, sa fiabilité et sa capacité à propulser les gros projets “entreprise”. Mais depuis quelques années, Symfony s’est également doté de nombreuses fonctionnalités permettant de développer toujours plus rapidement des applications web. Symfony 4 propose des améliorations majeures dans ce domaine grâce à une refonte profonde de la configuration par défaut du framework qui va changer profondément la manière dont nous développons des applications. Au cours de cette présentation, j’aborderai :

Les grands concepts et les nouveautés de Symfony 4: micr-framework par défaut, 12-factor app, nouveaux composants…
Flex, le nouvel installateur surpuissant de Symfony qui peut également installer et configurer automatiquement bibliothèques et bundles
La nouvelle structure de répertoire simplifiée (et sans bundle) de Symfony 4
L’autowiring (qui est désormais activé par défaut), qui permet l’injection automatique des dépendances sans avoir à écrire aucune configuration (fini le YAML et le XML)
Le système de contrôleurs, amélioré et assaini
“Encore”, le nouveau système de gestion des assets (JS, CSS) basé sur Webpack
Les intégrations officielles des bibliothèques Doctrine (ORM), API Platform (API Rest) et EasyAdmin (générateur d’admin)
Comment utiliser facilement Symfony 4 avec Docker du poste de dev jusqu’au déploiement dans le Cloud, grâce à un squelette dédié

A la fin de ce talk, vous saurez comment utiliser Symfony aussi bien pour vos gros projets que pour vos prototypes, vos petites applications et vos “week-end projects”, tout en vous permettant de basculer d’un mode à l’autre.

November, 14: SymfonyCon Cluj
Workshop: getting Started with API Platform (english)

API Plaftorm has become a very popular framework to build advanced and modern API-first web projects with Symfony. This tool will help you to ease the creation of your REST API web projects thanks to its powerful toolkit that includes the following features: schema.org support, linked data, data validation, pagination, filtering, sorting, etc.

November, 16: SymfonyCon Cluj
API Platform – full stack framework reboot (english)

November, 22: SemWeb.Pro (french)
API Platform : le web sémantique pour les masses

API Platform est un framework web qui propose des outils très simple à prendre en main pour créer et consommer des API Linked Data supportant nativement JSON-LD, Hydra et Schema.org.
Cette solution totalement open source (license MIT) est basée sur les technologies familière pour les développeurs web : PHP (et le framework Symfony) et JavaScript (et ReactJS).

Nous découvrirons comment importer un modèle de données depuis Schema.org, l’exposer via une API web compatible Linked Data (via JSON-LD) et l’adapter grâce au framework Symfony.

Cette API sera 100% fonctionnelle, et elle supportera la validation, la pagination, les filtres, l’imbrication de ressources, sera documentée via Swagger et Hydra et disposera d’une interface graphique orientée développeur.

Nous découvrirons ensuite les outils frontend du projet :

Un système d’administration complet (à la Sonata), construit automatiquement en découvrant l’API et bénéficiant d’une interface moderne (Material Design) basée sur React et Redux
Un générateur de code permettant de créer des interfaces webapp ReactJS et applications mobiles React Native.

More TBA.

Kévin Dunglas

Software architect and API expert

Tagged with PHP

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

The New Distribution

Instant Kubernetes Deployment

GraphQL Support

JSON API Support

Declaring API Filters Using Annotations

Help Us: Test, Star, Spread the Word!

HTTP/2, PHP and Symfony: a brief history of the protocol powering the web, and how to use it

Symfony 4 Run-through (Forum PHP 2017)

Symfony 4: HTTP/2 Push and Preloading

How does it works?

Upcoming conferences

The New Distribution

Instant Kubernetes Deployment

GraphQL Support

JSON API Support

Declaring API Filters Using Annotations

Help Us: Test, Star, Spread the Word!

Partager :

Partager :

Partager :

How does it works?

Partager :

Partager :