November 3, 2017November 3, 2017 by Kévin Dunglas

API Platform Admin 0.2: an admin in 1 minute for your API (React Progressive Web App)

API Platform, English, JavaScript & HTML5, PHP, Symfony
admin, Admin On Rest, API, GraphQL, HATEOAS, Hydra, hypermedia, Javascript, Material Design, React
1 Comment

The version 0.2 of the API Platform‘s admin component has just been released!

This nice tool allows to automatically and dynamically build a fully featured administration interface (CRUD, pagination, relations…) for any API supporting the Hydra hypermedia vocabulary (more formats supported soon, see at the end of this article). 0 line of code required!

API Platform Admin is built with React on top of the famous Admin On Rest library as a Progressive Web App.

Let’s discover the bunch of new features that this version brings.

Getting Started

Assuming that you have an API exposing a Hydra documentation, you just have to initialize the following React component to get your admin:

import React from 'react';
import { HydraAdmin } from '@api-platform/admin';

export default () => <HydraAdmin entrypoint="https://api.example.com"/>;

import React from 'react';

import { HydraAdmin } from '@api-platform/admin';

export default () => <HydraAdmin entrypoint="https://api.example.com"/>;

For instance, create a new app with Facebook’s create-react-app, replace the content of src/App.js with the previous snippet and run yarn add @api-platform/admin. You’re done!

If you get an error related to multiple versions of React being loaded, just remove the react and react-dom packages from your project’s package.json and run yarn install again.

If you don’t have a JSON-LD / Hydra API yet, here is the code of the one I’ll use in the following examples. This API has been created using the API Platform’s distribution:

<?php

namespace App\Entity;

use ApiPlatform\Core\Annotation\ApiProperty;
use ApiPlatform\Core\Annotation\ApiResource;
use Doctrine\Common\Collections\ArrayCollection;
use Doctrine\ORM\Mapping as ORM;

/**
 * @ORM\Entity
 * @ApiResource
 */
class Person
{
    /**
     * @ORM\Id
     * @ORM\GeneratedValue
     * @ORM\Column(type="integer")
     */
    private $id;

    /**
     * @ORM\Column
     * @ApiProperty(iri="http://schema.org/name")
     */
    public $name;

    /**
     * @var Greeting[]
     *
     * @ORM\OneToMany(targetEntity="Greeting", mappedBy="person", cascade={"persist"})
     */
    public $greetings;

    public function __construct()
    {
        $this->greetings = new ArrayCollection();
    }

    public function getId()
    {
        return $this->id;
    }

    public function addGreeting(Greeting $greeting)
    {
        $greeting->person = $this;
        $this->greetings->add($greeting);
    }

    public function removeGreeting(Greeting $greeting)
    {
        $greeting->person = null;
        $this->greetings->removeElement($greeting);
    }
}

<?php

namespace App\Entity;

use ApiPlatform\Core\Annotation\ApiProperty;

use ApiPlatform\Core\Annotation\ApiResource;

use Doctrine\Common\Collections\ArrayCollection;

use Doctrine\ORM\Mapping as ORM;

/**

* @ORM\Entity

* @ApiResource

class Person

{

/**

* @ORM\Id

* @ORM\GeneratedValue

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

private $id;

/**

* @ORM\Column

* @ApiProperty(iri="http://schema.org/name")

public $name;

/**

* @var Greeting[]

* @ORM\OneToMany(targetEntity="Greeting", mappedBy="person", cascade={"persist"})

public $greetings;

public function __construct()

{

$this->greetings = new ArrayCollection();

}

public function getId()

{

return $this->id;

}

public function addGreeting(Greeting $greeting)

{

$greeting->person = $this;

$this->greetings->add($greeting);

}

public function removeGreeting(Greeting $greeting)

{

$greeting->person = null;

$this->greetings->removeElement($greeting);

}

<?php

namespace App\Entity;

use ApiPlatform\Core\Annotation\ApiProperty;
use ApiPlatform\Core\Annotation\ApiResource;
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Validator\Constraints as Assert;

/**
 * @ApiResource
 * @ORM\Entity
 */
class Greeting
{
    /**
     * @ORM\Id
     * @ORM\GeneratedValue
     * @ORM\Column(type="integer")
     */
    private $id;

    /**
     * @ORM\Column
     * @Assert\NotBlank
     * @ApiProperty(iri="http://schema.org/name")
     */
    public $name = '';

    /**
     * @ORM\ManyToOne(targetEntity="Person", inversedBy="greetings")
     */
    public $person;

    public function getId(): ?int
    {
        return $this->id;
    }
}

<?php

namespace App\Entity;

use ApiPlatform\Core\Annotation\ApiProperty;

use ApiPlatform\Core\Annotation\ApiResource;

use Doctrine\ORM\Mapping as ORM;

use Symfony\Component\Validator\Constraints as Assert;

/**

* @ApiResource

* @ORM\Entity

class Greeting

{

/**

* @ORM\Id

* @ORM\GeneratedValue

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

private $id;

/**

* @ORM\Column

* @Assert\NotBlank

* @ApiProperty(iri="http://schema.org/name")

public $name = '';

/**

* @ORM\ManyToOne(targetEntity="Person", inversedBy="greetings")

public $person;

public function getId(): ?int

{

return $this->id;

}

Yes, you just need those two tiny PHP classes to get a hypermedia API. Learn more about the API component by reading the getting started guide. But, really, any API with a Hydra documentation will do the job regardless of the server-side programming language.

Native Support for to-Many Relations

API Platform Admin supports to-one relations since its very first release. However it was mandatory to customize the component used for to-many relations. This isn’t the case anymore. Our API documentation parser gained support for cardinalities and can now extract them if the API documentation includes OWL’s maxCardinality properties.

If no cardinality is provided, the admin will use a to-many widget by default.

Thanks to this new feature, here is how the edition screen of the Person resource looks like this:

The admin is able to guess that the Person resource is related to many Greeting ones and use the appropriate Admin On Rest component.

Detection of More Schema.org’s Types (name, url and email)

API Platform Admin is able to guess the widget to use depending of the type of a resource’s property. It supports:

Numbers (http://www.w3.org/2001/XMLSchema#float and http://www.w3.org/2001/XMLSchema#integer ranges)
Dates (http://www.w3.org/2001/XMLSchema#date and http://www.w3.org/2001/XMLSchema#dateTime ranges)
Booleans (http://www.w3.org/2001/XMLSchema#boolean range)
And of course text fields

In this new release, Admin also supports some types of the popular Schema.org vocabulary:

As shown in the previous screenshots (e.g. Greetings select box), if a property has the type http://schema.org/name, this property will be used instead of the ID when displaying this relation
If a property has the type http://schema.org/url, the URL will be clickable when displayed in the admin
If a property has the type http://schema.org/email, the HTML input will be of type email and a basic validation will occur (this was already working in v0.1)

Support for Read-only Resources

The version 0.1 wasn’t able to deal with read-only resource (no POST nor PUT operation). We have improved the API doc parser to support owl:equivalentClass properties. Now, if the API documentation provide those properties, the admin will be builded even if the resource is read-only (of course in this case you will only be able to browse resources, and not to edit them).

Easier and Deeper Customization

Morgan Auchedé did an excellent work to make the Admin fully and easily customizable. You can now override any generated React component by a custom one, or one from Admin On Rest, or from MUI React. You can just replace (or ad, or remove) a specific input or field. But you can also replace a whole list, a show view, a creation or edition form or a remove button.

Here is an example of full customization, courtesy of Morgan:

import parseHydraDocumentation from '@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation';
import { Datagrid, EditButton, ImageField, List, ShowButton, TextField } from 'admin-on-rest';
import React from 'react';
import SingleImageInput from '../components/inputs/single-image-input';

export default entrypoint => parseHydraDocumentation(entrypoint)
    .then(
        ({ api }) => {
            // Customize "Gallery" resource
            const gallery = api.resources.find(({ name }) => 'galleries' === name);
            gallery.list = (props) => (
                <List {...props}>
                    <Datagrid>
                        <TextField source="id"/>
                        {props.options.fieldFactory(props.options.resource.fields.find(({ name }) => name === 'name'))}
                        {props.options.fieldFactory(props.options.resource.fields.find(({ name }) => name === 'mainImage'))}
                        {props.hasShow && <ShowButton />}
                        {props.hasEdit && <EditButton />}
                    </Datagrid>
                </List>
            );

            // Customize "images" field
            const images = gallery.fields.find(({ name }) => 'images' === name);
            images.field = props => (
                <ImageField {...props} src="contentUrl"/>
            );
            images.input = props => (
                <SingleImageInput {...props} accept="image/*" multiple={true}>
                    <ImageField source="contentUrl"/>
                </SingleImageInput>
            );
            images.input.defaultProps = {
                addField: true,
                addLabel: true,
            };

            // Customize "mainImage" field
            const mainImage = gallery.fields.find(({ name }) => 'mainImage' === name);
            mainImage.field = props => (
                <ImageField {...props} source={`${props.source}.contentUrl`}/>
            );
            mainImage.input = props => (
                <SingleImageInput {...props} accept="image/*" multiple={false}>
                    <ImageField source="contentUrl"/>
                </SingleImageInput>
            );
            mainImage.input.defaultProps = {
                addField: true,
                addLabel: true,
            };
            mainImage.input.defaultProps = {
                addField: true,
                addLabel: true,
            };

            return { api };
        },
    );

import parseHydraDocumentation from '@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation';

import { Datagrid, EditButton, ImageField, List, ShowButton, TextField } from 'admin-on-rest';

import React from 'react';

import SingleImageInput from '../components/inputs/single-image-input';

export default entrypoint => parseHydraDocumentation(entrypoint)

.then(

({ api }) => {

// Customize "Gallery" resource

const gallery = api.resources.find(({ name }) => 'galleries' === name);

gallery.list = (props) => (

{props.options.fieldFactory(props.options.resource.fields.find(({ name }) => name === 'name'))}

{props.options.fieldFactory(props.options.resource.fields.find(({ name }) => name === 'mainImage'))}

{props.hasShow && <ShowButton />}

{props.hasEdit && <EditButton />}

</Datagrid>

</List>

);

// Customize "images" field

const images = gallery.fields.find(({ name }) => 'images' === name);

images.field = props => (

);

images.input = props => (

</SingleImageInput>

);

images.input.defaultProps = {

addField: true,

addLabel: true,

};

// Customize "mainImage" field

const mainImage = gallery.fields.find(({ name }) => 'mainImage' === name);

mainImage.field = props => (

);

mainImage.input = props => (

</SingleImageInput>

);

mainImage.input.defaultProps = {

addField: true,

addLabel: true,

};

mainImage.input.defaultProps = {

addField: true,

addLabel: true,

};

return { api };

);

Ability to Support Other Formats Such as GraphQL

The parser has been designed to be able to be parse other formats such as a GraphQL schema or Swagger/Open API. The api-doc-parser library provides an intermediate representation that is populated by the specific format parser. It’s this representation that is used by the parser as well as by our React and Vue.js Progressive Web App generator.

It means that when converters from other formats than Hydra to this intermediate representation will be available (Pull Requests welcome), both tools we’ll support those formats. As you may know, the server part of API Platform now supports GraphQL. You can guess which format we’ll implement next in the api-doc-parser!

#GraphQL support just landed in @ApiPlatform⚡️💫🎇! Create a class: done. https://t.co/2QaEzgAb9p Contributed by Raoul Clais and @_alanpoulain pic.twitter.com/asaA62UVTw

— Kévin Dunglas (@dunglas) October 6, 2017

October 26, 2017June 30, 2018 by Kévin Dunglas

Symfony 4 Run-through (Forum PHP 2017)

API Platform, English, PHP, Symfony
AFUP, Flex, Forum PHP, PHP, Symfony, Symfony 4
1 Comment

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:

October 20, 2017September 10, 2018 by Kévin Dunglas

Symfony 4: HTTP/2 Push and Preloading

English, PHP, Symfony
h2, HTTP/2, HTTPS, performance, PHP, Push, Server Push, Symfony, WebLink
4 Comments

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

# 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>
    <meta charset="UTF-8">
    <title>Welcome!</title>
    <link rel="stylesheet" href="/bootstrap.min.css">
</head>
<body>
    <main role="main" class="container">
        <h1>Hello World</h1>
        <p class="lead">That's a lot of highly dynamic content, right?</p>
    </main>
</body>
</html>

<!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'

# 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:

<!-- ... -->
    <link rel="stylesheet" href="{{ preload('/bootstrap.min.css') }}">
<!-- ... -->

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:

<!-- ... -->
    <link rel="stylesheet" href="{{ preload('/bootstrap.min.css', {nopush: true}) }}">
<!-- ... -->

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:

<!-- ... -->
    <link rel="alternate" href="{{ link('/index.jsonld', 'alternate') }}">
    <link rel="stylesheet" href="{{ preload('/bootstrap.min.css', {nopush: true}) }}">
<!-- ... -->

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'

<?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';

<?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!

October 2, 2017 by Kévin Dunglas

Stack2Slack: a Slack bot written in Go to monitor StackOverflow tags

English, Go, Programmation, Réalisations et projets
bot, Go, golang, Slack, StackExchange, StackOverflow
1 Comment

Screenshot of Stack to Slack

At Les-Tilleuls.coop, we use Slack to centralize our communications and notifications. And, as the maintainers of the API Platform framework, we also do our best to help the community on StackOverflow when we have some free time. Until recently we were just checking periodically the StackOverflow website for new questions. But because all our notifications (GitHub, Travis, Twitter…) except the one from StackOverflow were centralized on Slack, it wasn’t optimal.

So I created a tiny Slack bot (just 150 LOC) to monitor StackOverflow (or any other site from the StackExchange galaxy) and automatically post new questions in dedicated Slack channels.

This bot is written in Go, the source code (MIT licensed) as well as binaries are available on GitHub. A Docker image is also available to easily run the daemon locally or on your servers.

To install the bot, start by registering a new Slack bot, the run the daemon. For instance, using Docker:

docker run -e DEBUG=1 -e SLACK_API_TOKEN=<your-API-token> -e TAG_TO_CHANNEL='{"stackoverflow-tag": "slack-channel"}' dunglas/stack2slack

You can monitor as many SO tags as you want, and map and choose in which Slack channel questions must be posted.

Last but not least, if you rely on Kubernetes to manage your servers (or, as we do, use Google Container Engine), you can install Stack to Slack in a single command thanks to the provided Helm chart:

Clone the Git repository: git clone git@github.com:dunglas/stack2slack.git
Install the provided chart: helm install --set slackApiToken=<your-API-token> --set tagToChannel.stackExchangeTag=slackChannel ./chart/stack2slack

If you like this bot, give it a star on GitHub. If you’re looking for skilled Go developers, or bot and API experts, drop us a mail!

September 22, 2017June 18, 2018 by Kévin Dunglas

Symfony Live London: API Platform – Full Stack Framework Resurrection

API Platform, English, PHP, Symfony
Angular, API, API Platform, Docker, Kubernetes, Linked Data, React, Symfony, Symfony Live, Vue.js
2 Comments

Here the video and the slides of my talk of today at Symfony Live London. Rate this talk.

API Platform: Full Stack Framework Resurrection from Les-Tilleuls.coop

Install API Platform. Design the API data model as a set of tiny plain old PHP classes. Instantly get:

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 admini interface (a la Sonata / EasyAdmin – but 100% client-side) built with React
Client apps skeletons: React/Redux, React Native, Vue.js, Angular…

Finally, deploy in 1 command on Google Container Engine or any cloud with a Kubernetes instance with the provided Helm chart.

Yes, you just need is describing a data model, just a few line of codes to get all of that!

September 18, 2017September 24, 2017 by Kévin Dunglas

Upcoming conferences

API Platform, English, PHP, Symfony
API Platform, con, conferences, PHP, semweb, Symfony
Leave a comment

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.

June 23, 2017 by Kévin Dunglas

[Slides] Dive Into Symfony 4

Here are the slides I presented yesterday during the Lille’s Lille’s Symfony meetup:

Symfony 4 is all about making the developer life easier. You liked using SF for large and robust apps, you’ll love using it for your next MVP, prototype or small project.

This presentation was followed by a live coding session (not recorded, unfortunately).

June 8, 2017September 18, 2017 by Kévin Dunglas

API Platform 2.1 Feature Walkthrough: Create Blazing Fast Hypermedia APIs, Generate JS Apps

API Platform, English, JavaScript & HTML5, PHP, Programmation, Symfony
API, API Platform, hypermedia, Javascript, PHP, React, REST, Symfony
6 Comments

Update September 18: API Platform 2.1 has now been released. This blog post has been updated according to the syntax used in the stable version.

Finally, after more than 1 year of dev and 3 months of beta, @ApiPlatform 2.1 is out 🍾🎆🙌. A big THANKS to all contributors! #API #PHP #React

— Kévin Dunglas (@dunglas) September 8, 2017

The new UI of API Platform 2.1

API Platform is a framework designed to make the creation of API-based information systems easier. It provides server-side tooling to create modern hypermedia and Linked Data APIs in just a few minutes. This new version introduces client-side tools to bootstrap Single-Page Applications using ReactJS by consuming the autogenerated documentation of the API.

Six months after the release of API Platform 2, I’m very excited to announce the immediate availability of the first beta of API Platform 2.1!

The changelog is huge, more than 200 commits by dozens of developers have been merged. I think we can say that this release will be great!

Let’s review the most interesting new features. If you just want to try it, the demo has been upgraded to use this new version and you can download it on GitHub.

A ReactJS-based Admin System

API Platform automatically exposes API documentations respecting the Hydra (W3C) and Swagger/Open API open standards. We created a dynamic administration system built on top of the awesome Admin On Rest library that takes advantage of the Hydra format.

Just with this line of code <HydraAdmin entrypoint="https://demo.api-platform.com"/>, you will get the following result:

Replace https://demo.api-platform.com by the URL of any API documented with Hydra and you will get a beautiful material design admin for it with:

list, create, show, edit screens as well as a delete button
suitable inputs and fields according to the API doc (e.g. number HTML input for numbers, checkbox for booleans, selectbox for relationships…)
suitable inputs and fields according to Schema.org types if available (e.g. email field for http://schema.org/email)
relationships
pagination
client-side validation for mandatory fields
server-side errors displaying (e.g. advanced validation)

It means that any API Platform API can now have an admin for free! The admin is fully customizable, a follow up post will come.

A React/Redux Webapp Generator

The admin is dynamic, no code generation happens. But sometimes it’s interesting to be able to generate some code to bootstrap a project. It’s exactly what the new api-platform-generate-crud tool does. It parses the Hydra documentation and generates a basic ReactJS webapp with the following features:

generation of high-quality ES6 components and files built with React, Redux, React Router and Redux Form including:
- a list view
- a show view
- a creation form
- an edition form
- a deletion button
generation of the suitable HTML5 input type (number, date…) according to the type of the API property
display of the server-side validation errors under the related input (if using API Platform Core)
client-side validation (required attributes)
the generated HTML is compatible with Bootstrap and includes mandatory classes
the generated HTML code is accessible to people with disabilities (ARIA support)
the Redux and the React Router configuration is also generated

Thanks to Piotr Synowiec for his contributions and fixes to those frontend tools!

Builtin HTTP Cache Invalidation System

Exposing a hypermedia API has many advantages. One of them is the ability to know exactly which resources are included in HTTP responses created by the API. We used this specificity to make API Platform apps blazing fast.

When the new cache mechanism is enabled, API Platform collects identifiers of every resources included in a given HTTP response (including lists, embedded documents and subresources) and returns them in a special HTTP header called Cache-Tags.

A cache reverse proxy supporting cache tags (Varnish, CloudFlare, Fastly…) must be put in front of the web server and store all responses returned by the API with a high TTL. When a resource is modified, API Platform takes care of purging all responses containing it in the proxy’s cache. It means that after the first request, all subsequent requests will not touch the web server, and will be served instantly from the cache. It also means that the content served will always be fresh, because the cache is purged in real time.

The support for most specific cases such as the invalidation of collections when a document is added or removed or for relationships and inverse relations is built-in.

We also included Varnish in the Docker setup provided with the distribution of API Platform, so this new feature works out of the box.

Integration with Varnish and the Doctrine ORM is shipped with the core library. You can easily implement the support for any other proxy or persistence system.

A big thanks to Jérémy Derussé, Teoh Han Hui, Fabien Bourigault, Antoine Bluchet and all other involved contributors for their in-depth reviews and good advices.

A detailed blogpost about this feature will follow.

Per Resource Authorization Mechanism

Thanks to the API Platform’s events and the extension system, it was already easy to configure basic authorization rules. In the version 2.1, we introduced an easy way to configure fine grained authorization rules directly from resource classes.

In the following example, only the logged in admins can access all operations related to the SecuredResource. However, regular users owning a specific resource can also access it:

<?php

namespace AppBundle\Entity;

use ApiPlatform\Core\Annotation\ApiResource;
use Doctrine\ORM\Mapping as ORM;

/**
 * @ApiResource(
 *     attributes={"access_control"="has_role('ROLE_ADMIN')"},
 *     itemOperations={
 *         "get"={"method"="GET", "access_control"="object.getOwner() == user"}
 *     }
 * )
 * @ORM\Entity
 */
class Secured
{
    /**
     * @ORM\Column(type="integer")
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    public $id;

    /**
     * @ORM\Column(type="text")
     */
    public $owner;
}

<?php

namespace AppBundle\Entity;

use ApiPlatform\Core\Annotation\ApiResource;

use Doctrine\ORM\Mapping as ORM;

/**

* @ApiResource(

* attributes={"access_control"="has_role('ROLE_ADMIN')"},

* itemOperations={

* "get"={"method"="GET", "access_control"="object.getOwner() == user"}

* }

* )

* @ORM\Entity

class Secured

{

/**

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

* @ORM\Id

* @ORM\GeneratedValue(strategy="AUTO")

public $id;

/**

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

public $owner;

}

Under the hood, this new feature uses Symfony’s access control expressions. The object variable value is the current resource (or collection of resources) while the user variable contains an instance of the Symfony’s user currently logged in.

Subresources Support

Having the ability to expose subresources was one of the most requested features. It was already possible to use such URL patterns thanks to custom operations, but it was a bit complicated to do.

Fortunately Antoine Bluchet rolled up this sleeves and did an excellent job! As of API Platform 2.1, subresources are a first class citizen:

/**
 * @ApiResource
 */
class Product {
    /**
     * @ApiSubresource 
    */
    public $reviews; 
}

/**

* @ApiResource

class Product {

/**

* @ApiSubresource

public $reviews;

}

The previous snippet is enough to expose through http://example.com/products/1/reviews the list of RelatedDummies resources related to the Dummy #1.

The documentations will also reflect the availability of this new URL.

New Filters

API Platform comes with 3 new useful filters that you will love.

property_filter

Baptiste Meyer contributed 2 of them. The first one, api_platform.serializer.property_filter, lets the client specify which properties the API must return.

When a resource is configured to use it, you can use the URL /products/1?properties[]=price&properties[]=currency to only serialize the properties “foo” and “bar” of this entity (all other properties will be ignored).

It’s also possible to list the properties of embedded resources with the following format: /products/1?properties[]=price&properties[brand][]=name.

group_filter

The second one, api_platform.serializer.group_filter is similar, but instead of choosing properties one by one, you can pass a list of serialization groups to apply using a URL like: /products/1?groups[]=detailed.

Those two filters allow to easily reduce the size of the returned resources to only include relevant data.

exists_filter

The last new filter, api_platform.doctrine.orm.exists_filter, was contributed by Teoh Han Hui. It allows to filter a collection on the existence of a specified value: /products?brand[exists]=0.

A Revamped API Doc UI

API Platform has a nice UI built with Swagger UI that is available for every URL of the API when requesting it from a browser (or any client sending a Accept: text/html HTTP header). In API Platform 2.1, we upgraded Swagger UI to its new major version (3.0), a full rewrite in ReactJS (API Platform + React = ❤️) including a bunch of UX improvements.

Laury Sorriaux took this opportunity to propose a great custom stylesheet improving the overall user experience and respecting our color scheme. It also contains an animation featuring our cute spider (he will get a name soon, stay tuned)!

Last but not least, Daniel Kiesel contributed to improve the integration with OAuth (and FOSOAuthBundle): it’s now possible to login with OAuth from the UI by just adding a few lines of config.

Brand New Docker Setup

One of the coolest features of API Platform 2 was the ability to run the app locally by just typing docker-compose up and to deploy apps in a breath with Kubernetes or Docker Swarm.

In API Platform 2.1, we dramatically improved the Docker support:

All images are now using Alpine Linux (reduce the size, improve the security)
Nginx and PHP-FPM are now used instead of Apache and mod_php
Varnish has been added (see the section about the cache invalidation mechanism)
The Docker Compose file has been upgraded to the format v3
Many compatibility problems with Windows have been fixed
The performance when using Docker for Mac or Docker for Windows has been dramatically improved

This Docker setup supports any Symfony-based application. Just copy/paste it in your Symfony project.

Improving the Docker configuration was a hard and collaborative work. I want to especially thanks Jacques Lefebvre, Teoh Han Hui and Antoine Bluchet for the large numbers of hours they spent to make this possible.

Integration in Symfony Flex

You can’t have missed it, Symfony 4 will come with an exciting tool to install and manage your projects: Symfony Flex. API Platform is already officially supported by Flex and can’t be easier to install: just type composer req api

Fabien Potencier (the creator of Symfony) recorded a screencast showing how API Platform and Flex fit well together:

Impressive isn’t it? Flex only works with API Platform 2.1+. Older versions aren’t supported.

Of course, many other new features, fixes and improvements (especially regarding performance) have been merged, you can read the full changelog to learn more.

Next steps before the stable release:

Testing, testing and testing again. Please try the new features, upgrade your existing projects and run your tests suites against this new version! Report any problem on GitHub. It’s very very helpful to us!
Update the documentation and write new articles for the new features. They are already many pull requests opened, reviewing and improving them is much appreciated.

A last and big thanks to all the API Platform Core Team and especially to Teoh Han Hui, Antoine Bluchet, Baptiste Meyer and Hamza Amrouche for their detailed work reviewing all contributions and getting this beta out!

P.S.: Spread the word, please give us a star on GitHub or tweet about the release of this new version!

May 31, 2017May 31, 2017 by Kévin Dunglas

Upcoming conferences and meetups: Web2Day, ChtiJS and sfPot Lille

API Platform, English, JavaScript & HTML5, PHP, Symfony
API Platform, conf, events, meetup, React, Symfony
Leave a comment

I’ll speak at some conferences in June:

I’ll present API Platform and its new client-side React tools at the ChtiJS meetup of tomorrow in Lille, France.
I’ll do the same presentation Thursday, June 8 in Nantes during the Web2Day conference
I’ll present some new features of Symfony 4 (including Symfony Flex) at the next Lille’s sfPot in Thursday, June 22 (event to be announced soon)

Here is the abstract of the API Platform talk (in french but slides will be in english):

Au cours de ce talk, je présenterai comment créer très facilement une API web de qualité, une webapp (SPA) et une app mobile à l’aide du framework Open Source API Platform (PHP).

API Platform permet d’exposer une API REST (niveau 3) 100% fonctionnelle juste en décrivant son modèle de données ou en l’important depuis Schema.org.

Nous découvrirons réaliserons sans effort une API supportant :

les opérations REST (lecture et écriture)

la validation de données

la pagination

les tris et les filtres

une documentation Swagger générée automatiquement et une interface graphique d’administration

un système de gestion de droit utilisateur

un mécanisme de cache HTTP par invalidation

la négociation de contenu

l’imbrication de documents

De plus, notre API supportera directement les formats hypermedia modernes tels que JSON-LD, Hydra et HAL qui facilitent l’intéropérabilité des systèmes (Linked Data, web sémantique).

Grâce à Docker, notre API se lance en un instant et peut être déployée en un instant dans les “clouds”.

Une fois notre API construite, nous utiliserons les outils fournis par API Platform pour générer une interface d’administration complète, une SPA et une app mobile basés sur React JS grâce à la description hypermedia de l’API.

April 3, 2017June 21, 2018 by Kévin Dunglas

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

API Platform, English, JavaScript & HTML5, PHP, Symfony
API, API Platform, ES2015, Hydra, hypermedia, Javascript, JSON-LD, PHP, React, Redux, Swagger, Symfony
1 Comment

Slides and videos of my talk during the Symfony Live Paris 2017. Rate this talk on joind.in!

API Platform 2.1: when Symfony meets ReactJS (Symfony Live 2017) from Les-Tilleuls.coop

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

Getting Started

Native Support for to-Many Relations

Detection of More Schema.org’s Types (name, url and email)

Support for Read-only Resources

Easier and Deeper Customization

Ability to Support Other Formats Such as GraphQL

Partager :

Partager :

How does it works?

Partager :

Partager :

Partager :

Partager :

Partager :

Partager :

Partager :

Partager :