Polymorphic JavaScript rendering in PHP with Lambda

As a web developer you’ve must came across the term Polymorphic Javascript, or Universal Javascript as some may prefer to call it. The technique behind it is even mentioned as “The Future of web apps”. So even for the PHP community it is hard to not stumble upon any buzz around it.
In this article I’ll explain another solution that integrates into any PHP application very easily. It’s called Lambda and is a hot new AWS service.

If you’re not familiar with Lambda, it is a serverless computing service where you can upload your code as functions and AWS handles everything required regarding the scaling and availability of it. These functions can then be invoked from any web or mobile application.

Currently you have two main options to run any Javascript in your PHP application; you can install the V8JS extension (which embeds the V8 engine in your PHP app) or let PHP and Node.js communicate with each other through the DNode RPC protocol.

With the addition of Lambda, we can upload our Javascript code to the AWS cloud and invoke our code through API calls. Let’s get started with a simple “Hello, World!” function;

We need to upload this piece of code to our AWS account. Tom Bray has written an excellent tutorial about it with the same piece of code.
If you have finished the tutorial and are able to run the code through the AWS console, let’s try to invoke the same code through the AWS PHP SDK;

Awesome! As you can see we get the result of the Lambda function back as a JSON encoded payload. The example is very basic but hopefully you will already see the many usages of Lambda here. To take this code to the next step, we’ll try to render a small React application inside a simple Silex application.

Let’s say that we have a React component which just renders a simple string;

Not that complicated and this component can be very easily rendering on the client side with the following;

As you can see, it gets the name property from a payload object and renders the component into the #root element.

To render the component on Lambda, we need to upload the component’s code alongside the following handler;

Instead of rendering the component into an HTML element, we pass the resulting string to the succeed callback of the Lambda function.

Then we need to invoke the Lambda function through a very simple PHP application;

When a visitor navigates to the root of our PHP application, we invoke the Lambda function and pass a JSON encoded payload to it. The result is a React markup string which we can use to render the React component server side. Also note that I’ve also passed the payload to the client side.

A very basic example, but it can be easily extended to much more complex PHP / Javascript applications. The full source of the example — including the compiling part with webpack — can be viewed here.

Originally published at robinvdvleuten.nl

Hopefully it helped you built something amazing with PHP, Javascript and Lambda. Please show some appreciation by pressing recommend below or share your thoughts in the comments.

If you’re working on something similar and have any questions you think I could help with, I’m @robinvdvleuten on Twitter!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store