Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine

Turbo: Drive, Frames & Streams!

Video not working?

It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing the gstreamer0.10-ffmpeg gstreamer0.10-plugins-good packages.

Thanks! This saves us from needing to use Flash or encode videos in multiple formats. And that let's us get back to making more videos :). But as always, please feel free to message us.

Hey friends! Welcome back for part two of our Symfony UX series. The whole point of this series is to take a traditional web app - so an app with Twig templates that return HTML - and learn to do two things with it.

First, how to write truly professional JavaScript that... always works... even if some HTML is loaded via Ajax. We covered this in the first tutorial about Stimulus.

The second goal of this series is all about how we can make our app feel like a single page application. What I mean is: how we can make our site lightning fast by never having any full page refreshes. That is what Turbo gives us.

The 3 Parts of Turbo

To be more precise, Turbo is actually three different parts.

The first is "Turbo Drive". It's what turns clicks and form submits into Ajax calls. This is what gives you that single page app experience.

The second part is "Turbo Frames", which allows you to separate your page into small sections that can load and navigate independently.

And the third part is "Turbo Streams", which allows you to update any HTML element that's currently showing on the page... from inside your Symfony app. Crazy, right? When you use Turbo Streams along with Mercure, this can even give you the ability to make a real time chat app... while writing zero JavaScript.

And you're free to use all three parts... or just one or two: they operate independently.

Is Turbo New?

Now Turbo itself is... sort of brand new. If you check out its GitHub page, it's version 7.0.0-beta.5 at the time of recording. So... why is it version 7 if it's so new? Because one part of turbo - Turbo Drive, the part that turns link clicks and form submits into Ajax calls - has been around for years. It was previously called "Turbolinks" and you can still find helpful blog posts and StackOverflow answers if you search using that term.

But the other two parts - Turbo Frames and Turbo Streams are brand new. These are mostly already very good, but we will see a few rough edges and missing features along the way. But we won't let that stop us: Turbo's event system will give us the power to do almost anything.

Before we dive in, I also need to mention that Stimulus and Turbo were both affected by a serious situation at the company Basecamp. This has left both libraries without their lead developers. Am I worried? It's not ideal... but I'm not too worried. The community is large and some big companies use this technology. And at the very least, I'm confident that Turbo - or something very similar to Turbo - will be around for a long time to come. You can't stop a great idea. We're actively integrating Turbo into SymfonyCasts right now.

Project Setup

So let's do this! To "turbocharge" your learning experience you should code along with me! Hey - the puns probably won't get any better, so, settle in. Download the course code from this page. When you unzip it, you'll have a start/ directory with the same code that you see here. Check out the, README.md file for all the setup details.

I'll go through just the last few steps. Open a terminal and move into the project. I'll use the Symfony binary to start a local web server with:

symfony serve -d

Before we go check that out, let's also make sure to run Webpack. Install the Node dependencies with:

yarn install

And... when that finishes, run Webpack with:

yarn watch

As soon as this builds... perfect - spin over to your browser and head to https://127.0.0.1:8000 to see... MVP Office Supplies! Our store for selling minimally viable office products to trendy startups. This is the same project as the first tutorial, though I did make some changes, like adding a review system below each product... and upgrading some libraries.

Now that we have this running, let's install Turbo and activate Turbo Drive to instantly eliminate full page refreshes. Woh.

Leave a comment!

5
Login or Register to join the conversation
jmsche Avatar

Note that you can't build assets using node 18, but node 16 seems to work without issues.

1 Reply

Hey @jmsche!

It works ok for me on node 19 - just doing a composer install, yarn install, and yarn watch all happen without any error on start/ and finish/ dir. It wouldn't surprise me if the build stopped working in newer Node versions (at least without updating your node deps), but I didn't hit any issues. Do you remember the problem you hit?

Cheers!

Reply
jmsche Avatar

Hi Ryan,

Ran commands using node 18.10.0 here (retrieved via nvm IIRC, not sure if that matters).

Here is the error I get when I run yarn watch in the start folder:

yarn watch
yarn run v1.22.19
$ encore dev --watch
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Running webpack ...

node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/home/jmsche/Downloads/start/node_modules/webpack/lib/util/createHash.js:145:18)
    at BulkUpdateDecorator.digest (/home/jmsche/Downloads/start/node_modules/webpack/lib/util/createHash.js:80:21)
    at NormalModule._initBuildHash (/home/jmsche/Downloads/start/node_modules/webpack/lib/NormalModule.js:874:53)
    at /home/jmsche/Downloads/start/node_modules/webpack/lib/NormalModule.js:914:10
    at processResult (/home/jmsche/Downloads/start/node_modules/webpack/lib/NormalModule.js:710:12)
    at /home/jmsche/Downloads/start/node_modules/webpack/lib/NormalModule.js:809:5
    at /home/jmsche/Downloads/start/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/jmsche/Downloads/start/node_modules/loader-runner/lib/LoaderRunner.js:251:18 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.10.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The error seems to be the same for the finish directory.

Reply

Hey Jmsche,

Thanks for mentioning this! It might be helpful for others. I think we need to add a note about it in the course

Cheers!

Reply
kousaja1 Avatar
kousaja1 Avatar kousaja1 | posted 2 days ago | edited

Hi there, if anyone has a problem with connecting to the database, don't worry. The .env file downloaded with the project is not working.

Change the:

DATABASE_URL="postgresql://db_user:db_password@127.0.0.1:5432/db_name?serverVersion=13&charset=utf8"

to:

DATABASE_URL="mysql://root:password@127.0.0.1:3306/root?serverVersion=5.7"

and you are good to go :)

Reply
Cat in space

"Houston: no signs of life"
Start the conversation!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=7.4.0",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "1.11.99.1", // 1.11.99.1
        "doctrine/annotations": "^1.0", // 1.13.1
        "doctrine/doctrine-bundle": "^2.2", // 2.3.2
        "doctrine/orm": "^2.8", // 2.9.1
        "phpdocumentor/reflection-docblock": "^5.2", // 5.2.2
        "sensio/framework-extra-bundle": "^6.1", // v6.1.4
        "symfony/asset": "5.3.*", // v5.3.0-RC1
        "symfony/console": "5.3.*", // v5.3.0-RC1
        "symfony/dotenv": "5.3.*", // v5.3.0-RC1
        "symfony/flex": "^1.3.1", // v1.18.5
        "symfony/form": "5.3.*", // v5.3.0-RC1
        "symfony/framework-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/property-access": "5.3.*", // v5.3.0-RC1
        "symfony/property-info": "5.3.*", // v5.3.0-RC1
        "symfony/proxy-manager-bridge": "5.3.*", // v5.3.0-RC1
        "symfony/runtime": "5.3.*", // v5.3.0-RC1
        "symfony/security-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/serializer": "5.3.*", // v5.3.0-RC1
        "symfony/twig-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/ux-chartjs": "^1.1", // v1.3.0
        "symfony/ux-turbo": "^1.3", // v1.3.0
        "symfony/ux-turbo-mercure": "^1.3", // v1.3.0
        "symfony/validator": "5.3.*", // v5.3.0-RC1
        "symfony/webpack-encore-bundle": "^1.9", // v1.11.2
        "symfony/yaml": "5.3.*", // v5.3.0-RC1
        "twig/extra-bundle": "^2.12|^3.0", // v3.3.1
        "twig/intl-extra": "^3.2", // v3.3.0
        "twig/string-extra": "^3.3", // v3.3.1
        "twig/twig": "^2.12|^3.0" // v3.3.2
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.0
        "symfony/debug-bundle": "^5.2", // v5.3.0-RC1
        "symfony/maker-bundle": "^1.27", // v1.31.1
        "symfony/monolog-bundle": "^3.0", // v3.7.0
        "symfony/stopwatch": "^5.2", // v5.3.0-RC1
        "symfony/var-dumper": "^5.2", // v5.3.0-RC1
        "symfony/web-profiler-bundle": "^5.2", // v5.3.0-RC1
        "zenstruck/foundry": "^1.10" // v1.10.0
    }
}