Sorry, you need to enable JavaScript to visit this website.
Skip to main content

Discover Symfony UX. UI with Stimulus = fewer JS headaches for you

A white paragraph.

 


 

Symfony Station Logo

symfony logo

 

 


 

Purple tinged view of space

Introduction

Let’s explore the magic that Stimulus JS brings to Symfony UX.

This is a companion article to Discover Symfony UX’s Twig Components. Read that first, as it contains more detailed Symfony UX information referenced here.

As mentioned in our Twig article, we are fans of componentization. It’s a philosophy similar to the S in SOLID programming principles. IYDK that’s the single responsibility principle.

And we are especially fans of the web components used in user interfaces. They are a fine example of componentization.

But we are not fans of JavaScript, especially for UI components. For a review of its clusterfuckiry see our article on Frontend Madness.

Thus, we love anything that simplifies using it or, better yet, eliminates JS. That’s why we use tools like CSSUI on this Drupal site. And never use JS when it’s not necessary. In other words, we use HTML and CSS as you should.

In a Symfony project’s UI, components are handled by a group of tools with the moniker of Symfony UX. This article is going to explore it and its non-Twig-related UI components.

Symfony UX home page screenshot

Symfony UX

If you have read our Twig Components article, you can skip to this.

If not, Symfony describes Symfony UX as “JavaScript tools you can't live without. They’re a set of PHP and JavaScript packages to solve everyday frontend problems featuring Stimulus and Turbo.”

“Symfony UX is an initiative and set of libraries to seamlessly integrate JavaScript tools into your application.

Behind the scenes, the UX packages leverage Stimulus: a small but powerful library for binding JavaScript functionality to elements on your page.”

Thank you, abstraction.

How does Symfony UX work?

The short answer is when you install a package (aka Stimulus component), Symfony updates everything automagically.

The long answer, according to the docs is ⬇️.

“When you install a UX PHP package, Symfony Flex will automatically update your package.json file to point to a "virtual package" that lives inside the PHP package.

The Flex recipe will also update your assets/controllers.json file to add a new Stimulus controller to your app.

Finally, your assets/bootstrap.js file - working with the @symfony/stimulus-bridge - package will automatically register:

  • All files in assets/controllers/ as Stimulus controllers;
  • And all controllers described in assets/controllers.json as Stimulus controllers.

The end result: you install a package, and you instantly have a Stimulus controller available!”

FYI, the virtual package is the Stimulus JS node package.

Symfony UX / Stimulus controllers control your user interface. And thanks to them, you can do so without writing a ton of custom JavaScript. They handle the JS for you. You handle your PHP.

However, you can still write custom JavaScript inside Stimulus Controllers or use third-party components. If that floats your boat.

Stimulus components homepage screenshot

Why? Stimulus was created and is used by developers outside of Symfony (specifically Ruby on Rails). Thus additional tools are available beyond the Symfony UX packages.

In particular, according to their documentation:

  • stimulus-use: Add composable behaviors to your Stimulus controllers, like debouncing, detecting outside clicks, and many other things.
  • stimulus-components: A large number of pre-made Stimulus controllers, like for Copying to clipboard, Sortable, Popover (similar to tooltips) and much more.”

You should always steal your rivals’ good ideas. And share yours. So props to Symfony.

As we just mentioned, you can use code from these third-party tools in your controllers.

Symfony docs say ⬇️:

“By default, all of your controllers (i.e. files in assets/controllers/ + controllers in assets/controllers.json) will be downloaded and loaded on every page.”

Be responsible

A quick note is warranted here. Symfony UX gives you powers. But with great power comes great responsibility. By the way, who said that? Uncle Ben? An Ancient Greek philosopher? 😉

So, just because you can use these doesn’t mean you should. Remember Jurassic Park. Plus, simpler is better and less is more.

Screenshot showing all Symfony UX componente

Symfony UX Components/Packages

As the image above indicates, there are twelve components to make your programming life easier.

You can explore them all here.

Or continue reading for the non-Twig-related ones 🌿.

We will look at and grade:

  • Autocomplete 🙂
  • Chart.JS 📊
  • React 🤮
  • Vue 🙂(Update 9/8/2022)
  • Image Cropper 🖼
  • Lazy Image 🥱📷
  • Stylized Dropzone ⏫
  • Swup Integration 📖
  • Notify 📩
  • Typed ⌨️

For non-American readers A = great, B = good, C = so-so, D = Crap, there is no E, F = Failure

We will publish an article in the future on Turbo🏃🏽. I’m thinking of “Discover Symfony UX: Turbo lets you say FU to SPAs” for the title.

Some of the components are useful. And IMHO some should be avoided whenever possible, like JS itself. When you should use HTML and CSS people, do so. And I don’t mean Failwind or Bootcrap. Use the languages directly and correctly.

Anyway, most of these components do implement JavaScript, while a few have a dash of Symfony and Ajax sprinkled in.

Symfony UX Autocomplete component screenshot

Autocomplete

Autocomplete is an appropriate use of JS.

It provides smart form controls via Ajax-powered autocomplete and <select>.

The docs say:

“Breathe life into EntityType and ChoiceType fields with Tom Select and a sprinkle of Ajax.”

And Tom Select says:

“Tom Select is a dynamic, framework agnostic, and lightweight (~16kb gzipped) <select> UI control. With autocomplete and native-feeling keyboard navigation, it's useful for tagging, contact lists, country selectors, and so on. Tom Select was forked from selectize.js with four main objectives: modernizing the code base, decoupling from jQuery, expanding functionality, and addressing issue backlogs.”

Autocomplete gets an A+ grade.

Symfony UX chart js component screenshot

Chart.JS

Chart.JS is another appropriate use of JavaScript. Charts are useful for user experience and effective content.

The component lets you render graphs via chart.js.

Symfony says:

“Leverage the power of chart.js entirely from PHP.”

I say amen, brother.

And Chart.JS itself says it is “simple yet flexible JavaScript charting for designers and developers.”

And they are correct.

Chart.JS get an A+ too.

Symfony UX React component screenshot

React

I would have chosen Vue, Alpine, or even Svelte for this component. But like WordPress, Symfony screwed up and chose React. Bigger is not better, and popular never is.

I stay away from it just like I stay away from religious fanatics, fascists, communists, conspiracy theorists, and stupid people in general.

There is too much JS in the world, to begin with, especially a clusterfuck like React. If I have to touch it, I hold my nose and use a 410-foot pole.

Plus, it’s from fucking Facebook.

But here’s the component link with more info if you’re interested.

Remember, if you are forced to use some SPA-like garbage UI by an evil boss or ignorant client, you can roll your own web components. Or use 3rd party components like Vue.

Fortunately, SymfonyCasts says you can use Vue in Stimulus controllers. Just not in the React component.

Better yet, use CSS components in your app or Stimulus components with Symfony UX.

Rant over and React gets a totally objective F. 😉

Screenshot Symfony UX Vue Component

Update 9/8/2022.

Fortunately for you, Symfony UX just released a Vue component.

Vue explains the advantages of using it over something like React.

"The web is extremely diverse - the things we build on the web may vary drastically in form and scale. With that in mind, Vue is designed to be flexible and incrementally adoptable. Depending on your use case, Vue can be used in different ways:

  • Enhancing static HTML without a build step
  • Embedding as Web Components on any page
  • Single-Page Application (SPA)
  • Fullstack / Server-Side Rendering (SSR)
  • Jamstack / Static Site Generation (SSG)
  • Targeting desktop, mobile, WebGL, and even the terminal"

Like Symfony with Vue you only use what you need. You progressively implement it.

The Symfony UX documentation says:

"Vue.js is a JavaScript framework for building user interfaces. Symfony UX Vue.js provides tools to render Vue components from Twig, handling rendering and data transfers.

Symfony UX Vue.js supports Vue.js v3 only.

UX Vue.js works by using a system of Vue.js controller components: Vue.js components that are registered using registerVueControllerComponents and that are meant to be rendered from Twig."

Explore all the docs here.

And learn more about Vue 3 here.

Vue gets a totally objective A+. 😉

Symfony UX Image Cropper component screenshot

Image Cropper

As the name implies, you can crop images with Image Cropper.

Symfony says:

“Let your users crop images with Cropper.js, then grab the final image from PHP. Simple.”

I say, why? 98.874% of the time, this is unnecessary for the frontend. Maybe if you are building a backend for someone? Or a photography tutorial app?

Image Cropper gets a B-.

Symfony UX Lazy Images component screenshot

Lazy Image

Lazy loading images is an appropriate use of JS. So, hurray for Lazy Image.

Symfony says:

“Load fast with Lazy Images. Serve small or blurred images first, then load the real thing after the page loads.”

It’s an interesting implementation using BlurHash.

Blurhash says:

“BlurHash takes an image and gives you a short string (only 20-30 characters!) that represents the placeholder for this image. You do this on the backend of your service and store the string along with the image. When you send data to your client, you send both the URL to the image and the BlurHash string. Your client then takes the string and decodes it into an image that it shows while the real image is loading over the network. The string is short enough to comfortably fit into whatever data format you use. For instance, it can easily be added as a field in a JSON object.”

Lazy Image (if you need it) gets an A-.

Symfony UX Stylized Dropzone component screenshot

Stylized Dropzone

This component lets you implement a styled upload zone in your app.

Symfony says:

“Native Upload Dropzone with style. Upgrade your upload field to a stylized "Dropzone" with file previews.”

The documentation says:

“The most common usage of Symfony UX Dropzone is to use it as a drop-in replacement of the native FileType class. It provides a default stylesheet to ease usage. You can disable it to add your design. Symfony UX Dropzone allows you to extend its default behavior using a custom Stimulus controller.”

This could be useful at times so Stylized Dropzone gets a B+.

Symfony UX Swup component screenshot

Swup Integration

Swup Integration can be used as an alternative to the Turbo component. That’s interesting.

You can create slick Ajax Page Transitions with Swup.

Symfony says:

“Replace full page refreshes with Ajax-powered, stylized page transitions.”

Swup.js says it’s a:

“Complete, flexible, extensible, and easy to use page transition library for your web.”

It’s worth exploring.

Swup Integration gets an A.

Symfony UX Notify component screenshot

Notify

Notify provides native browser notifications.

Simple enough.

Symfony says:

“Notify users from inside PHP. Send real-time, native browser notifications to everyone via Symfony's Notifier Component.”

Their docs say:

“To use Symfony UX Notify you must have a running Mercure server and a properly configured notifier transport. Then, you can inject the NotifierInterface service and send messages on the chat/myMercureChatter channel. Finally, to "listen" and trigger the notifications in the user's browser, call the stream_notifications() Twig function anywhere on the page.”

This is useful so Notify gets an A+.

Symfony UX Typed component screenshot

Typed

Again, why? Maybe in a tutorial?

This is the type of half-assed and unnecessary JS functionality that plagues web design. You can see how annoying it is on the Symfony UX homepage.

But it’s a half-free world, so knock yourself out if interested.

Typed gets an objective C. 😉

Wrapping it up

Ok. School’s out.

Let’s hope there are more components on the way from Symfony UX. Alternatives to React insertion should top the list. Update 9/8/20022. They added a Vue component. Yay!

Carousel? No. Lightbox? Maybe. Dropdown? Yes. Textarea autogrow? 🤯

And if you have a request, let please Symfony know. You might want to make a donation as well. Let me rephrase that. Give them some money. Free riders suck.

You can use their commercial products like Symfony Insight, attend official Symfony conferences, buy the Symfony book, or if you are rich or own a company, sponsor them.

Money rant over, you now know more about Symfony UX and specifically its JS-related components. Which are most of them. The initiative and set of libraries seamlessly integrate JavaScript tools into your application. Some are more useful than others. And if you believe in proper UI, some should be avoided 99% of the time.

They can:

  • autocomplete fields 😎
  • insert charts into your application 😊
  • infect your app with React 😡
  • use Vue rather than React 😊
  • crop images 😐
  • lazy load images 😎
  • preview files to be uploaded 😊
  • add page transition animation 😊
  • add notifications 😎
  • and provide showy typing. 😞

Now, implement this goodness (minus the React) into your Symfony projects with less JS and no BS required. Use the ones that improve your UX and skip any unnecessary UI.

Want to eliminate even more JavaScript? Read our article, Frontend Madness: SPAs, MPAs, PWAs, Decoupled, Hybrid, Monolithic, Libraries, Frameworks! WTF for your PHP backend?

Explore some more

We rate these SymfonyCast courses 10 out of 10.

It’s worth the investment. Plus, they are entertaining.

To learn about more advanced options, visit the repository @symfony/stimulus-bridge, the Node package that is responsible for a lot of the magic Stimulus JS brings to Symfony UX.

Happy coding Symfonistas!

 

Visit our Communiqué Library

You can find a vast array of curated evergreen content.

 

Author

Reuben Walker photo

 

Reuben Walker

Founder
Symfony Station

 

 

 


 

Discover Symfony UX’s Twig Components. UI without JS or BS.

A white paragraph.

 


 

Symfony Station Logo

symfony logo

 

 


 

Astronaut on an alien planet.

Introduction

With Symfony UX a PHP class + template = Twig component. Use them to build a highly-interactive UI from the comfort of Twig. No JS and no BS are required.

By the way, if you are not familiar with all the acronyms, UX equals user experience, UI equals user interface, JS equals JavaScript, which is a synonym of BS and equals you know.

We are big fans of componentization at Symfony Station’s parent, Mobile Atom Media. The Atom in our name is inspired by atomic design. It aspires to break design elements into the smallest form possible with the aim of reusability. That sounds similar to a programming component. The S in SOLID programming principles in particular. That’s the single responsibility principle.

And we are especially fans of the various flavors of web components used in user interfaces. They are a fine example of atomic design.

But, we are not fans of JavaScript, especially for UI components. For a review of its clusterfuckiry see our article on Frontend Madness. Thus, we love anything that simplifies or better yet eliminates JS. That’s why we use tools like CSSUI on this Drupal site.

In a Symfony project’s UI, components are handled by a group of tools under the purview of Symfony UX. This article is going to explore it and its components that are related to Twig templates. No JavaScript is required for the later.

If you need a primer on Twig, our article, Twig: The Ultimate Guide to the Premier PHP Templating Language, has you covered. Please read it first.

Before we get into Twig components we first need to understand a little about Symfony UX.

Screenshot of SymfonyUX home page

Symfony UX

Symfony describes Symfony UX as “JavaScript tools you can't live without. They’re a set of PHP and JavaScript packages to solve everyday frontend problems featuring Stimulus and Turbo.”

“Symfony UX is an initiative and set of libraries to seamlessly integrate JavaScript tools into your application. For example, want to render a chart with Chart.js? Use UX Chart.js to build the chart in PHP. The JavaScript is handled for you automatically.

Behind the scenes, the UX packages leverage Stimulus: a small, but powerful library for binding JavaScript functionality to elements on your page.”

Yay abstraction.

How does Symfony UX work?

The short answer is when you install a package (aka Stimulus component) Symfony updates everything automagically.

The long answer according to the documentation is ⬇️.

“When you install a UX PHP package, Symfony Flex will automatically update your package.json file to point to a "virtual package" that lives inside the PHP package.

This gives you a real Node package (e.g. @symfony/ux-chartjs) that, instead of being downloaded, points directly to files that already live in your vendor/ directory.

The Flex recipe will usually also update your assets/controllers.json file to add a new Stimulus controller to your app.”

Finally, your assets/bootstrap.js file - working with the @symfony/stimulus-bridge - package will automatically register:

  • All files in assets/controllers/ as Stimulus controllers;
  • And all controllers described in assets/controllers.json as Stimulus controllers.

The end result: you install a package, and you instantly have a Stimulus controller available!”

Are you new to this and don’t know what a controller is?

The Symfony docs have your back.

“A controller is a PHP function you create that reads information from the Requestobject and creates and returns a Response object. The response could be an HTML page, JSON, XML, a file download, a redirect, a 404 error or anything else. The controller runs whatever arbitrary logic your application needs to render the content of a page.”

So, Symfony UX / Stimulus controllers control your user interface. And you can do so without writing a ton of custom JavaScript via Symfony UX components. They handle the JS for you.

However, you can still write custom JavaScript inside Stimulus Controllers or use third-party components. If that floats your boat.

Screenshot from Stimulus JS home page

Because. Stimulus was created and is used by developers outside of Symfony (specifically Ruby on Rails). Thus, additional tools are available beyond the Symfony UX packages.

In particular according to the docs:

  • stimulus-use: Add composable behaviors to your Stimulus controllers, like debouncing, detecting outside clicks and many other things.
  • stimulus-components: A large number of pre-made Stimulus controllers, like for Copying to clipboard, Sortable, Popover (similar to tooltips) and much more.”

As we just mentioned, you can use code from these third-party tools in your controllers.

The docs ⬇️:

“By default, all of your controllers (i.e. files in assets/controllers/ + controllers in assets/controllers.json) will be downloaded and loaded on every page.

Sometimes you may have a controller that is only used on some pages, or maybe only in your admin area. In that case, you can make the controller "lazy". When a controller is lazy, it is not downloaded on initial page load. Instead, as soon as an element appears on the page matching the controller (e.g. <div data-controller="hello">), the controller - and anything else it imports - will be lazyily-loaded via Ajax.

To make one of your custom controllers lazy, add a special comment on top. }

To make a third-party controller lazy, in assets/controllers.json, set fetch to lazy.”

Explore the Symfony UX docs here.

And…

Screenshot of SymfonyCasts Symfony UX course

SymfonyCasts

SymfonyCasts being the wonderful resource it is, has a course on Symfony UX’s use of Stimulus.

And one on its partner Turbo. As the name implies Turbo helps you speed up your site so it’s on par with SPAs. But that’s another article.

Symfony UX: Stimulus Course

Screenshot of Symfony UX components

Symfony UX Components/Packages

As the image above indicates there are other UI functions in addition to the Twig-related components.

You can explore them all here. And we will cover the non-Twig-related ones in an upcoming article.

Alright, enough about Stimulus JS let’s move on to the Twig-related Symfony UX components.

Twig logo

Twig

The Twig-related components we will examine are Twig Components and Live Components.

As you know, having read the linked article at the top, Twig is an OOP-based PHP templating engine used to output variables inside HTML. It makes your site's frontend simpler, cleaner, dryer, and more logical.

And its logo looks more like grass than a twig. But, whatever. If you create a programming language, you get to create its logo.

Using Twig you can create a layout template (ex. base.twig.html) or other layouts (ex. landing-page.twig.html). And these full page layouts can inherit from other templates with smaller layouts and dynamic functionality. Headers, footers, menus, buttons, etc. are examples. Unique pages may inherit the base (ex. about) or not (a blog or landing page), but any page template can inherit single-purpose templates (ex. buttons).

You should use Twig to code in a focused way when working with HTML without having PHP or JavaScript in the same file. You are building what the end user will see and should not execute any business logic or fetch data from your database in your Twig templates.

Screenshot of Twig Component

Twig Components

According to the docs, Symfony UX’s Twig Components

“give you the power to bind an object to a template, making it easier to render and re-use small template "units" - like an "alert", markup for a modal, or a category sidebar.”

As seen in the image above, every component consists of (1) a PHP class and (2) a corresponding Twig template that allows you to render it in your Symfony application.

The beauty of this is that Twig Components can fetch other Symfony Services via auto-wiring.

Also, the docs say, “you should make your components as lazy as possible and store only the information you need on its properties (this also helps if you convert your component to a live component later). This is very similar to the idea of "computed properties" in frameworks like Vue.”

They can be nested and embedded as well.

Explore their documentation here.

I would because it takes you through creating a Twig Component.

Now, let’s examine the power of Live Components.

Screenshot of a Live Component

A quick note, this image displays an example of a live component. It does not display a set of Live Components. The list shows Symfony UX components of which Live Components is one. Got it.

Live Components

Again, according to the docs, Live Components

“work with the Twig Component library to give you the power to automatically update your Twig components on the frontend as users interact with them.”

You are taking a Twig Component, placing it in an Eastern European castle ruin, hitting it with lightning, and bam it’s alive!⚡ Or you’re just making it live, not static.

Symfony notes, Live Components are inspired by Livewire and Phoenix LiveView.

When a user interacts with them they are updated via an Ajax call. No JavaScript is required!

They have LiveProps / Stateful Component Properties and Data Binding similar to React or Vue.

Live Components also have automatic Debouncing and Lazy Updating on "change" of a Field. And you can defer a Re-Render until later.

The docs say, “Live Components require a single "default action" that is used to re-render it. By default, this is an empty __invoke() method and can be added with the DefaultActionTrait. Live Components are actually Symfony controllers so you can add the normal controller attributes/annotations (ie #[Cache]/#[Security]) to either the entire class or just a single action.”

You can also trigger custom actions on your component.

More from docs:

“A component can also help render a Symfony form, either the entire form (useful for automatic validation as you type) or just one or some fields (e.g. a markdown preview for a textareaor dependent form fields.”

You can use actions to change your form via collection types.

Docs again:

“Symfony's CollectionType can be used to embed a collection of embedded forms including allowing the user to dynamically add or remove them. Live Components can accomplish make this all possible while writing zero JavaScript.”

Like Twig Components you can embed and nest Live Components.

You can also skip updating specific elements in your Live Component.

The docs say:

“Sometimes you may have an element inside a component that you do not want to change whenever your component re-renders. For example, some elements managed by third-party JavaScript or a form element that is not bound to a model... where you don't want a re-render to reset the data the user has entered. To handle this, add the data-live-ignore attribute to the element.”

Do you want to learn even more about Live Components?

Screenshot of Live Component demos

You can see some demos here.

And explore their documentation here.

Wrapping it up

Alright, you now know more about Symfony UX and specifically its Twig-related components. Symfony UX is an initiative and set of libraries to seamlessly integrate JavaScript tools into your application. Abstraction, people.

Most importantly non-JS tools like Twig can be used as well. That’s if you are on an anti-JavaScript jihad like we are.

And if you weren’t familiar with it, you also learned about the Twig templating engine. It’s used to output variables inside HTML via layout templates.

The power of adding non-JS interactivity to your user interface via Twig Components and jolting them into Live Components is incredible. It’s a better developer experience, user experience, and better for your site’s performance.

Now, go out and implement this goodness into your Symfony projects with no JS or BS required.

Want to get rid of even more JavaScript? Read our article, Frontend Madness: SPAs, MPAs, PWAs, Decoupled, Hybrid, Monolithic, Libraries, Frameworks! WTF for your PHP backend?

Explore some more

Screenshot of SymfonyCasts Twig course

We highly recommend these SymfonyCast courses.

It’s worth the money, people. Plus, they are even entertaining.

To learn about more advanced options, visit the repository @symfony/stimulus-bridge, the Node package that is responsible for a lot of the magic Stimulus JS brings to Symfony UX.

Happy Twigging Symfonistas!

 

Visit our Communiqué Library

You can find a vast array of curated evergreen content.

 

Author

Reuben Walker photo

 

Reuben Walker

Founder
Symfony Station

 

 

 


 

A review of SymfonyCast’s Free “Harmonious Development with Symfony 6” Course

A white paragraph.

 


 

Symfony Station Logo

symfony logo

 

 


 

Graphic for SymfonyCast's Harmonious Development with Symfony 6 Course

Harmonious Development with Symfony 6

  • 🧑🏻‍🚀 Presented by Ryan Weaver
  • 💻 Symfony
  • 🛰️ Published by SymfonyCasts
  • 🕒 2 - 3 hours
  • 🚀🚀🚀🚀🚀 / 5 Rockets

Introduction

This article explores and reviews SymfonyCast’s “Harmonious Development with Symfony 6” tutorial course in detail. Best of all, the course and the review are free. They are a fantastic way to introduce yourself to the Symfony programming framework and the official learning platform.

So you can understand my experience with taking the course, I will let you know a few things about me.

My name is Reuben Walker. I am firstly a content creator/tech journalist. Secondly, I have strong design skills. Unfortunately, my dev skills are in a distant third place, although they are improving.

As covered in “How Symfony Station was built: an adventurous exploration of layout solutions,” I am a certified full-stack developer. So, I know how things work together. But not necessarily all the details.

Regarding my familiarity with Symfony, I am the publisher of this site, so I’m well-informed on the basics. However, I am always looking to explore new things about the Symfony Universe.

That’s why I subscribe to SymfonyCasts and take many of its courses. This included “Charming Development in Symfony 5”.

Screenshot of  SymfonyCast's Homepage

What is SymfonyCasts

SymfonyCasts’ tagline is “Build Something Amazing.”

And they want you to “Learn the skills you need to build your passion project, kill it at work, or land that new job -- and have fun doing it!”

By and large, they deliver.

SymfonyCasts has the best PHP and Symfony tutorials I have run across. Also, it's the official way to learn the framework and components. Plus, you can learn much more like Twig, API Platform, Drupal, Testing, and my personal demon, JavaScript. Even the dreaded React.

The Harmonious Development with Symfony Course

SymfonyCasts’ free Symfony 6 tutorial is now fully released! The team has been releasing 3 or 4 chapters a week until ending with Chapter 21.

It’s part of their Symfony 6 track which also includes an Easy Admin course and one on Upgrading from Symfony 5.

They describe the track as follows:

“Prerequisites

  • Intermediate PHP experience & skills
  • Comfortable with object-oriented principles

After this track, what will my level be?

  • You'll know the fundamentals of the Symfony framework from front-to-back.
  • You'll be able to use all of Symfony's major pieces - Doctrine, forms, security, etc. - to build real web applications.
  • After the more advanced courses, you'll be able to dig into Symfony and deeper levels to accomplish custom tasks.
  • Basically, you'll be real-world dangerous with Symfony. 🙂

Track Summary

Want to build something incredible? Of course! Ready to fall in love with the process and be proud of the code you write? Welcome to Symfony. We're glad you're here.

Whether you're building a full API, a web app with a rich frontend interface or a mix with a rich front-end, Symfony is the tool to get the job done. Symfony is lean & mean: it starts tiny, then grows with you automatically. It embraces object-oriented best practices... with a touch of style to help you get your job done quickly, without sacrificing quality.

In this track, we'll go from beginner to expert: touching on every part of Symfony and unlocking you to build whatever you can dream of.”

But, enough of SymfonyCasts; let’s start the review.

In the course, you create a Spotify-like web app.

Here is the complete chapter list. If you are a Symfony expert, feel free to skip to chapter overviews new to you via the title links below.

If you are new to Symfony, start at the beginning.

Graphic for SymfonyCast's Harmonious Development with Symfony 6 Course with details of course completion

After finishing this review, take the course or watch the individual chapters relevant to you.

Explore them via this link.

Harmonious Development with Symfony 6

For most chapters, I will provide a quick overview. For the ones providing critical and detailed topics vital to understanding Symfony, I will expand this and even quote from the course.

Local Dev Challenges

Another quick diversion is in order.

As mentioned above, I am not an expert developer. I seem to have particular difficulties with local, non-WordPress development.

Unfortunately, I also made a bad decision. I chose my Windows video editing computer because I wanted a large monitor for split-screen viewing of the course videos and my IDE.

PHPStorm is a fantastic IDE and well worth the investment. It has a handy Symfony Support plugin/extension. And it has a local terminal. So, it’s perfect for Symfony development.

But, as mentioned above, I am local dev challenged.

And there was one big problem. I couldn’t see the code preview from PHPStorm’s built-in webserver.

This was likely due to declared dependencies in Symfony 6’s composer.json file not matching my computer’s current installations of them. And it was probably permissions and firewall issues on my Windows computer that prevented me from updating them. And to top it off, a Windows 11 security admin bug/problem prevents me from accessing security settings without rebooting my computer and losing all the local data on it. So, I couldn’t even fix the computer’s issues. Plus, I am lazy at times.

I cranked up a XAMPP installation which at least let me see what the problems were.

In other words, it was a clusterfuck. 👹

Enter the Hack

PHPSandbox is an ”Online development environment for PHP. Where you can quickly prototype or share PHP Projects, without setting up a local environment.”

I created a Symfony Website Skeleton notebook with it, which set up a Symfony installation. It has almost (read more about this below) everything you need for a Symfony project. With the notebook, I created/linked/exported a new repository to GitHub.

Next, I downloaded it to my local computer.

Then I opened the repository and coded along in PHPStorm.

I would version control it with GitHub for Desktop since I am also Git-challenged.

And I also coded in the PHPSandbox online editor, so that I could see my preview there.

Finally, I took the course in this slightly incompetent manner. 😉

I strongly recommend you not follow my example and do things the way the course advocates.

The Review

Graphic representing programming languages used in Harmonious Development with Symfony 6 Course.

I found one thing interesting. At the end of the tutorial, this image from my GitHub repository showed the composition of the code by programming language.

If you are not familiar with it, Twig is a PHP templating language for inserting PHP functionality into HTML. You create filename.html.twig files instead of filename.html files.

The Presenter

Photo of Ryan Weaver

Ryan Weaver presents most of the SymfonyCasts courses I have taken. He has a vibrant personality and is entertaining, which goes a long damn way when taking tutorial courses.

He’s also self-deprecating and humorous without being annoying.

So, you won’t have trouble staying awake during the course.

The Format

Like most tutorials/courses it’s broken up into chapters about specific aspects of particular topics. Some of them have multiple chapters.

You can download the course code, individual chapter videos, and the course script. It is quite helpful for following along with the videos. In other words, you should pause the video and reference the script when you miss or get stuck on something.

And as someone who often writes scripts for a living, I can say it is well written.

Screenshot showing libraries used in Harmonious Development with Symfony 6 and tabs for resources

As you can see in the image above, there are also:

  • a tab to access the script without downloading it, I would recommend doing so in a separate browser
  • a conversation tab for asking questions and commenting
  • a versions tab for seeing exactly which version, bundles, and components the tutorial uses
  • and a link to fork the repository from GitHub

The last two let you take the course the correct way, instead of my way.

Things to know

SymfonyCasts assumes you have intermediate development knowledge of PHP, Twig, CSS, and JavaScript.

However, they do go into detail on new or esoteric concepts.

So, let’s finally start with the short overview of each chapter and any unique insights.

Course Chapters

Chapter 1: Hello Symfony

First, Ryan goes over what Symfony is, how to download and install it, and some core files. Nothing surprising here.

Chapter 2: Meet our Tiny App

Here he covers the main directories you will work in and setting up PHPStorm. Again, straight-forward.

Chapter 3: Routes, Controllers & Responses

In chapter 3, Ryan covers routes, controllers, and responses. This handy trio allows you to create Symfony pages. The course is getting more interesting.

Chapter 4: Wildcard Routes

Wildcard routes help you avoid creating hundreds of individual page routes for your site. This strategy is convenient.

Chapter 5: Symfony Flex: Aliases, Packs & Recipes

Now for some excitement. This chapter covers one of the most vital concepts behind Symfony. So, I will “quote Ryan” for the first time. My asides will be in bold.

“Symfony is a set of libraries that gives us tons of tools: tools for logging, making database queries, sending emails, rendering templates, and making API calls, just to name a few. If you counted them, I did; Symfony consists of about 100 separate libraries. Wow!”

By the way, Symfony has a start small and install features as you need them philosophy.

”But guess what? There is no templating library in our project!

Well... Symfony does have a tool for that. But our app currently uses very few of the Symfony libraries. The tools we have so far don't amount to much more than a route-controller-response system. If you need to render a template or make a database query, we do not have those tools installed in our app... yet.

I love this about Symfony. Instead of starting us with a gigantic project, with everything we need, plus tons of stuff that we don't need, Symfony starts tiny. Then, if you need something, you install it!”

Unlike my PHPSandbox installation.

You install the Twig templating library with Symfony Flex.

Again, to quote Ryan, “Our project started with a composer.json file containing several Symfony libraries. One of these is called symfony/flex. Flex is a Composer plugin. So it adds more features to composer. Actually, it adds three superpowers to Composer.”

These are Flex Aliases, Packs, and Recipes.

Ryan explains, “The idea between behind Flex aliases is dead simple. We type composer require template. And then, internally, Flex changes that to symfony/twig-pack. Ultimately, that is the package that Composer installs.

This means that most of the time, you can just "composer require" whatever you want, like composer require logger, composer require orm, composer require ice cream, whatever. It's just a shortcut system. The important point is that what really got installed was symfony/twig-pack.”

He continues, “And that means that, in our composer.json file, we should now see symfony/twig-pack under the require key. But if you spin over, it's not there! Gasp! Instead, it added symfony/twig-bundle, twig/extra-bundle, and twig/twig.

We're witnessing the second superpower of Symfony Flex: unpacking packs. The original package contains just one file: composer.json. And this requires three other packages: the three we just saw added to our project.

This is called a Symfony pack.

Whoa. Normally when you run composer require, the only files it should modify - other than downloading packages into vendor/ - are composer.json and composer.lock. Flex's third superpower is its recipes system.

Whenever you install a package, that package may have a recipe. If it does, in addition to downloading the package into the vendor/ directory, Flex will also execute its recipe. Recipes can do things like add new files or even modify a few existing files.”

Chapter 6: Flex Recipes

Me again. This is awesome. Especially considering all the npm dependency headaches, I had in full-stack coding Bootcamp.

Symfony’s recipes live on GitHub in a special repository called symfony/recipes. Each recipe has a manifest.json file that controls what it does.

Ryan again, “By the way, config/bundles.php is not a file that you need to think about much. A bundle in Symfony land, is basically a plugin. So if you install a new bundle into your app, that gives you new Symfony features. In order to activate that bundle, its name needs to live in this file.

So the first thing that the recipe did for twig-bundle was to activate itself inside bundles.php so that we didn't need to do it manually. Recipes are like automated installation.

Chapter 7: Twig ❤

Chapter 7 covers creating and rendering Twig 3 templates and its unique syntax.

For more on Twig, see our article, “Twig: The Ultimate Guide to the Premier PHP Templating Language.”

Chapter 8: Twig Inheritance

As the name implies, inheritance in your Twig templates is covered here. Its blocks are covered as well.

Ryan provides this insight, “If you're ever confused about how template inheritance works, it's useful, for me at least, to think about it exactly like object-oriented inheritance. Each template is like a class, and each block is like a method. So the homepage "class" extends the base.html.twig "class", but overrides two of its methods.

So... that's it for Twig. You're basically a Twig expert, which I'm told is a popular topic at parties.”

Chapter 9: Profiler: Your Debugging Best Friend

This chapter covers Symfony’s debug pack.

Chapter 10: Assets, CSS, Images, etc

Here the tutorial directory in the code is covered. Use it to copy/paste code into your Symfony project in order to pretty it up. As the title implies, Ryan shows you how to add assets like CSS and images.

Chapter 11: Generate URLs & bin/console

I will quote Ryan again, “There are two different ways that we can interact with our app. The first is via the web server... and that's what we've been doing! We got to a URL, and... behind the scenes, it executes public/index.php, which boots up Symfony, calls the routing, and runs our controller.

What's the second way we can interact with our app? We haven't seen it yet: it's via a command-line tool called bin/console.”

Nothing new here, but it’s an essential tool for Symfony development.

You can use it to generate URLs with Wildcards.

Chapter 12: JSON API Endpoint

Here, SymfonyCasts covers creating an API endpoint via a JSON controller. It also looks at the →json() shortcut method.

Chapter 13: Smart Routes: GET-only & Validate {Wildcards}

This is quite technical, so I quote Ryan again. “The purpose of our new API endpoint is to allow users to make a GET request to fetch data. We might not care, but often with APIs, you'll want to restrict an endpoint to only work with one specific method like GET, POST, or PUT. Can we make this route somehow only match GET requests?

Yep! By adding another option to the Route. In this case, it's called methods, and it even auto-completes!”

The chapter finishes by showing you how to restrict route wildcards with Regex.

Chapter 14: Service Objects

Chapter 14 covers another critical part of the Symfony framework, service objects.

Ryan says, “The truth is that everything Symfony does is... actually done by one of these useful objects. Heck, there's even a router object that's responsible for finding the matching route for the given page!

In the Symfony world, and really the object-oriented programming world in general, these "objects that do work" have a special name: services. But don't let that word confuse you. When you hear service, just think: that's an object that does work! Like a templating object that renders a template or a database connection object that makes queries. And since service objects do work, they're basically... tools that help you get your job done!”

Chapter 15: The Twig Service & Profiler for API Requests

This chapter covers what the name implies.

Chapter 16: Setting up Webpack Encore

This chapter marked the end of PHPSandbox’s usefulness. Why? Because you can’t add any new dependencies, components, bundles, etc., to those provided by the notebook. And they don’t include Webpack Encore, Stimulus, or Turbo in the skeleton.

I gave up on the Windows preview and went to my MacBook. With it, I could use ddev with Docker for previewing. At least until I broke things and couldn’t. 😟

In this chapter, Ryan opines, “if we want to get truly serious about writing CSS and JavaScript, we need to take this to the next level. And even if you consider yourself a mostly backend developer, the tools we're about to talk about will allow you to write CSS and JavaScript that feels easier and is less error-prone than what you're probably used to.”

He continues, “The key to taking our setup to the next level is leveraging a node library called Webpack. Webpack is the industry-standard tool for packaging, minifying, and parsing your frontend CSS, JavaScript, and other files. But don't worry: Node is just JavaScript. And its role in our app will be pretty limited.

Setting up Webpack can be tricky. And so, in the Symfony world, we use a lightweight tool called Webpack Encore. It's still Webpack... it just makes it easier!”

The chapter covers installing Encore, installing its recipe, and installing the node dependencies.

Chapter 17: Packaging JS and CSS with Encore

This chapter looks at “one of the most important things that Webpack gives us: the ability to import one JavaScript file from another. We can import functions, objects... really anything from another file.” Including CSS.

It also explains Encore Twig functions.

Chapter 18: Installing 3rd Party Code into our JS/CSS

This chapter covers what its name implies.

The third-party apps are:

Bootstrap

I am not a Bootstrap fan, as I prefer rolling my own CSS, but it is beneficial for backend developers and that’s why SymfonyCasts uses it.

Google Fonts

I am a fan of Google Fonts as they are an easy way to add creativity to a site. Never use more than two, by the way.

Font Awesome

I am a super fan of Font Awesome as they add whimsy and accessibility to sites.

Ryan finishes with, “The main reason I love Webpack Encore and this system is that it allows us to use proper imports. We can even organize our JavaScript into small files - putting classes or functions into each - and then import them when we need them. There's no more need for global variables.

Webpack also allows us to use more serious stuff like React or Vue: you can even see, in webpack.config.js, the methods to activate those.

But usually, I like using a delightful JavaScript library called Stimulus.”

Chapter 19: Stimulus: Sensible, Beautiful JavaScript

Using Stimulus is how Symfony helps us build SPA-like web apps.

I love this approach to JS as much as I hate convoluted JavaScript frontend frameworks like React. It originated in the Ruby on Rails world.

This is important as Ryan notes, “there are kind of two philosophies in web development. The first is where you return HTML from your site like we've been doing on our homepage and browse page. And then, you add JavaScript behavior to that HTML. The second philosophy is to use a front-end JavaScript framework to build all of your HTML and JavaScript. That's a single-page application.

The right solution depends on your app, but I strongly like the first approach. And by using Stimulus - as well as another tool we'll talk about called Turbo - we can create highly-interactive apps that look and feel as responsive as a single-page app.

We have an entire tutorial on Stimulus, but let's get a taste.”

Chapter 20: Real-World Stimulus Example

Here Ryan takes the concepts discussed in the previous chapter and implements them in the tutorial app. He looks at Stimulus actions and values as well as importing Axios and making Ajax calls.

Chapter 21: Turbo: Supercharge your App

We are at the end. The final chapter covers the symfony/us-turbo package.

Ryan notes, “See that "UX" in the package name? Symfony UX is a set of libraries that add JavaScript functionality to your app... often with some PHP code to help. For example, there's a library for rendering charts... and another for using an image Cropper with the form system.”

It installs a Stimulus controller that activates the Turbo library.

Ryan explains, “What is Turbo? Well, by running that composer require command... then reinstalling yarn, the Turbo JavaScript is now active and running on our site. What does it do? It's simple: it turns every link click and form submit on our site into an Ajax call. And that makes our site feel lightning fast.

So Turbo is amazing... and it can do more. There are some things you need to know about it before shipping it to production, and if you're interested, yup! We have a full tutorial about Turbo. I wanted to mention it in this tutorial because Turbo is easiest if you add it to your app early on.”

Finally, back to my local dev environment. I mirrored the tutorial’s code in my repository while following along with the chapter videos.

With help from PHPStorm I was able to get down to only one fatal error preventing viewing the final product on my MacBook. I need to do some research on it, I think my code is correct. This proves that you can overcome challenges you create for yourself. 😎

Screenshot of Course Completion Certificate

Wrapping it up

For those of you new to Symfony but not development, I am sure you won’t have the minor technical challenges I did.

As you have seen, I think the course is an excellent overview of everything new to Symfony 6 and to the framework in general. It’s entertaining, well-written, well-presented, and easy to follow. And with its more complicated concepts, Ryan provides resources for further exploration. Throughout he provides relevant documentation links for the Symfony subjects being covered.

Speaking of resources, SymfonyCasts is an excellent one and well worth the money.

Thankfully, “Harmonious Development with Symfony 6 is free. So, It provides a great opportunity to dip your toes into the Symfony programming universe.

And it’s a fantastic course. I rate it five stars, an A+, and 9.957 out of 10.

SymfonyCasts delivered on what it promised.

Be sure to take advantage of the course and see what they and Symfony have to offer. It’s well worth the time.

Thanks for reading. Please explore our other articles below to learn more about Symfony. Also, be sure to sign up for our Communique newsletter so you get the most important Symfony, PHP, and cybersecurity news each week. Finally, follow us on Twitter for daily news updates.

Happy Coding Symfonistas!

More to explore

 

Visit our Communiqué Library

You can find a vast array of curated evergreen content.

 

Author

Reuben Walker photo

 

Reuben Walker

Founder
Symfony Station

 

 

 


 

Symfony Station Communiqué - 18 February 2022

A white paragraph.

A white paragraph.

 


 

Symfony Station Logo

symfony logo

 

 


 

Welcome to this week's Symfony Station Communiqué. It's your weekly review of the most essential news in the Symfony and PHP development communities. Take your time and enjoy the items most valuable for you.

Thanks to Javier Eguiluz and Symfony for sharing our last communiqué in their Week of Symfony.

Please note that links will open in a new browser window. My opinions, if I present any, will be in bold.

 

SYMFONY

 

As always, we will start with the official news from Symfony.

Highlight -> “This week, the upcoming Symfony 6.1 version deprecated the $defaultName property in Console commands and added a new cache:pool:invalidate-tags command to ease the management of cache pools. Meanwhile, we discussed bumping PHP to 8.1in Symfony 6.1. Lastly, we announced the first speakers of SymfonyLive Paris 2022 and the Call for Papers for the international Symfony conferences.”

A Week of Symfony #789 (7-13 February 2022)

 

One of Symfony's sibling companies expands its blogging.

SensioLabs started a Medium account.

Be sure to follow us on Medium as well.

 

Symfony has a new Twig certification available.

Introducing the Twig 3 Certification

 

SymfonyCasts is producing some great EasyAdmin Content lately.

This week in SymfonyCasts

 

Discover more talks and speakers selected for SymfonyLive Paris 2022, the Symfony conference organized in French on April 7-8, 2022.

Discover more talks and speakers selected for SymfonyLive Paris 2022

 

Prior to the SymfonyLive Paris 2022 conference, Symfony is providing several workshops on April 5-6 2022. Discover all the workshops on offer. Register for the workshops via your OPCO and Datadock.

All the pre-conference workshops at SymfonyLive Paris 2022 are announced (en francais)

 

The team released a new edition of the Symfony Fast Track book. Purchasing one is the most economical way to financially support the framework.

The Symfony Fast Track book now available for Symfony 5.4 and 6.0

What's crazy is that I just bought the French version of the previous edition (5.2) to bone up my language skills for SymfonyCon Paris. Now, where is my credit card?

 

Featured Item Graphic

 

FEATURED ITEM

 

We shared a similar post on server-side rendering tech last week. This one is more applicable to the Symfony universe.

You do not need to be Ruby on Rails developer to read this. The ideas around Hotwire and server-side rendering are making waves across different web development stacks - PHP/Laravel or Symfony, Elixir/Pheonix, Python/Dyango have equivalent tech that implements Hotwire. Even React has added support for server-side rendering it seems.

All About Hotwire and Turbo

 

This Week

 

In a two-part series, Ingo Steinke says, “Coming back to Shopware development after a while, I have to recap how to start the server, how to use the command-line interface, and which notation to use for namespaces and services in which file.”

Learning in public

Shopware 6 development recap

 

From Sergii Demianchuk here’s the first in a series of articles looking at Using Elasticsearch with Symfony.

Elasticsearch with Symfony

 

Laurent Voullmier writes “In this post, I will use Keycloak, an IAM implementing OpenId Connect as an SSO. The features and settings of Keycloak are many (other popular identity providers like Twitter, Facebook, and so on, 2FA, …). Here, we are going to use users directly registered in Keycloak.”

Let’s play with the Symfony new security system: OpenId Connect with Keycloak

 

The Symfony-base eCommerce platform Sylius has a new release.

New! Sylius 1.11 – a lovable release with catalog promotions

 

Thomas Dutrion recently ran into some trouble with Flysystem. "Upgrading to PHP 8.1 and Symfony 6 has been a breeze… Until I had to use league/flysystem-google-cloud-storage!"

Flysystem Google Cloud Storage dependency issue

 

Golems shows us how to:

Write Better Code with Typed Entity

 

Mike Herchel says, “Within Drupal 10 core, we’re implementing a new auto-filling CSS Grid technique that I think is cool enough to share with the world.”

An Auto-Filling CSS Grid with Max Columns of a Minimum Size

 

Drupal announced:

Return type hints added to some class methods for Symfony 5.4/Symfony 6 compatibility

 

Timeless

Inspector logo

Sponsored Article

We published our second sponsored article on Symfony Station exploring how code-driven monitoring helps you deliver successful Symfony products. Like all our articles it is now available via audio.

How code-driven monitoring helps you deliver successful Symfony products

All sponsored articles are for products we have vetted and stand behind. We either use them or would do so if they were applicable to the Symfony Station site.

 

PHP logo

PHP

 

Vishwa Chikate shares some additional standards his team uses.

PHP — additional coding standards

 

In case you didn’t know PHP8.1 is fast. There are major boosts for Symfony and WordPress in particular. Kinsta has this:

The Definitive PHP 7.2, 7.3, 7.4, 8.0, and 8.1 Benchmarks (2022)

 

Backend Developer writes “The Singleton pattern is used to ensure that there is only one instance of an object and that the same (and single instance) is called everywhere in your codebase whenever you need that object.”

Singleton Pattern — PHP Implementation

They also have:

DRY vs WET Principles — Php Implementation

 

Yactouat notes “While web API's like SendGrid are great tools for emailing at scale from within a web application, they are not free. Also, they often provide overkill features when you just want to send plain confirmation emails, for instance.

What we are going to look at in this post is how to send an email using a Gmail account programmatically with a PHP app' running in Docker, for free. This may pave you a way to build a mailer service that you could later run in Kubernetes or Google Cloud Run or any other platform of your choice.”

Send Gmail emails from a Dockerized PHP app the easy and free way

 

Codecourse has a free PestPHP course.

Up and Running with Pest

 

Vonage Dev says, “In early Symfony and Zend Framework applications the PHP-FIG didn’t exist, and coding standards were at the discretion of whoever was writing it. Over the years that we’ve seen widespread adoption of PSR standards, rock-solid static analysis tooling has been somewhat patchy. That is, until now, with the release of version 1.0 of PHPStan. Let’s celebrate this occasion by going through some of its features!”

Scrub up! Cleaning up your PHP Application with PHPStan

 

Jordi Bassaganas writes “object-oriented programming aka OOP is something you definitely want to add to your skillset. It is all about writing apps in terms of real-world concepts like coffee, pizza or cat — more of a way of doing things and approaching problems rather than using a particular library or implementing a software design pattern.”

PHP Examples of Polymorphism

 

Learning by doing (why we created Symfony Station) is the best way to learn. Sharing what you learn is even better. Joshua Otwell shares a PHP function he recently learned and is excited about.

PHP array_diff() function - A handy use case learned

Code logo

OTHER

 

Wired notes “Employers have found it difficult to replace the wave of workers who quit in The Great Resignation, which began last year and hasn’t let up since. In the US, the number of workers quitting has now exceeded pre-pandemic highs for eight straight months.”

After the Great Resignation, Tech Firms Are Getting Desperate

 

Dave Vellante writes “the rise of Kubernetes came about through a combination of forces that were, in hindsight, quite a long shot.”

The improbable rise of Kubernetes to become the operating system of the cloud

 

Venture Beat notes “One of the core maintainers instrumental in issuing a Log4j fix has a full-time job elsewhere as a software architect, and only works on “Log4j and other open-source projects” in his spare time. While this was used by some to assert that community-driven software isn’t secure enough, others offered that it simply highlighted the need to implement a more rigorous security regimen with any open-source software that plays such a fundamental role in critical infrastructure.”

The challenges of community- vs vendor-led open source-software

 

Sascha Segan writes “Part of Web3's problem is that it's being promoted by many of the most obnoxious narcissists in the world. But the 'Web3' dream is also familiar techno-utopianism for anyone who lived through Web 1.0.”

Web3 Will Fail Because You Can't Solve Politics with Technology

 

Matthew Reinbold writes that several years ago “Google instituted a lightweight, scalable, and distributed design review process. Peer review has long been a staple of healthy, modern software development practices. Google’s application of the approach to API design ultimately reduced usability defects while being more efficient than API usability tests.

Companies of all sizes, not just the Googles of the world, can benefit from an API design review process. But what is involved?”

5 Tips for a Game-Changing API Design Review

 

GitHub announced “A picture tells a thousand words. Now you can quickly create and edit diagrams in markdown using words with MermaidJS support in your Markdown files.”

Include diagrams in your Markdown files with Mermaid

PHP Architect has an article on this type of tech in their February issue.

 

Jolicode has this for us:

Docker Cheat Sheet for Common Database Engine

 

Have you published or seen something related to Symfony or PHP that we missed? If so, please get in touch.

 

That's it for this week. Thanks for making it to the end of another extended edition. I look forward to sharing next week's Symfony and PHP news with you on Friday.

 

Please share this post. :) Be sure to join our newsletter list at the bottom of our site’s pages. Joining gets you each week's communiqué in your inbox (a day early). And follow us on Twitter at @symfonfystation.

 

Do you own or work for an organization that would be interested in our promotion opportunities? If so, please contact us. We’re in our infancy so it’s extra economical. ;)

 

Happy Coding Symfonistas!

Author

Reuben Walker photo

 

Reuben Walker

Founder
Symfony Station

 

 

 


 

Symfony Station Communique - 10 December 2021

A white paragraph.

 


 

Symfony Station Logo

symfony logo

 

 


 

Welcome to this week's Symfony Station Communique. It's your weekly review of the most valuable and essential news in the Symfony and PHP development communities.
 
Thanks to Javier Eguiluz and Symfony for sharing our last communique in their Week of Symfony.
 
*Please note that links will open in a new browser window. My opinions will be in bold.
 
 

Symfony

 
 
As always, we will start with the official news from Symfony.
 
Highlight -> "This week, Symfony 5.4.0 and 6.0.0 stable versions were released. In addition, SymfonyInsight announced its support for PHP 8.1. Finally, the SymfonyWorld Online conference is coming next week."
 
A Week of Symfony #779 (29 November - 5 December 2021)
 
 
Fabian provided an overview of all the posts Javier published on what's new in Symfony 5.4 while adding some for 6.0.
 
Symfony 5.4/6.0 curated new features.

 

Symfony UX is an initiative and set of libraries centered around the Stimulus JavaScript library. Symfony is pleased to announce several new releases:

Symfony UX has been updated to work with Stimulus 3.

Symfony UX 2.0 & Stimulus 3 Support

 

The next posts are self-explanatory.

Symfony 6.0.1 released

Symfony 5.4.1 released

 
This one is also.
 
Blackfire now supports PHP 8.1
 

Featured Item graphic

Featured Item


We continue to highlight a post of the week.
 
Our second item of original content is out. It’s a dual-function one serving as a case study of how Symfony Station was built and our About page. Learn how Symfony, Drupal, Layout Builder, Layout Paragraphs, Bootstrap, and Gutenberg became a crew.


How Symfony Station was built: an adventurous exploration of layout solutions


 

This week


 
Alex Daubois continues to publish helpful posts. This week he looks at end-to-end testing with Panther.
 
Symfony’s Panther: Unleash the Tests Beast
 
 
Via SymfonyCasts: "Join me on a quick aside from security to leverage Symfony's serializer component to create a user JSON API endpoint. You will LOVE the result!

This week on SymfonyCasts
 


Carlos Delgado has a tip article for us.
 
How to solve Symfony 6 Exception: The metadata storage is not up to date. Please run the sync-metadata-storage command to fix this issue.

And I want to know how he created the fantastic mouse effect on his site.

 

Last week

 

Slawomir Dymitrow created a Symfony 6 based Application that can serve as an Enterprise Architecture reference for anyone who's planning to build Large Scale Applications with Symfony. It uses a similar 'Blog' theme as the official Symfony Demo.

PHP: Symfony Demo meets Modular, Microservice-ready Architecture - Part 1

 

PHP: Symfony Demo meets Modular, Microservice-ready Architecture - Part 2

 

Timeless

 
 
As you may know, I ran across Akashic Seer's blog last month, which boasts Symfony-related posts. Here are a few more from his archive delivered with his unique writing style.
 
How to make AJAX requests to Symfony 5+ controllers

 

Symfony 5+ how to include page-specific javascript or CSS when using Webpack encore and SASS

 
I also found another treasure trove of Symfony posts on Twilio’s blog and will share them starting with:
 
A Beginner's Guide to Test Driven Development With Symfony and Codeception

 

A Beginner's Guide to Test Driven Development With Symfony and Codeception - Part 2

 

PHP logo

PHP

 

This week

 


Tara Prasad Routray wants you to learn the most outstanding features offered by the PHP 8.1 update.
 
Top 10 PHP 8.1 Features You Should Start Using Now

 

Brent Rose is tired of hearing this question. Is PHP dead? He gives his answer in this video.

PHP in 2021

And the obvious answer to quote Ted Lasso’s Roy Kent is “Fuck no”!

I'm sorry but unfortunately, this stupidity is wearing on me as well.

 

PHP Releases has an interesting new site with the details on all PHP versions.

PHP Releases

 

Cloudways notes "If you’re are doing development on web application, having a PHP server is perfect way, the most perfect way to start."

Best Open Source PHP Servers for Your Next Web Application

 

Dharizza Espinach wrote an excellent introduction to services, plugins and events in Drupal.
 
An Introduction to Services, Plugins and Events in Drupal

 

Blocks are covered in the article above and this post shows you how to create one.

Programmatically Creating a Block in Drupal 9 – A Brief Tutorial

 

Timeless


In this enlightening post, Christian Lück does a great job of looking at Fibers, Promises, Coroutines, and async/await keywords.
 
Fibers in PHP: A new opportunity for async PHP?

Code logo

Other

 

You should take this survey today.
 
Open Source Initiative Launches New Free Membership Level, Opens 2022 OSS Usage Survey

 

TechCrunch has this interesting question.

Is tech hurting American soft power?

 

HTTP/3 is here, and it’s a big deal for web performance. See just how much faster it makes websites!
 
HTTP/3 is Fast
 
 
The GitHub blog has this announcement for us.

GitHub Enterprise Server 3.3 is generally available.
 

Looking to up your Docker build game? Trying using a .dockerignore file for more efficient and secure builds. Jack Wallen shows you how.

What are .dockerignore files, and why you should use them?


 
Have you published or seen something related to Symfony or PHP that we missed? If so, please contact us.
 
 
That's it for this week. Thanks for making it to the end of another edition. I look forward to sharing next week's Symfony and PHP news with you on Friday.
 
 
Please share this post. :) Be sure to join our newsletter list, so you get each week's communique directly in your inbox (a day early). And follow us on Twitter at @symfonfystation.
 
Happy coding Symfonistas!

 

 

Visit our Communiqué Library

You can find a vast array of curated evergreen content.

 

Author

Reuben Walker photo

 

Reuben Walker

Founder
Symfony Station

 

 

 


 

Symfony Station Communique - 22 October 2021

A white paragraph.

 


 

Symfony Station Logo

symfony logo

 

 


 

Welcome to this week's Symfony Station Communique. It’s your weekly review of the most valuable and essential news in the Symfony and PHP development communities.

*My opinions, if I present any, will be in bold.

Symfony Station Logo

 

Symfony

 

This week

 

As always, we will start with the official news from Symfony.

Highlight -> “the upcoming Symfony 6.0 version continued polishing some of its new features, such as the new debug:dotenv command, the profiler improvement to display authenticators information, and the support of auto-wiring union and intersection types. In addition, we announced the workshops and the first speakers of the SymfonyWorld Online 2021 Winter Edition conference.”

A Week of Symfony #772 (11-17 October, 2021)

They also announced the second round of speakers for December’s SymfonyWorld.

Second Round of Selected Speakers at SymfonyWorld 2021 Online 2021 Winter Conference

And they updated the UI of their documentation for a better UX.

Redesigning the Symfony Docs website

SymfonyCasts once again looks at Doctrine Relations and using Foundry.

This week on SymfonyCasts 

Johan Vervloet wanted to try using Twig components in combination with Stimulus for the frontend of dikdikdik, a hobby web app he maintains. This is what happened.

Trying out Symfony Twig Components

He followed that post up with this one.

My First Symfony Live Component

Sensio University Labs recently attended the API Platform Conference and share their favorite presentations.

8 talks to inspire you from the API Platform Conference 2021

Walter Carabain tells us why we should stop repeating ourselves and leverage service classes in our applications.  

3 Useful services for Symfony applications

Last Week

He also notes that  when developing a large scale application the software often needs to perform many different tasks. This can consume too much time. Because you want your application to be fast and offer a great user  experience you don’t need to process these tasks immediately. This is  where the Symfony Messenger component comes into play.   

Using the Symfony Messenger component

Timeless

 

ZYXWare wants you to learn about Symfony and its relationship with Drupal.

What is Symfony and Why EOL of Drupal Versions Depend on Symfony?

PHP Elephant logo

PHP

 

This week
 

The October 2021 issue of PHP Architect is now available.  In the issue: Cryptography, SQL Schema Design, Security, and more.

Get your copy 

null corresponds to PHP's unit type, i.e. the type which holds a single value. It is currently not possible to use null as a type declaration on its own. As per its nature of it being the unit type, it cannot hold any information. This RFC looks to change that.

PHP RFC: Allow null as standalone type

Abstract classes in PHP are used to extend other classes. They’re implemented when more than one class uses the same logic. They are good for readability and for hiding smaller (obvious) details to make our life simpler.

PHP Abstract Classes Explained

Shubhdeep Rajput makes the case for writing secure PHP Scripts.

Best Practices for writing secure PHP scripts

Simon Ugorji notes that nesting a ternary operation is like having multiple if/else statements.

How to write a nested ternary operation

Antoine Sueur proposes that we take an interest in PHPMailer which will allow us to create a functional contact form to receive emails from our users. This article is in french but it’s on Medium so your browser should translate it.

PHPMailer : Contact form

Also on Medium another Antoine says if you handle sensitive data, encrypting files before storing them on a server or cloud storage may be necessary. Let’s see how to encrypt and decrypt files in PHP with the openssl_encrypt function.

How to encrypt files in PHP?

Last Week

 

This one is self-explanatory.

PhpStorm 2021.2.3 is released

Matt Glaman reports that with the 0.12.15 release, the ability to detect and report usages of deprecated services should have full coverage! 

phpstan-drupal 0.12.15: Improved detection of deprecated service usage

Doken.org provides a quick and enlightening lesson in computer science. Let's branch out a bit, and root ourselves in some Graph Theory.

Trees and Tree Traversal in PHP

Code logo

Other

Foreign Affairs writes about how States have been the primary actors in global affairs for nearly 400 years. That is starting to change, as a handful of large technology companies rival them for geopolitical influence.

The Technopolar Moment: How Digital Powers Will Reshape the Global Order

Here’s a look at how two of my favorite tools work together.

How Trello Makes Communication Better For Slack Users

Along similar lines Toptal looks at communication within engineering teams.

The Importance of Written Communication for Engineering Teams

Venture Beat reports that Intel open-sourced ControlFlag, a tool that uses machine learning to detect problems in computer code — ideally to reduce the time required to debug apps and software.

Intel open-sources AI-powered tool to spot bugs in code

That's it for this week. I look forward to sharing next week's Symfony and PHP news with you on Friday. 

Please share this post. :)

Happy coding Symfonistas!

 

Visit our Communiqué Library

You can find a vast array of curated evergreen content.

 

Author

Reuben Walker photo

 

Reuben Walker

Founder
Symfony Station

 

 

 


 

Symfony Station Communique - 1 October 2021

A white paragraph.

 


 

Symfony Station Logo

symfony logo

 

 


 

Welcome to this week's Symfony Station Communique. It’s a weekly review of the most valuable and essential news in the Symfony and PHP development communities.

Thanks to the team at Symfony's blog for featuring our previous Communique on Sunday!

We are light on articles this week as we are in Cape Cod celebrating Oktoberfest. ;)

*My opinions, if I present any, will be in bold.

Symfony Logo

Symfony

This week

As always we will start with the official news from Symfony.

Highlight -> "This week, Symfony announced that Flex is going serverless. This will simplify our operations and will allow you to host custom recipes in your own repositories and to add features on top of the public Flex API. In addition, the upcoming Symfony 5.4 version added support for RGB notation in Console colors and added a new EnumType form field."

A Week of Symfony #769 (20-26 September 2021)

Symfony has a new way to support the community. If applicable please consider it.

Symfony Sponsoring Program

This one is self-explanatory.

Symfony 5.39 Released

SymfonyCasts say there's a tricky detail in any Doctrine relation: the owning vs inverse side. Find out what this refers to, why it matters, and the special thing that the make:entity command does to help.

They also dive into the powerful "Collection" objects in a Doctrine relationship, like the ability to:

  • order a collection relation with ORM\OrderBy
  • count a relationship & tell Doctrine to use a smart COUNT(*) query
  • filter $question->getAnswers() to only return *approved* answers for a question

This week on SymfonyCasts 

On Medium Sd404 looks at notifications in the Symfony ecosystem.

How to send notifications asynchronously using Symfony & RabbitMQ

Form errors are explored in this post by JoliCode. 

Display Symfony form errors, without any submit

Cloudways shows us how to configure Elasticsearch in Symfony.

Configure Elasticsearch in Symfony 5.x Applications

This month

Cloudways also examines hosting Symfony on Linode.

How to Host Symfony based Apps on Linode

Timeless

The Notifier is a “new” component that was introduced in Symfony 5.0, the documentation says:

“The notifier component can send notifications to different channels. Each channel can integrate with different providers (e.g. Slack or Twilio SMS) by using transports.”

Smaine Milianni takes a look.

Create a Notifier Transport in Symfony

PHP Elephant logo

PHP

This week

Brian Wallace looks at the benefits of using a PHP developer.

5 Benefits of Hiring a PHP Developer

You may have seen articles like this one before, however I still find them useful.

PHP vs. JavaScript: The Better Option For Your Dream Web Project

This month

Here’s another look at some of the interesting parts of PHP 8.

PHP 8.0: How to Get Started & The Most Interesting New Features

Code logo

Other

Wouter Carabain shows us how to use extensions with API Platform.

How to use Extensions in API Platform properly?

David Colby schools us on using HTML, Stimulus, and Tailwind

Building a horizontal slider with Stimulus and Tailwind CSS

That's it for this week. I look forward to sharing next week's Symfony and PHP news with you on Friday. 

Please share this post. :)

Happy coding Symfonistas!

 

Visit our Communiqué Library

You can find a vast array of curated evergreen content.

 

Author

Reuben Walker photo

 

Reuben Walker

Founder
Symfony Station

 

 

 


 

Subscribe to StimulusJS

 

 

Follow Symfony Station on Mastodon Mastodon Icon Twitter Twitter Icon Flipboard Flipboard Icon or Our Newsletter Newsletter Icon