Top 3 new features in Laravel 5.4
Laravel 5.4 continues the improvements and refactoring of framework made in Laravel 5.3 by adding support for plenty of modules and new features. We will discuss top 3 new features in Laravel 5.4 that made the framework more adaptable since released.
Moving on, we’d love to list the top 3 new features in Laravel 5.4 which makes it more adaptable-
1. Laravel Mix
As part of Laravel 5.4, Laravel Elixir has been upgraded and renamed to Laravel Mix. Mix is very similar to Elixir with differences of implementation over Webpack instead of Gulp previously in Laravel 5.3. A quick look at the default files for Elixir and Mix:
|
1 2 3 4 5 6 7 |
// Elixir's gulpfile.js const elixir = require('laravel-elixir'); require('laravel-elixir-vue-2'); elixir((mix) => { mix.sass('app.js') .webpack('app.js'); }); |
|
1 2 3 4 5 |
// Mix's webpack.mix.js const { mix } = require('laravel-mix'); mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css'); |
Looks very similar, but there’s one big difference you will experience once you will run: with Elixir you run the code with gulp or gulp watch while with Mix you will run the code with npm run dev or npm run watch. You can generate production ready minified version of your assets using npm run production.
2. Laravel Dusk
A new way of application testing introduced in Laravel 5.4 as Laravel Dusk, which provides an expressing, easy-to-use browser automation and testing API. Dusk is based on standalone ChromeDriver installation. Dusk operates using a real browser, you are able to easily test and interact with your applications:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/** * A basic browser test example. * * @return void */ public function testBasicExample() { $user = factory(User::class)->create([ 'email' => 'contact@tradetu.com', ]); $this->browse(function ($browser) use ($user) { $browser->loginAs($user) ->visit('/home') ->press('Create Playlist') ->whenAvailable('.playlist-modal', function ($modal) { $modal->type('name', 'My Playlist') ->press('Create'); }); $browser->waitForText('Playlist Created'); }); } |
Dusk changed the way applications testing work in Laravel. When you write application tests, Dusk sends your commands to ChromeDriver, which then spins up Chrome to run your tests in the browser and reports back your results.
3. Components and Slots in Blade Template
In Laravel 5.4, Blade offers a new @component directive. Using this directive we can create more reusable components with the help of slots. Lets imagine a reusable ‘breadcrumb’ component we would like to reuse throughout our application:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- /resources/views/breadcrumb.blade.php --> <ol class="breadcrumb"> <li> <a href="#">{{ $slot }}</a> </li> <li> <a href="#">{{ $secondSlot }}</a> </li> <li class="active">{{ $thirdSlot }}</li> </ol> |
Above code snippet, includes one default slot {{ $slot }} and 2 named slots {{ $secondSlot }} and {{ $thirdSlot }}. The default slot, {{ $slot }} variable will contain the first level breadcrumb like home, dashboard, Admin r anything we wish to inject into the breadcrumb component. We will use @component Blade directive, like this:
|
1 2 3 |
@component('breadcrumb') Home @endcomponent |
Named slots allows you to put multiple slots into a single component. Named slots may be injected using the @slot directive. Any content is not within a @slot directive will be passed to the component in the {{ $slot }} variable.
|
1 2 3 4 5 6 7 8 9 |
@component('breadcrumb') Home @slot('secondSlot') Document @endslot @slot('thirdSlot') Create @endslot @endcomponent |
Clude Con
That’s all, folks. Enjoy! Remember, you can still keep writing the code you’ve always written–and you can even pull in the old package, if you’d prefer. But there’s a whole new world open to you now. Try it out a bit. If you are having any queries and confusions then lets discuss in comment section.
nice blog