On the TeachersPayTeachers.com Engineering blog they've posted a retrospective of what they went through to scale to millions of views per day on AWS using Kubernetes, React, PHP, and Elixir.

Here at Teachers Pay Teachers (or TpT, as we call it) we’ve been in the process of migrating our website from a PHP monolith to a microservice based architecture utilizing React, Phoenix and GraphQL. To date, this migration has delighted our community of educators with it’s myriad of UX improvements. We’re able to objectively measure these improvements with our A/B testing infrastructure which also enables us to gradually expose functionality to broader and broader levels of traffic.

Our product page receives ~2 million pages views per day making it the most heavily trafficked page on TpT (here’s an example page). We decided to use a simple UI refresh as an opportunity to migrate the page to our new tech stack. This post dives deeply into the challenges we overcame while scaling the product page on our new infrastructure!

The post then shows an infographic of their migration and the major steps in the process along a timeline. They also include an overview of their updated architecture, specific technical issues found during the migration and handling server load. They also cover error spikes they saw just after scaling and how they were either able to resolve or just dismiss them as "red herrings".

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.

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.

On the Laravel News site a tutorial has been published showing you how to install Bourbon and Neat with Laravel's "elixir" functionality (a wrapper around the popular Gulp installation tool for Javascript and CSS library handling.

Laravel Elixir is a wrapper that simplifies working with Gulp, it makes compiling, concating, minifying and versioning your JavaScript and CSS files very fluent and easy.

Because many projects using Bootstrap, when you start a new Laravel project, you will find that it is included by default as a basic starting point, but Laravel does not dictate which JavaScript or CSS frameworks you should use. One alternative is Bourbon and Neat created by thoughtbot.

Bourbon is a mixin library for Sass and Neat is a Bourbon addon for creating semantic grids. In this tutorial let’s take a look at how to setup these tools with Laravel Elixir.

They start with a brief overview of the Bourbon tool, showing how it helps to reduce the amount of duplicate code in your source files. There's also a bit about Neat, a responsive grid library that makes it easier to keep your layout "clean and semantic". With those defined they get into the installation of these two packages with two different approaches:

• First installing Bourbon/Neat via npm then importing them in the SASS config
• Or installing them via npm, edit the Gulp configuration then import them relatively

With either of these methods in place the Elixir tool can then run the compilation right alongside the other sources and push the resulting CSS out the other side including the Bourbon and Neat functionality.

The SitePoint PHP blog has a new tutorial posted introducing you to Elixir, the "Laravel way" of working with assets in your application and making it easier and more unified.

In today’s web applications, we use a wide variety of tools to speed up the development workflow while keeping the code base as lean as possible. [...] One such type of tool are preprocessors for CSS and JavaScript. [...] Besides preprocessors, there are also many tasks we as developers often have to do, including linting JS files, testing, concatenation, minification, just to name a few.

All this led to the creation of JavaScript-based task runners like Grunt and Gulp. [...] Gulp syntax is clean and easy to use, but there’s always room for doing things the easier way. Laravel 5 introduced Elixir: a Node.js based tool developed by Jeffrey Way, which manages our Gulp tasks the easy way.

They start with the requirements you'll need to get Elixir up and running, including Node.js and Gulp itself (it's a "frontend" for it, not a replacement). They talk about where Elixir assumes your assets will live and some examples of:

• Compiling Less files
• Compiling CoffeeScript files
• Compiling multiple files at once
• Using different source and output directories
• Concatenation files

...and much more. They also show how to perform Jade->Blade compilation for templating and how to configure Elixir to match your needs. The post ends with a more "real world" example with a full site structure, how to run the tasks and some more advanced topics (like custom tasks and using the assets in Blade templates).

The SitePoint PHP blog has a tutorial posted showing you how to combine Laravel and AngularJS to create flexible and easily maintainable applications on both the frontend and backend of the app. He also covers a topic he says other tutorials leave out: scaling.

In this article, we’re going to set up a Laravel API with Angular Material for the front end. We’re also going to follow best practices that will help us scale with the number of developers working on the project and the complexity behind it. Most tutorials cover this topic from another perspective – they completely forget about scaling. While this tutorial is not targeted at small todo apps, it is extremely helpful if you’re planning to work with other developers on a big project.

He includes a link to the final product in action and spends the rest of the tutorial walking you through it's construction. First he sets up the Laravel application, also installing the debug bar for easier debugging. He installs gulp, bower and the "laravel-elixir-angular" package to make creating the AngularJS frontend simpler. He shows how to create the folders for the Angular application and the creation of the gulpfile.js configuration to build out the app. He uses bower to install the latest Angular, builds out the main module and connections the frontend to the backend.

From there he starts building out the actual application that outputs some basic content, generated by Angular. He hooks in some other pieces of functionality and libraries including: ui-router, Restangular, Toast and the use of dialogs. He ends with a look at deploying the application and maintaining code quality via jshint, phpcs and JSCS.

On the Laravel News site today there's a tutorial posted showing you how to set up an application that uses Elixir and Bootstrap for the layout of an application. Elixir is a wrapper for gulp, a build tool for node.js apps.

One exciting feature coming in Laravel 5 is the new Elixir package. At its core it is a wrapper around gulp to make dealing with assets easier. For my first look at this new tool I decided a good use case would be to setup Bootstrap and get everything working just like you would in a real world scenario. If you are not familiar, bootstrap includes three main components. CSS, JavaScript, and custom fonts. So we need to account for all those in our setup.

They walk you through the Elixir installation process (via node) of Gulp and setting up dependencies via Laravel's included "package.json" definition. He then shows how to install bower (another package manager) and use that to install the Bootstrap files (SASS version). Finally they show how to bootstrap these into your application's workflow - the SASS imported from bower, the fonts/javascript pulled in by gulp and finally the Elixir setup to merge them all together.

Jack Herrington has posted a new tutorial to the Zend Developer Zone today showing how to combine PHP, your database of choice and Flex to create a dashboard in your application.

Let's face it: Interactive graphs and dashboards have never been easy to put together on the web. Sure, there are graphing libraries out there for PHP, but to get something that looks really good and that a user can play with has been tough. Or at least, it was yesterday.

He shows how to create a simple Flex application that takes in XML data (from whatever backend, he uses a PHP script that uses DOM) and displays the information - his sample traffic data - as a graph. This graph is an extension of the Elixir library from ILOG and makes dropping information into graphs and charts simple.

Screenshots of the Flex side of things and code for the PHP side are both provided.