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

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

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

DunglasTodoMVCBundle compatible with Symfony 2.4

I’m pleased to announce the release of DunglasTodoMVCBundle 1.1.0.

Screenshot Symfony Todomvc

DunglasTodoMVCBundle is an implementation of TodoMVC, the popular site providing the same todo app implemented in a ton of different JavaScript frameworks.

This bundle provides a REST / JSON API built with Symfony and Doctrine, and an API client built with Chaplin.js and Backbone.js.

In this new release:

Enjoy!

DunglasAngularCsrfBundle: protect your Symfony / AngularJS apps against CSRF attacks

I create and I see more and more web applications sharing the same powerful architecture:

 These components share the same philosophy (built on top of dependency injection and MVC-like patterns, designed to be intensively tested) and play very well together.

This stack allows to create awesome blazing-fast web applications. Better, the client part and the server part of the app are loosely coupled, can evolve separately and can even be maintained by different teams.

However, this kind of apps often suffer of security problems, and especially Cross-site Request Forgery (CSRF or XSRF) vulnerabilities.

Both Symfony and AngularJS provide their own CSRF protection mechanisms, but by default they are not interoperable and not enabled. Thanks to a recent refactoring of the Symfony’s security component, it’s now possible and clean to make both systems working together, and I’ve just released an open source bundle to do that: DunglasAngularCsrfBundle.

This bundle provides out of the box CSRF protection for AngularJS apps interacting with a Symfony-backed app.

Despite it’s name, it does not depend of AngularJS and can also be used with Chaplin.js / Backbone.js, jQuery or even raw JavaScript. To do so, install and configure the bundle, then just add to XHR requests a HTTP header called X-XSRF-TOKEN containing the value of the token set by a cookie on the first HTTP request. The bundle will automatically check the validity of the provided token. If it is not valid, an Access Denied error (HTTP 401) will be thrown.

The bundle is fully tested with phpspec and obtain a platinum medal on the brand new (awesome) SensioLabs Insight quality monitoring system.

Internals documentation and installation instructions are provided on the GitHub page of the bundle. Check it, test it, star it and tell me what you think of it!

Download DunglasAngularCsrfBundle on GitHub. 

jquery.confirmExit : où comment ne plus perdre les données d’un formulaire complété

Je viens de publier un petit plugin jQuery sous license MIT qui affiche une demande de confirmation lorsqu’un l’utilisateur quitte une page web après avoir rempli un formulaire sans l’avoir envoyé.

Perdre toutes les données que l’on vient de saisir en cliquant sur un lien ou en fermant la fenêtre sans avoir appuyer sur “Envoyer”, c’est le genre de détails qui font rager contre les applications web mal finies.

Plus d’excuse avec jquery.confirmExit. Cerise sur le gâteau, le plugin supporte tous les nouveaux champs de formulaires introduits avec HTML5.

Télécharger le plugin sur GitHub

Ajax Syntax Highlighter 1.0 beta 1 released

Yeah, it’s the first public release of the new syntax highlighter announced in my previous post !

Ajax Syntax Highlighter is a small Javascript utility designed to highlight code embed in a web page in a semantic and standard compliant way.
It automatically looks for source code in the page, send it to a server-side highlighter and display the highlighted code. It also has a “view as plain text” feature and internationalization (French translation available).

Ajax Syntax Highlighter is built with Yahoo! UI and uses JSON for serialization.
It currently includes GeSHi as server-side (PHP required) highlighter but it can be easily used with others such as Pygments.

As you can see, the current graphics come from SyntaxHighlighter and are not so good. If you have some webdesign skills and can help me to enhance it, please contact me !