[SymfonyCon] API Platform and Symfony: a Framework for API-driven Projects

Here are the slides of my talk during the Symfony Con Cluj. You can rate this talk on joind.in.

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!

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

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:

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:

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:

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!

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.

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:

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:

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

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 download the homepage, parse the HTML (notice “Initiator: Parser” in Chrome DevTools), encounter the reference to bootstrap.min.css and finally send 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:

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

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!

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

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:

  1. Clone the Git repository: git clone git@github.com:dunglas/stack2slack.git
  2. 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!