Get a Free Quote
Our Blog

Laravel View Components: Excellent Alternative of View Composers

368 total views
Harshal Shah
May 30, 2018

Laravel is the free and open-source PHP web framework that is used to build web-applications following the MVC architecture. Laravel development is in huge demand these days and new features are being added by Laravel development services for the enhancement of the applications. Laravel development services have added Laravel view components which has an excellent alternative of view composers.

One of the best practices in software development, especially Laravel development services is to keep a practice of developing reusable code that can be used in different modules of the application whenever needed. It helps in saving a lot of time of the developers and the Laravel development becomes very fast.

Let us imagine that you need to show a “highlights” widget on the sidebar on your blog. Then the “highlights” will be populated with the response of an API on the blog.

You will find something similar to this on your homepage controller.

<?php

class HomeController extends Controller {

protected $blog;

public function __construct(BlogRepository $blog)
{
$this->blog = $blog
}

public function index()
{
return view('blog', [
'posts' => $blog->latest(),
'highlights' => $blog->highlights()
]);
}
}

It is nice and clean but the problem with this approach will start when you need to pass the same “highlights” variable to every page of your site. For example, a contact page:

<?php

class ContactPageController extends Controller {

protected $blog;

public function __construct(BlogRepository $blog)
{
$this->blog = $blog
}

public function index()
{
return view('contact', [
'highlights' => $blog->highlights()
]);
}
}

It will be harder for you as the application grows and when you have 20 different controllers to maintain.

The View composers in Laravel development provide you with the facility of moving the logic outside your controller and pass data to specified set of views.

<?php

class HighLightsComposer
{

protected $users;

public function __construct(BlogRepository $blog)
{
$this->blog = $blog
}

public function compose(View $view)
{
$view->with('highlights', $this->blog->highlights());
}
}

You will find something like this in the service provider:

<?php

class ComposerServiceProvider extends ServiceProvider
{
public function boot()
{
View::composer(
'highlights', 'App\Http\ViewComposers\HighlighsComposer'
);
}
}

You can refactor your controllers like so, at this point in Laravel development

<?php

class HomeController extends Controller {

protected $blog;

public function __construct(BlogRepository $blog)
{
$this->blog = $blog
}

public function index()
{
return view('blog', [
'posts' => $blog->latest()
]);
}
}

class ContactPageController extends Controller {

public function index()
{
return view('contact');
}

}

If your client asks you to replace the content of the “highlights” widget with some static data, then in the current example it is possible by updating the content of the “highlights.blade.php” file. Here, the API call will be running in the background. So, even if you remove the logic from your views, it won’t matter. You will need to update the ServiceProvider to stop the API call from the View composer or change the name on the view.

Now, let us see View Components, a great feature of the Laravel development services.

We will reuse a common view that is built using the dynamic data which might be coming from any resource. We will create a new Highlights component class. The good thing is that the View component classes could share an interface to specify the type of data we want to return. The Laravel Htmlable contract will be perfect in this case.

<?php

namespace App\ViewComponents;

use Illuminate\Support\Facades\View;
use Illuminate\Contracts\Support\Htmlable;

class HighlightsComponent implements Htmlable
{
protected $blog;

public function __construct(BlogRepository $blog)
{
$this->blog = $blog;
}

public function toHtml()
{
return View::make('highlights')
->with('highlights', $this->blog->highlights())
->render();
}
}

We will create a new blade directive to render the view components. It would be a good idea to use the IOC to resolve the dependencies for us as we are using dependency injection in the above class.

<?php

class AppServiceProvider extends ServiceProvider
{
public function register()
{
Blade::directive('render', function ($component) {
return "<?php echo (app($component))->toHtml(); ?>";
});
}
}

At the end, you can render the view component that will return an HTML partial on any view.

@render(\App\ViewComponents\HighlightsComponent::class

The @render() blade directive must be included for running the component logic.

Thus, this was an overview to Laravel view components, that is made as an alternative to the view composer by the Laravel development services for better development of the applications.