How To Progressively Replace Parts Of A Complex Laravel Web Application With VueJS

Todo-style micro-apps are nice for demo purposes. However, these SPA tutorials won’t help you integrate VueJS into your existing, full-fledged, complex Web app.

Here is a cool and very simple trick I am currently using to slowly integrate the VueJS javascript framework into an existing Laravel Web application. Note that I am not interested (yet) in making the whole app into a Single Page Application (SPA). First, I want to try and extract value by moving a few features from the jQuery mindset to the VueJS, reactive mindset. Then I can make an educated decision on whether to go full VueJS.

A Quick Fix To Codeception’s PhpBrowser Throwing 404 Errors Upon Testing A Laravel App On A VirtualHost

Warning: To a non tech-savvy reader, this may probably be one of the most abstruse post titles ever. Sorry about that. Move along if you will, I promise I won’t hold it against you.

Having found a dirt-simple solution to an obscure problem I’ve been having for hours, I felt that I should publish the fix so that it may help others. It’s one of those things that take literally hundreds of lines of code to diagnose and just over 10 characters to solve for good.

Ready? Let’s get down to it! (TL;DR)

The Problem

So I have been working on Laravel for a few days now, and it is a real delight. Every one of its components is designed in a clean, beautiful way and whatever construed goal you’re doing to achieve, whatever methodology you’re using, the framework almost never goes against your will. As part of my journey into building a solid Web application, I wanted to use BDD and especially automated acceptance testing with the Codeception framework. For the few who were brave enough to actually read on without even using Codeception, kudos to you —also, you’re missing out; install it at once. Here’s a sample of code that you can write to test for the login feature of your application:

Making An App With PhoneGap & jQm Part III: A Stateless Authentication Layer 33

If you missed Part II: Loading JavaScript Properly, you may want to go there and grab the code we wrote so far so that you can follow more easily what we’ll do in this part.

Today, we’ll see how to implement a RESTful, stateless authentication layer in our application. Let’s first talk a bit about REST; the acronym stands for “REpresentational State Transfer” and describes a way of handling client-server transactions in a uniform, layered, stateless, scalable and cacheable way. I know that’s a lot of adjectives to process so I won’t delve into much more details here. We’ll focus on the stateless constraint, which requires that the exchanges have no memory per se, they always contain all the information that the other party has to know to process them correctly.

I have tried to simplify my code examples as much as possible. The goal being “stateless authentication“, I have focused on that, which means that for now we will deal with “ugly” URLs like https://foo.bar/server.php?a=b&id=123; we’ll see in a while how to do the same with “clean” URLs like https://foo.bar/users/bob

The REST philosophy is widely considered one of the best ways to solve communication challenges between a client and a server over the Internet. You may want to read the linked Wikipedia article for more details about the how and why.

Now what we’re interested in is the design of a system in which we can “phone home” from our application to an online server. This is needed for applications which have to pull data from a remote host like news items or score boards, or on the contrary push data to a remote host like creating a new account or updating profile information. Obviously such a system must allow for authentication, or we could end up with users accessing or modifying other users’ data at will!

Phoning Home (Cross-Domain) With jQuery

Phoning home is surprisingly easy with PhoneGap & jQuery, and at the same time it can prove hard to do it right. What I mean is that on the one hand jQuery provides us with powerful tools like jQuery.ajax(), which we can leverage in order to query our servers; on the other hand, there is a bunch of things we need to do so that our query is not blocked by the anti-cross-domain security features embedded in web browsers like Chrome.

Making An App With PhoneGap & jQm Part II: Loading JavaScript Properly 10

If you missed Part I: A Simple HTML5 Skeleton, you may want to go there and grab the code we wrote so far so that you can follow more easily what we’ll do in this part.

One of the challenges in developing apps using PhoneGap and jQuery.Mobile is to make sure that the libraries are properly loaded before any critical code is executed. Another challenge is to make the difference between code which is due to execute only once, code which will execute on every activity, etc. In this part we’ll explore those differences and I’ll present to you a way of making sure that your functions execute at the right time.

Namespacing The Application’s JavaScript

Namespacing your functions into an object is a great way of avoiding potential conflicts with existing functions; it also serves as an additional separation of your JS code from your HTML, it can make it easier to debug errors by keeping related entities close to each other. It may also make the use of a test framework like QUnit easier to implement.

Here is the base skeleton we’ll use for our app:

var App = {
	"app_loaded": false,
	"testing_on_desktop": true,

	"init": function () {
	},

	"utilities": {
	},
};

A quick note before we go deeper: you can make use of the object notation in JavaScript to nest multiple namespaces, like I did with “utilities”. This is a pretty cool feature to make your code a bit more organized than putting everything at the same level.

Setting Up jQuery.Mobile In <head>

As we’ve seen in Part 1, jQuery.Mobile is a bit special in the sense that it modifies the DOM upon loading. For this reason, any configuration code we’d like to see executed must be set before the library is loaded, using the “mobileinit” event which marks the beginning of jQuery.Mobile’s execution.

As an example of what you can configure, as my app needs to “phone home” I had to activate the cors option in both jQuery and jQuery.Mobile. The full list of configuration variables is available here. Here’s the result in <head>:

	<script charset="utf-8" src="js/app.js"></script>
	<script>
		jQuery(document).bind("mobileinit", function () {
			console.log("configuring jqm...");

			// required for "phoning home" (load external assets, etc.)
			jQuery.support.cors = true;
			jQuery.mobile.allowCrossDomainPages = true;
			
			jQuery.mobile.phonegapNavigationEnabled = true;
			jQuery.mobile.defaultDialogTransition = "pop";
			jQuery.mobile.defaultPageTransition = "none";
			
			jQuery.mobile.loader.prototype.options.text = "loading";
			jQuery.mobile.loader.prototype.options.textVisible = true;
			jQuery.mobile.loader.prototype.options.theme = "a";
		});
		App.init();
	</script>
	<script charset="utf-8" src="js/jquery.mobile-1.3.1.min.js"></script>

I advise you to systematically add console.log("[funcName]") at the beginning of every function as it makes debugging much much easier, especially when callbacks are involved because they can be rather messy in the way/order they fire. Oh, notice the App.init() call? Let’s see what we can put in there.

Making An App With PhoneGap & jQm Part I: A Simple HTML5 Skeleton 5

In this series, I will explain how I am using PhoneGap & jQuery.Mobile (on top of jQuery) to build an App for Android while being able to test it in my desktop browser. This is not an introduction on PhoneGap or jQuery.Mobile per se. I will not focus on Java and I won’t explain how to install PhoneGap or build the app from an IDE like Eclipse; you may need to read some other tutorial first to cover those points and then come back to this page when you can build your app from your IDE. Don’t worry too much though, you won’t need much knowledge of Java for I will expose some ways we can use to test the app in a desktop browser without the need to recompile it everytime we change something.

Now this is my first app, which means that most of the code I’ve put in so far required some trial-and-error for it to work. Hopefully you’ll find (parts of) this tutorial useful and you’ll be able to code your way faster than me!

Note: I wouldn’t dare pretending my code is perfect, and for the very same reason it’s my first app there are most certainly better ways of doing some things; if you have any question or remark concerning my code, please do not hesitate to leave a comment, that’s the best way for everyone to improve their skills.

Table of Contents

Here is how the tutorial is split:

Part I: A Simple HTML5 Skeleton
HTML5 basic structure, resources order, multiple pages and a menu with icons
Part II: Loading JavaScript The Right Way
JavaScript load order, jqm settings, App.init() & execution levels
Part III: A Stateless Authentication Layer
REST concepts, public/private tokens, some PHP server code
Part IV: ?
I’m not there yet!

Let’s Start With a (Very) Basic HTML5 Template

3 Useful CakePHP Plugins 1

Today I wanted to share a bunch of CakePHP plugins you might not have heard about, which I’ve been using to bootstrap my latest Web-oriented projects. Here goes the list:

Miles JOHNSON’s Admin
This CakePHP plugin aims at generating a fully functional admin backend for CRUD operations and ACL managemement. It is quite recent and still in alpha but actively developed and full of promises. You can read Miles’ blog post on his motives and roadmap here.
Paul REDMOND’s Chosen
Another CakePHP plugin which encapsulates the excellent Chosen plugin, allowing you to generate the ultimate select boxes for your forms: functional inline search, multiple selection, progressive enhancement… the features list goes on. You can find more information on this page.
Yasuo Harada’s TwitterBootstrap
Every Web developer has heard about Twitter’s Bootstrap. This CakePHP plugin is designed to extend some helpers like Html and Form with functionality derived from Bootstrap: glyphicons, Bootstrap-styled form elements and notifications, etc.

All those plugins are completely free, support Composer and are available on Packagist. That’s all for now, but I’m all ears (or, you know, eyes) for any library I haven’t listed which you find useful 🙂

3QK5UA6HBN7W