Sebastian De Deyne has a tutorial posted to his site showing you how to use two packages to render Javascript on the server side via PHP.

Server side rendering is a hot topic when it comes to client side applications. Unfortunately, it's not an easy thing to do, especially if you're not building things in a Node.js environment.

I published two libraries to enable server side rendering JavaScript from PHP: spatie/server-side-rendering and spatie/laravel-server-side-rendering for Laravel apps.

Let's review some server side rendering concepts, benefits and tradeoffs, and build a server renderer in PHP from first principles.

The tutorial starts with a look at what "server-side rendering" means in this case, how it works with the browser and some of the benefits. It then talks about the rendering process and some of the tradeoffs between it and just using Javascript on the frontend. From there the post gets to the examples of the actual rendering process. If creates a simple Vue.js application that outputs a "Hello, world!" template. It then includes the code to use the packages (that, in turn, use the V8JS package) to render the Javascript and output the result.

On the CloudWays blog there's a tutorial posted that walks you through the beginning steps to create a Symfony + Vue.js application with a Symfony 4 application.

As a PHP developer who uses Symfony regularly, I have had a hard time choosing from the numerous JavaScript frontend frameworks available in the market. I had to pick one of the top-rated JavaScript frameworks including Angular, React, Vue and Aurelia.

[...] In this article, I will go through the process of enabling and configuring Vue.js within Symfony applications. Part of this process is covered in the official Symfony documentation.

The tutorial starts by answering the "Why Vue?" question and why frontends are important. He then gets into some of the prerequisites and the steps to create the application:

• creating the Symfony 4 application via Composer
• adding a default controller and route
• making a default Vue.js template via Twig
• pulling in Vue.js and its requirements via yarn
• creating the Vue Component

The end result is a simple page that shows the component in a Bootstrap-themed page.

On the Pineco.de site there's a tutorial posted showing you how to implement the Laravel auth system on the frontend re-using the same logic in a single-page Vue.js application as you would on the backend.

If you are using Laravel, probably you are familiar with its ACL. You can easily restrict user’s access by creating policies and binding them to the specific models. It works perfectly on the back-end, but what can we do if our app is something like an SPA?

The post starts with a brief overview of the Laravel ACL handling as it relates to users and policies about what they can do or access. The frontend setup then makes use of a "cheap copy" of the Laravel "gate" handling via a Javascript-based request. They walk you through the preparation work you'll need and the creation of a gate class to define the current policies for CRUD methods. The main "Gate" class is then defined, setting up the before, allow and deny action methods. Finally these pieces are integrated into the Vue.js application with an example of either showing or hiding the "Edit" link based on the user permissions.

On the SitePoint PHP blog there's a new tutorial that talks about creating "watchers" in your PHP code similar to the ones that the Javascript world has used to detect changes in files and automatically perform actions.

In the land of JavaScript, it’s not uncommon to preprocess source code. In the land of JavaScript, developers write in syntax not widely supported, and the code is transformed into syntax that is widely supported, usually using a tool called Babel.

In order to reduce the burden of invoking the transformation scripts, boilerplate projects have started to include scripts to automatically watch for file changes; and thereafter invoke these scripts.

These projects I’ve worked on have used a similar approach to re-run unit tests. When I change the JavaScript files, these files are transformed and the unit tests are re-run. This way, I can immediately see if I’ve broken anything.

The author (Christopher Pitt) then shows how to create the project and make use of pre-processing and some sample scripts to run tests against. He shows how to set up the test configuration and provides an example test. Finally he includes a script that's used by the "watcher" to recompile the scripts before the tests are executed. To to the watching, he uses the yosymfony/resource-watcher package and a long running PHP script ("watch-test").

On the SitePoint PHP blog they've posted another article from author Christopher Pitt. This time he talks about snapshot testing and if it's a viable way to evaluate code in PHP applications.

Ah-ha moments are beautiful and rare in programming. Every so often, we’re fortunate enough to discover some trick or facet of a system that forever changes how we think of it. For me, that’s what snapshot testing is.

You probably write a lot of PHP code, but today I want to talk about something I learned in JavaScript. We’ll learn about what snapshot testing is and then see how it can help us write better PHP applications.

He starts with a brief introduction to the technology to be used (React in Javascript) and how it could be recreated in PHP. He then covers testing interfaces, evaluating the correct functionality of frontends via various testing tools. He includes some examples of this kind of testing and how it can help a developer mentally break up functionality into components. From there he switches over to the PHP side, introducing the spatie/phpunit-snapshot-assertions package and showing how to use it to check the make up of a snapshot and test several assertions that should exist.

On the DotDev.co blog there's a recent tutorial posted from Eric Barnes showing you how to combine Laravel Mix and WordPress to make it easier to manage webpack dependencies.

Laravel Mix is a fluent wrapper around the webpack module bundler, and it provides common tools that help you compile CSS and JavaScript. It’s easy to work with, and although it comes baked into the Laravel framework, you can use it anywhere.

This site is using WordPress, and when I created the theme I used Mix to handle the asset compiling; it was simple to setup. Here is a quick overview of how I did it in four steps. Please note, you will need to have a recent version of Node and npm installed on your machine before continuing.

He then walks you through a four step process to set up the integration between the two:

• Step 1. Create the package.json File
• Step 2. Webpack Mix
• Step 3. Create Your style.scss File
• Step 4. Create an app.js

He ends the post with some helpful commands you can use while you're in the development process including compiling for both dev and production environments. More information about Mix can be found in the Laravel documentation.

In a new tutorial on his site Matt Stauffer shows how to remove the Vue.js dependencies from a standard Laravel installation. There's only a few but they're installed by default and if you're not using Vue.js they can easily be removed.

The recent versions of Laravel have come with some very minor Vue dependencies out of the box. They're easy to remove, but you may have not actually tried that yet, or you might be worried you're going to leave something sitting there. So, here's a quick tip on how to remove all Vue dependencies in a new Laravel install in a few easy steps.

The process is broken down into a few steps:

• Install Laravel
• Drop Vue from package.json
• Drop the bootstrap and the sample component

The changes you'll need to make to the configuration files are included so the removal process is pretty painless.

The Delicious Brains site has a tutorial posted from author Peter Tasker showing you how to debug Javascript and PHP at the same time directly in your PHPStorm IDE.

Since I started with Delicious Brains last July, I’ve become a big fan of PhpStorm. It really is the bee’s knees. I won’t go over the full list of features, but some of the things I find helpful daily are: Cmd+clicking into method definitions, VCS integration and color highlighting of code changes, code bookmarks, and of course, Xdebug integration

In this post I want to expand on what Iain already covered with PhpStorm and Xdebug and show you how to level up your JavaScript debugging skills with PhpStorm.

The tutorial starts with a section explaining why using the PHPStorm debugger could be more beneficial and provide a more integrated workflow. It then starts in on the setup, showing how to set up the extension for Chrome so that it can talk to the IDE for the Javascript side complete with screenshots (and screencasts). With the two integrated the next step is to add a breakpoint in the code and what the results look like when it's executed and thrown.

The post finishes up covering the integration of the debugger with Xdebug allowing for the complete debugging of your application in one place.

Matt Stauffer has posted the latest in his "What's new in Laravel 5.4' series with this new post covering Laravel Mix. Mix is a reworking of the Laravel Elixir package in previous framework releases but has changed a few things up in the process.

Laravel Mix. The same and yet entirely different from Laravel Elixir.

If you're not familiar with Laravel Elixir, it's a wrapper around Gulp that makes it really simple to handle common build steps—CSS pre-processing like Sass and Less, JavaScript processing like Browserify and Webpack, and more.

In Laravel 5.4, Elixir has been replaced by a new project called Mix. The tools have the same end goals, but go about it in very different ways.

He starts with a look at what's new about Mix and how it differs from previous version of Elixir. This includes changes in the structure of the configuration file, a different files/folders structure, helpers and quite a few other changes. Matt gets into detail on each item, providing code examples for the changes and a brief summary of how it's different for those that might have used Elixir before. Check out the full post for the full details.

The Symfony Finland blog has posted a practical introduction to Typescript for PHP developers. TypeScript is a free and open-source programming language developed and maintained by Microsoft. It is a strict superset of JavaScript, and adds optional static typing and class-based object-oriented programming to the language.

A greenfield project might be a good way to try a technology, if the scope is limited and risk in general is low. For many kicking off a new project or undertaking a major rewrite is not an option, but you can still evolve and apply good ideas and fresh concepts in your work. The value of legacy in web development is understated.

This is an area I've found TypeScript to be very useful for and I think many developers can benefit from taking a closer look at it. TypeScript compiles down to JavaScript & can be adopted gradually, chances are you'll have plenty of code you can use it on.

They then cover five advantages about TypeScript that can help make adoption in your applications easier:

• Low overhead in getting started
• Great tooling for your favourite editor
• Familiar syntax for async programming
• Type Definition files
• Stability and adoption

For each section there's a brief summary of the point and, where applicable, a quick code example or screencast animation showing it in action.