La sortie de la vesion 5.4 de Laravel est prévue en janvier 2017 et elle aura besoin de 6 mois pour avoir une élimination des tous les bugs. On peut donc aller voir ce qui nous attend très bientôt dans cette nouvelle version !

La page officielle de présentation des nouveautés est ici. Mais pour ceux qui préfèrent une présentation française je vais détailler un peu tout ça dans cet article.

Pour faire des essais il faut aller chercher la version développement sur Github et l’installer.

Blade : component et slot

La présentation officielle de cette nouveauté est ici. On va avoir plus de possibilités pour organiser nos vues orchestrées par Blade.

Etat actuel

En général on utilise un template (layout.blade.php). Voici un exemple standard avec initialisation de bootstrap :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mon joli site</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      @yield('contenu')
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

On prévoit un emplacement pour gérer le contenu avec :

@yield('contenu')

Ensuite dans nos pages on référence le template et l’emplacement prévu (home.blade.php) :

@extends('layout')
@section('contenu')
    <h1>Ma page d'accueil !</h1>
@endsection

Tout ça fonctionne très bien et jusque là on s’en est contentés !

Maintenant si on veut insérer une barre d’alerte dans la vue on peut utiliser une inclusion avec passage d’un paramètre :

@extends('layout')
@section('contenu')
    <h1>Ma page d'accueil !</h1>
    @include('alerte', ['texte' => 'Texte de l\'alerte'])
@endsection

Avec ce fichier pour l’alerte (alerte.blade.php) :

<div class="alert alert-success" role="alert">
    {{ $texte }}
</div>

Là aussi ça fonctionne bien…

Un composant

Avec la version 5.4 on dispose pour faire la même chose de la possibilité de créer un composant :

@extends('layout')
@section('contenu')
    <h1>Ma page d'accueil !</h1>
    @component('alerte')
        Le message d'alerte ici !
    @endcomponent
@endsection

On utilise la nouvelle instruction @component et on nomme la vue en relation. On ne nomme pas de paramètre mais on met le texte de l’alerte directement.

Voici le code de l’alerte maintenant :

<div class="alert alert-success" role="alert">
    {{ $slot }}
</div>

Le texte de l’alerte va occuper la place de $slot.

Le résultat est le même mais c’est quand même plus propre et élégant !

Un autre aspect intéressant de $slot c’est que toute variable déclarée dans le composant est utilisable dans la vue principale. C’est pas clair ? Alors un petit exemple… on utilise ce code dans le template :

<div class="container">
  <h1>{{ $titre }}</h1>
  {{ $slot }}
</div>

On attend une variable $titre ainsi qu’un contenu pour le $slot. Donc dans notre template on aura forcément un composant qui lui-même peut utiliser d’autres composants.

Voici le code de la page d’accueil :

@component('layout')
    @slot('titre')
        Ma page d'accueil !
    @endslot
    @component('alerte')
        Le message d'alerte ici !
    @endcomponent
@endcomponent

Le résultat est encore le même. Regardez comment est renseignée la variable titre pour le layout. On peut ainsi créer autant de variables qu’on a besoin.

Ca nous donne une autre façon d’envisager l’organisation de nos vues avec des composants, elle s’inspire de Vue.js.

Façade automatique

La présentation officielle de cette nouveauté est ici.

Etat actuel

Imaginez que vous ayez créé la librairie mathématique du siècle :

<?php

namespace App\Services;

class Maths 
{
    public function double($i)
    {
        return 2 * $i;
    }
}

Pour l’utiliser vous pouvez l’injecter dans un contrôleur :

<?php

namespace App\Http\Controllers;

use App\Services\Maths;

class TestController
{
    public function test(Maths $maths, $i)
    {
        echo $maths->double($i);
    }
}

Il suffit d’avoir une bonne route :

Route::get('test/{i}', 'TestController@test');

Et le tour est joué ! Pour :

.../test/8

Vous allez obtenir  le résultat :

16

Et puis vous vous dites qu’une façade ça serait bien pour une si belle librairie !

Alors vous créez la façade :

<?php
 
namespace App\Services;

use Illuminate\Support\Facades\Facade;
 
class MathsFacade extends Facade
{
    protected static function getFacadeAccessor()
    {
        return 'maths';
    }
}

Vous déclarez votre classe dans AppServiceProvider :

public function register()
{
    $this->app->bind('maths', function ($app) {
        return new \App\Services\Maths;
    });
}

Puis vous déclarez la façade dans config/app.php :

'Maths' => App\Services\MathsFacade::class,

Et là magie de Laravel dans le contrôleur la façade fonctionne :

<?php

namespace App\Http\Controllers;

use Maths;

class TestController
{
    public function test($i)
    {
        echo Maths::double($i);
    }
}

La façade automatique

Bon, on peut trouver que la mise en place est un peu laborieuse. Avec la version 5.4 ça sera beaucoup plus facile : oubliées la création et la déclaration de la façade !

Vous avez juste à faire ça dans le contrôleur :

<?php

namespace App\Http\Controllers;

use Facades\ { App\Services\Maths };

class TestController
{
    public function test($i)
    {
        echo Maths::double($i);
    }
}

Et ça fonctionne ! Laravel devient de plus en plus magique !

Les routes

La présentation officielle des nouveautés sont ici.

On a une amélioration du cache. d’autre part on peut déclarer le nom d’une route avec une syntaxe simplifiée.

La syntaxe actuelle est celle-ci :

Route::get('test/{i}', 'TestController@test')->name('maths');

Avec la version 5.4 on pourra écrire :

Route::name('maths')->get('test/{i}', 'TestController@test');

On peut traiter de la même manière les middlewares.

Bon c’est pas l’évolution la plus géniale il faut l’avouer ! Mais bon, on prend quand même…

Le multilanguage

La présentation officielle des nouveautés sont ici.

Etat actuel

Pour faire du multilangue on dispose de l’helper trans et on doit créer autant de fichiers que de langues prévues. Par exemple on a un fichier en/test.php pour l’anglais :

<?php

return [
    'test' => 'The english version of test',
];

Et le même pour le français fr/test.php :

<?php

return [
    'test' => 'La version française de test',
];

Si dans un contrôleur j’utilise :

echo trans('test.test');

J’aurais selon la locale :

The english version of test

ou

La version française de test

Ca fonctionne plutôt bien mais c’est vrai que ça devient vite laborieux pour un gros site.

D’autre part on a la possibilité d’utiliser des paramètres, par exemple :

<?php

return [
    'test' => 'The english version of :name',
];

Et pour l’appel :

echo trans('test.test', ['name' => 'Toto']);

Utilisation de fichiers JSON

Avec la version 5.4 de Laravel on a une amélioration avec l’utilisation d’un fichier JSON par langue :

Voici celui de l’anglais pour notre exemple (en.json) :

{"test:": "The english version of test"}

Et celui du français (fr.json) :

{"test:": "La version française de test"}

Maintenant la syntaxe appelante est celle-ci :

echo __('test:');

Le fait de disposer de fichiers en JSON qui est un language utilisé universellement devrait simplifier les traductions et donner lieu à l’émergence d’outils pratiques.

On peut aussi utiliser des paramètres comme dans la version actuelle :

{"test:": "The english version of :name"}

Avec cet appel :

echo __('test:', ['name' => 'Toto']);

 

Higher Order Messaging (HOM)

La présentation officielle est ici.

Il s’agit d’un design pattern destiné à simplifier la syntaxe lorsqu’on doit effectuer des boucles pour des langages orientés objet. La bonne nouvelle c’est qu’il est appliqué aux collections de Laravel dans la version 5.4 !

Par exemple on a cette classe :

class Personne
{
    protected $name;
    public function __construct($name)
    {
        $this->name = $name;
    }
    public function afficheNom()
    {
        echo $this->name . '<br>';
    }
}

On crée une collection de personnes :

$collection = collect([
    new Personne('Dupont'),
    new Personne('Fremoulle'),
    new Personne('Tartignole')
]);

Pour afficher tous les noms on fait classiquement ceci :

$collection->each(function($item) {
    $item->afficheNom();
});

Avec le nouveau design pattern on pourra écrire avec cette syntaxe simplifiée :

$collection->each->afficheNom();

Bon… c’est du détail mais ça participe à l’élégance de Laravel.

Des emails avec Markdown

Avec Laravel 5.3 on dispose de Mailable pour créer facilement des emails. Il suffit d’utiliser cette commande d’artisan :

php artisan make:mail monMail

Et la magie opère, un dossier et un fichier sont créés :

Avec ce code :

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Contracts\Queue\ShouldQueue;

class monMail extends Mailable
{
    use Queueable, SerializesModels;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->view('view.name');
    }
}

Il ne reste plus qu’à créer la vue et le tour est joué et au besoin jouer avec quelques méthodes pour savoir qui envoie, transmettre des paramètree… Mais la vue utilise du HTML ou à la rigueur du texte simple.

Avec Laravel 5.4 la commande d’artisan s’enrichit pour le markdown :

php artisan make:mail MonMail --markdown=mon_mail

On a encore création du dossier et du fichier comme avant mais la syntaxe change un peu pour la méthode build :

public function build()
{
    return $this->markdown('mon_mail');
}

On ne retroune plus avec view mais avec markdown et en plus une vue est créée :

Avec ce code de base :

@component('mail::message')
# Introduction

The body of your message.

@component('mail::button', ['url' => ''])
Button Text
@endcomponent

Thanks,<br>
{{ config('app.name') }}
@endcomponent

La syntaxe est fondée sur le nouveau composant de Blade dont j’ai parlé ci-dessus.

Il paraît qu’on dispose de ces composants :

  • button
  • footer
  • header
  • layout
  • message
  • panel
  • promotion
  • subcopy
  • table

Ca permet de faire pas mal de choses !

Si on envoie tel quel voici le résultat obtenu :

Pour vérifier si ça marche je tente un tableau :

On va tenter un tableau :
@component('mail::table')
Item     | Valeur
-------- | ---
Fraises  | 12 €
Banane   | 3 €
Pipe     | 50 €
@endcomponent

Avec ce résultat :

Je n’ai pas essayé les autres composants mais c’est très prometteur !

On a les mêmes possibilités avec les notifications.

Laravel Dusk

Pour terminer on va évoquer les tests. Laravel permet de mettre en place des tests puissants d’application, on peut ainsi remplir un formulaire, cliquer sur un lien… Tout se passe bien tant que Javascript ou encore pire Ajax ne s’en mêlent pas parce que ce qui est utilisé c’est le BrowserKit de Symfony.

Dusk arrive à digérer le Javascript, il offre les mêmes possibilités que le BrowserKit et reconnait même les glisser-déposer !

Pour le moment il en est à la phase alpha. Pour se faire une idée il y a un exemple sur Github.

Laravel Mix

Si vous utilisez Laravel vous connaissez forcément Elixir qui facilité l’utilisation de Gulp pour gérer CSS et Javascript. Avec Laravel 5.4 on abandonne gulp en faveur de Webpack et pour l’occasion le nom change aussi pour Laravel Mix. En attendant d’avoir plus d’informations on peut déjà se documenter sur Webpack si on le connaît peu ou pas.

Deux nouveaux middlewares

Trim Strings

Avec ce middleware non actif par défaut on n’aura plus de souci concernant la saisie d’espaces parasites surout en fin de chaîne de caractères. Les espaces avant et arrières seront éradiqués.

Convert Empty Strings to Null

On a parfois des soucis avec des colonnes nullables lorsque rien n’est saisit dans un formulaire. Avec ce middleware non actif par défaut on aura une transformation en valeur nulle donc directement envoyable dans la base.

Conclusion

Les nouveautés ne sont pas aussi radicales qu’avec la version 5.3 mais il y a des choses bien intéressantes ! Si vous voulez donner votre avis sur le sujet…

 

Laisser un commentaire