Javascript in Laravel (overview)

Overview of the series

Update May 2021

Please note that this post is currently 3 years old. As you know, things move fast in our tech world and event though the principles described in this post are still valid, there might be better ways to achieve the same result; You are free to continue reading, but I recently wrote a post about our current approach.

Additionally, Laravel 8 brings a new starter kit to quickly scaffold the frontend of your next project. It’s called Laravel Jetstream and is definitely worth taking a look. I’ll choose Laravel Jetstream with Inertia scaffolding for my next project.

Therefore, I am removing the code repository that originally came with this post.

Original post

In this series I describe various ways to incorporate Javascript into a Laravel project. As a webdeveloper at PLint-sites, I have built several websites and webapps with Laravel and all of them needed Javascript. In the first projects I just added jQuery to a view, but my workflow gradually improved and currently I use Laravel in combination with Vue. However, even Vue can be used in various ways as we will see in this blog series.

Prerequisites

Throughout this series we assume a basic understanding of Laravel. Moreover, the Bootstrap framework (included by default in new Laravel projects) is used to quickly setup a view.
Basic knowledge of Javascript (jQuery, ES6) is encouraged, although the code samples are rather self explanatory.

Sample project

The easiest way to show some code is in a sample project. In my daily job I build a lot of forms, either for newsletter registration on a blog, a checkout in a webshop or a custom backend for one of our clients. Forms come with all kinds of challenges including validation (both client and server site) and form the heart of any webapplication.

I installed the latest Laravel version (5.6 at the time of writing) and created some pages and views. I decided to put all code for a single post in a specific branch. Therefore, I will put a link to the correct branch in every post.

At the start of the series, the project contains a single page with a registration form. The form is defined in a blade view and the layout uses Bootstrap classes. This way we create a nice looking form quickly.

Although the registration form will be perfectly functional without any Javascript, the user experience can be greatly improved by adding some behaviour. In this sample project I will discuss the following additions:

• Choosing a gender should add a text field to the form to enter your name. The label of the text field should become either Mr. or Ms. depending on the chosen gender.
• Validatie the email address is valid when the email field looses focus and if it is valid, check whether the email is still available (via AJAX request to the server). Show a message reflecting this.
• Check the combination of zipcode and country when choosing one or the other. Show a message if the zipcode does not comply with the rules for the specific country.

The relevant Javascript setup will be discussed in detail in each post.

Next up

In the upcoming weeks I’ll be writing the steps we took to add the Javascript for the improvement of the registration form to the Laravel project.

• Do it the jQuery way
  Part 1 of the series: Implementing the Javascript behaviour by adding a script tag right below the html in the blade view. Easy, quick and dirty.
• Bundling using Webpack and Laravel Mix
  Part 2: When the project grows you quickly loose track of the right order of all scripts you need to load for Javascript behaviour on various pages. Let’s use Webpack to bundle our scripts and make things more future proof.
• Installing Vue
  Part 3 of the series in which we dive into the installation of Vue inside Laravel. This is rather easy as it comes by default in a fresh Laravel project.
• A single Vue instance
  Part 4: Using Vue the quick and dirty way without components.
• A single Vue instance for the entire application
  Part 5 of the series: introducing single file components. The way to include Vue in your Laravel project. However, doing things the right way, may take more time initially. But it’s worth it on the long term.
• Combining a Bootstrap theme with Vue
  The final: including a Bootstrap theme your project manager really likes. The takeaway here is to use it the way it is to quickly reach the deadline of the MVP. However, in the end, you’ll have to remove the theme and build the stuff yourself to get a well performing web application!