Let’s Learn Laravel Blade: Getting Started

Beginner-Intermediate

This post covers Laravel Blade. Previous experience in Laravel isn't necessary, but this post assumes you know basic PHP.

If you’re into PHP development, chances are, you’ve messed with or heard of Laravel. To keep it simple, Laravel is a fantastic PHP framework for making all kinds of web apps. As of this writing, Laravel has been around for 9 years and is still massively popular. It’s not going away anytime soon! Laravel uses a front end template engine called blade. Blade is what takes the backend logic, and brings the variables to your front end views. You don’t have to be a Laravel developer to know what blade is, but that’s likely where you’d run into it.

For example, I work extensively with the sage 9 starter theme, which is essentially an advanced environment for WordPress. It comes packaged with Laravel blade, but has nothing to do with Laravel itself. Blade can actually be its own standalone library, you’d just need to set it up. The main point is, you don’t have to learn the entirety of Laravel just to learn blade!

That’s exactly what we’ll be doing in this post. Learning blade is a great start for any aspiring PHP developer. If you’re learning Laravel or just want to learn a new front end templating engine, this post is for you.

What Is a Templating Engine?

Templating engines provide easy ways for backend data to communicate with front end views. A front end view is what ultimately displays the HTML, and the backend holds the actual data. This prevents you from needing to learn specific backend functions just to display data inside your views. This is very common in JavaScript and PHP frameworks, but is certainly everywhere.

Templating engines will always have a syntax that determines where the data goes. The point of this is to make them dynamic. Here’s an example with JavaScript Handlebars, taken from their website.

// Data coming in the template from a controller
{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley",
  ],
}

<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

Don’t worry too much about what’s happening here, but note that Handlebars has its own syntax and is generating a dynamic list of people from the array. Templating engines can be complex and even handle functions, or as simple as your very own string parser.

Why Blade?

Blade is actually fairly simple to learn while remaining very modular and flexible. I choose blade over other template engines for its readable syntax and ability to easily use components. Blade has just about any feature you’d think you want, with extensive documentation to cover all of your cases. Similar to Laravel, blade’s documentation is fantastic. Don’t forget the amount of resources and solutions you’ll find on sites like Stack Overflow.

If you use Laravel or Sage 9, Blade is built in. The overhead blade adds to an application is fairly small. The code is ultimately compiled down to PHP and doesn’t add another layer of abstraction behind the scenes. Because of this, you can even use normal PHP inside of your templates. Of course you should try to avoid this, but it has its use cases.

Getting Started With The Basics

If you’ve used any kind of template engine or parser, you know that a variable surrounded by certain characters will ultimately get replaced. Vue.js uses something like {{ this }} and others may use something along the lines of #{ this } or { this }. In blade’s case, two sets of double brackets put what’s between them up for parsing. Here’s a simple example.

<section class="hero">
    <div class="container">
        <h1 class="title">{{ $title }}</h1>
        <p class="main-description">{{ $main_description }}</p>
    </div>
</section>

In this example, $title and $main_description are to be parsed. In a regular Laravel/Sage build, this data will come from some kind of controller. In these examples, we will assume that is happening. Ultimately, $title gets replaced with whatever gets returned. Same with $main_description. Here’s what a compiled down template may look like:

// Date being brought in
$title = 'Hello!';
$main_description = 'Welcome to my wonderful website.';

// What's being served to the browser after being compiled
<section class="hero">
    <div class="container">
        <h1 class="title">Hello!</h1>
        <p class="main-description">Welcome to my wonderful website.</p>
    </div>
</section>

This is a very simple example to show what basic blade syntax looks like. Any amount of logic and manipulation can be done with the variables being parsed, but that’s often done behind the scenes before it’s returned. Manipulating data inside of the template itself is often a bad practice and should be avoided if possible. Templates are only meant to display variables, not perform logic on them. Performing calculations is often the controller’s job. If there’s to be logic inside of the template, it should be view-specific.

As far as knowing the basics, this can get you started doing basic templates. Before we move on to more advanced blade features, let’s see what a @foreach loop may look like.

Dynamic Blade Syntax

This syntax not only applies to @foreach loops, but also most dynamic features of blade. These include @component, @include, @if, and so on. We will dive into these in later articles. For now, let’s get a good idea of what a dynamic loop will look like in blade.

<ul class="social-list">
    @foreach($footer_social as $icon)
      <li>
        <a href="{{$icon['link']}}">
          <img class="social-icon" src="{{$icon['icon']}}">
        </a>
      </li>
    @endforeach
</ul>

The first thing you may notice is that it looks like a normal php loop. In general, blade doesn’t do anything dramatically different, just has its own syntax. The dynamic data we want returned is contained in the $footer_social icon, and is referred to as $icon. In this case, each $icon has a link and an icon url.

Moving Forward

Now that you know what blade syntax looks like, it’s easy to see how quickly this can be picked up. Blade doesn’t try to do anything dramatically different, just gives you a means of easily bringing backend logic to your front end views. You should be able to loop through data and use complex conditional logic without using any weird php code and calculations. This makes your views very easy to work with and maintain. In the next article, we will cover doing conditional logic with @if @else statements. Hint: it’s not very hard to pick up. Hope to see you there!

Leave a Comment