Looking for more information on how to do PHP the right way? Check out PHP: The Right Way

Symfony Finland:
Sharing state in a Symfony hybrid with Twig, React and other JavaScript apps
Jan 26, 2017 @ 11:14:12

The Symfony Finland site has posted a new tutorial showing you how you can share state in a Symfony application between Twig, React and other Javascript-based applications.

Front end development has certainly grown up in the last few years. UI logic is increasingly being moved to the client side, but the traditional server-rendered views aren't going anywhere soon. And they shouldn't.

The two methods will live alongside each other and you'll have to work with two worlds. Let's explore an idea how to make this pleasant to work with, by sharing state between Twig templates and JavaScript.

The post starts with some background on a case where this kind of sharing was a requirement and, while the initial version was scrapped, a prototype application was born. He details what this prototype showcases (which JS libraries) and links to the Javascript involved over on GitHub. They then get into the code examples showing the creation of an AppState object that handles the serializing of the state information and store the result in the database via a Doctrine connection. This value is then output to the pages that require it, making it available to the frontend application (Vue.js, React or plain Javascript).

tagged: tutorial symfony shared state backend frontend javascript twig react vuejs

Link: https://www.symfony.fi/entry/sharing-state-in-a-symfony-hybrid-app-with-twig-react-etc

Three Devs & A Maybe:
Checking in with Lew and hearing about Blue n' Vue
Jan 10, 2017 @ 10:48:14

The Three Devs & A Maybe podcast, with hosts Michael Budd, Fraser Hart, Lewis Cains and Edd Mann, has posted their latest episode today - Checking in with Lew and hearing about Blue n' Vue:

In this weeks episode we have a long overdue catch-up with Lew. We start off by discussing what he has been up to, and a certain four-legged addition to his family. From here we move on to chat about working on a product vs. working in an agency setting, picking your battles when refactoring and not being scared to make mistakes. Finally, we highlight how Edd has recently used personal Homebrew taps, using Android simulators for testing and Lew’s experience with Vue.js.

You can listen to this latest episode either through the in-page audio player or by downloading the mp3 directly. If you enjoy the show, be sure to subscribe to their feed and follow them on Twitter for updates when new shows are released.

tagged: threedevsandamaybe podcast lew vuejs homebrew

Link: http://threedevsandamaybe.com/checking-in-with-lew-and-hearing-about-blue-n-vue/

Matt Stauffer:
Using Vue in Laravel 5.3, with the Vue bootstrap and sample component
Dec 23, 2016 @ 09:18:29

Matt Stauffer has posted the next article in his series of "What's New in Laravel 5.3" series with this article covering the use of Vue.js with Laravel and some of the bootstrapping that makes it easier.

In Laravel 5.3, it's easier than ever to write and use Vue components out of the box. This means 5.3 has a somewhat more opinionated default frontend stack than previous versions do. But never fear—it's easy to strip out the default components.

Let's explore 5.3's JavaScript stack together. Spin up a sample app using the Laravel installer (or, if you're like me, use Lambo) and open up the site in your favorite IDE.

He starts with the sample definitions of the package.json and Gulp files, including some dependencies including Vue.js itself and the Vue Resource packages. He then shows a sample app.js file to define the main part of the application and a matching bootstrap.js with a bit of, well, bootstrapping for the application. Finally he creates the example component, runs yarn/gulp and updates a Blade template to lay out the main application div and include the application Javascript file. Finally he shows what the resulting application should look like with screenshot included.

tagged: laravel vuejs tutorial introduction gulp yarn elixir javascript framework

Link: https://mattstauffer.co/blog/using-vue-in-laravel-5-3-with-the-vue-bootstrap-and-sample-component

Handling Laravel Validation Error Messages With Vue.js
Nov 02, 2016 @ 10:32:28

The Scotch.io blog has posted a new tutorial for the Laravel+Vue.js users out there helping you effectively handle validation error messages output through the Vue.js portion of the application.

Recently, I launched a open source side project I was working on called Open Laravel. Open Laravel allows developers to submit open source projects that were built using the Laravel framework. The project submission page uses Vue.js to submit the form asynchronously through an AJAX request. Since I am no longer sending the form the default way (refreshing after form submission), I needed a way to show Laravel form validation error messages. After going back and forth with some forum questions and answers, I was able to make it work.

The tutorial starts you out with a fresh install of Laravel and runs a npm install to get the Laravel Elixir dependencies. They then add in the other dependencies (like Vue.js itself and the use-resource package). Next up are changes on the Laravel side: adding required routes, setting up a "Posts" controller and making a simple view with the form to take in post content. They provide the Javascript for the Vue.js side as well, making use of the vue-resource to connect the form with the POST request to the backend. Finally they tie in the "FormError" component and have it either show failure messages or success messages when everything's good.

tagged: tutorial vuejs laravel form submit vueresoruce error message

Link: https://scotch.io/tutorials/handling-laravel-validation-error-messages-with-vue-js

Matt Stauffer:
Introducing Laravel Passport
Aug 01, 2016 @ 09:35:05

In his continuing series of posts looking at the upcoming features in the next version of the Laravel framework (v5.3) Matt Stauffer has posted about a new security-related offering that was recently announced at the Laracon US conference: Laravel Passport.

API authentication can be tricky. OAuth 2 is the reigning ruler of the various standards that you might consider, but it's complex and difficult to implement—even with the great packages available (League and Luca).

[...] Laravel Passport is native OAuth 2 server for Laravel apps. Like Cashier and Scout, you'll bring it into your app with Composer. It uses the League OAuth2 Server package as a dependency but provides a simple, easy-to-learn and easy-to-implement syntax.

He briefly mentions the "groundwork" that was laid for Passport in v5.2 and the application of different authentication mechanisms at different times. He then moves into the installation and configuration of the Passport system (it's not bundled so it's a separate install). He then talks about the management API that's automatically set up, the Vue.js frontend for managing clients and tokens and what it looks like when one is requested. He also provides a bit of sample code you can use to test it out for yourself once you've created a client and token on your system. He ends the post talking about the command line token generation of "personal" tokens and using middleware "scopes" to allow for easier cross-authorizations between routes.

tagged: laravel passport oauth api package release vuejs client token tutorial

Link: https://mattstauffer.co/blog/introducing-laravel-passport

Freek Van der Herten:
Building a dashboard using Laravel and Vue
Jun 09, 2016 @ 18:55:17

Freek Van der Herten has a post to his site showing you how to combine Vue.js and Laravel to make a dashboard, a simple way to display statistics and information in a "quick glance" format.

At Spatie we have tv screen against the wall that displays a dashboard. This dashboard displays the tasks that our team should be working on, important events in the near future, which music is playing at our office, and so on. We’ve opensourced our dashboard, so you can view the entire source code on GitHub. It is built with Laravel and Vue. In this post I’d like to explain why and how we made it.

He starts with a bit of history around their need for the dashboard and how previous versions (using Dashing) turned out. He gives a high level overview of what he was trying to accomplish and why he chose Vue.js. He then gets into the construction of the pieces of the dashboard:

  • the grid
  • the internet connection (server and client side)
  • the package statistics component

He also talks about the security they added to the system (protecting the dashboard from outside eyes) and how they displayed it on a TV using a Raspberry Pi.

tagged: dashboard vuejs tutorial laravel frontend backend

Link: https://murze.be/2016/06/building-dashboard-using-laravel-vue/

Acceptance Testing a Laravel and Vue.js Application
May 20, 2016 @ 11:57:28

Mohamed Said has written up an article about acceptance testing a Laravel+Vue.js application with the help of the Selenium WebDriver functionality.

The good thing about writing tests at a mature stage of the project is that many of the basic parts of the application are settled down, major changes have slowed, so deciding the shape of tests can happen in a more solid way. Testing too early, in my opinion, leads to the need of changing tests whenever you change functionality, so it’s work * 2.

This post is about a single type of tests and I think it’s the most interesting one.

He starts with a brief description of what acceptance testing is for those not familiar with the concept. He then gets to the Selenium WebDriver, provides a summary on that as well and points out the main tool they use for their tests: the Javascript driver it provides. the syntax on the driver is a bit difficult to follow so they also suggest layering Nightwatch.js on top to make for simpler, cleaner and easier to read tests. There's also information and (acceptance) testing the backend of the application with various tools, ultimately deciding on the use of Codeception.

tagged: acceptance testing larvel vuejs selenium webdriver nightwatchjs codeception

Link: https://dotdev.co/acceptance-testing-a-laravel-and-vue-js-application-4160b8e96156#.vdxu8in7i

Laravel and Vue JS: Advanced Frontend Webapp Architecture
Jul 17, 2015 @ 08:46:10

On Medium.com Russ Weas has posted a tutorial showing you how to get Laravel and Vue.js working together to create a well-structured, two-way application.

Do you use Laravel PHP and Vue JS? Do you wish there was a better way to structure your applications you build? This tutorial is just for you! In it, we set up simple two-way communication between the different components of your front-end app.

While he does provide the end result as a GitHub repository, he still walks through the full integration process to fill in the gaps. He starts with a brief introduction to a Vue.js application structure (based off of this video) and what parts need to be in play to follow along. From there he gets into the two-way communication aspect, showing how to create the bridge between the application, its views and components. He talks about some of the "missing pieces" of the current structure including an update to pass in a dependency injection "container" on the Vue side similar to how Laravel's IOC container works.

The remainder of the post is split into three parts, each with an update to the view layer (on the client side) to work with the new IOC structure:

  • using this.app in each view
  • setting data for a particular view from other views or the main app
  • calling view functions

He concludes the post with the full code for the two files they've been working with, showing everything working together: the HTML template (Laravel view) and the "app.js" Javascript for the Vue.js code.

tagged: laravel tutorial architecture vuejs frontend framework

Link: https://medium.com/laravel-news/advanced-front-end-setup-with-vue-js-laravel-e9fbd7e89fe2

Laravel Podcast:
Episode 28: Documentation, JavaScript, & Conspiracy Theories
Jun 01, 2015 @ 10:26:50

The Laravel Podcast, with host Matt Stauffer and guests Taylor Otwell and Jeffrey Way, has posted their latest episode today: Episode 28: Documentation, JavaScript, & Conspiracy Theories.

In this episode, the crew discusses recent improvements to the Laravel documentation, Vue.js, ECMAScript 6, and a few conspiracy theories.

You can listen to this latest episode in a few different ways. You can either use the in-page audio player, download the mp3 or subscribe to their feed and get this and future episodes delivered directly to your reader of choice.

tagged: laravel podcast ep28 documentation javascript conspiracy theory vuejs ecmascript

Link: http://www.laravelpodcast.com/episodes/12660-episode-28-documentation-javascript-conspiracy-theories