SymfonyCasts Sign Up Information

Blackfire.io & Mailer this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Happy Tuesday Henry!

Fastest week ever! Why? Because our performance stats are starting to look really good. In the Blackfire tutorial, we are now profiling our site and successfully interpreting the call graph to find and fix performance problems. Once we make these changes, we celebrate! By using the comparison view to see *exactly* where & how our app got faster (or if it got slower ????). We also use Blackfire's understanding of Symfony, Doctrine, Composer & other frameworks/libs to make sure we're not missing anything obvious.

And we're nearly wrapped up with Mailer. This week with Mailer, we remove duplication by using an event subscriber and improve our response times by delaying emails with a queue and processing them with a worker. We'll also get to enjoy the power of Sass thanks to Webpack Encore.

Cheers!

Ryan

Blackfire.io: Revealing Performance Secrets with Profiling

Wall Time, Exclusive Time & Other Wonders

Time for Blackfire Profiling 101! Let's master the most important concepts: wall time, exclusive vs inclusive time, how wall time relates to CPU time & I/O time + many other wonders of our first profiled page.

Finding Issues via the Call Graph

The star of the Blackfire show is the call graph. We know our profiled page has a performance problem, but where? Let's use the call graph & its *critical path* to trace through our app's execution flow, find the issue, and crush it!

Comparisons: Validate Performance Changes, Find Side Effects

We just made our page faster thanks to Blackfire! Or did we? And if so, how much faster is it? And where? CPU? I/O? Are any dimensions now slower? Answer all these questions instantly with Blackfire's comparison view. It's... awesome.

Recommendations

Blackfire comes built-in with knowledge about Symfony, Doctrine, Composer & many other frameworks/libs. Why is that awesome? Because it automatically catches performance mistakes like bad Doctrine metadata caching or a non-optimized autoloader. Boom!

Symfony Mailer: Love Sending Emails Again

Setting "From" Globally

No need to set the "from" on *every* email you send through Symfony Mailer. Nope, by creating a simple event subscriber, we can hook into that process to set the from... or to do *anything* else. The power!

Async Emails with Messenger

What's better than working with Symfony Mailer? Sending *async* emails with Messenger! Dream team! In 5 minutes, we'll make our response times faster by delaying emails to a queue... and processing them with a worker.

Attachments with Async Messenger Emails

There's a little trick if you want to send async emails with attachments via the Doctrine transport. Plus, let's use the in-memory transport in the test environment to make sure our mails don't queue.

Styling Emails with Encore & Sass Part 1

Symfony Mailer already helps us inline our CSS so that our styles work in all mail clients. But how can this all work with Webpack Encore? Could we use Sass files instead? Let's organize and get a new "email" style entry set up in Encore.

This e-mail has been sent to @, click here to unsubscribe.

Blackfire.io this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hello Henry!

The performance of your app can mean many things: time, memory, or even network traffic. We dive back into the Blackfire call graph and use our favorite hack to squeak out even more performance.

This week we also come up against a version of the classic N+1 query problem. We'll see if we can use Doctrine's EXTRA_LAZY fetch and explore the more proper way to fix it (joining and selecting all the data at once). Will that be a better solution? Maybe not.

Have an awesome week!

Ryan

Blackfire.io: Revealing Performance Secrets with Profiling

Property Caching

Breaking down the "performance" of your app can mean many things: time, memory, or even network traffic. Let's view our Blackfire call graph in each of these dimensions. Then we'll use a favorite hack to eek out even more performance: property caching.

Using a Caching Layer & Proving its Worth

Let's push the performance of our page further by leveraging Symfony's cache layer. Will it be faster? Of course! The question is: how *much* faster? And is that worth any added complexity? Blackfire will give us the data we need to make that decision.

The N+1 Problem & EXTRA_LAZY

When we profile our homepage with Blackfire, we discover a version of the classic N+1 query problem. How can we fix it? In *this* case, Doctrine's EXTRA_LAZY fetch isn't the best, but it's an easy win with great results.

Fixing N+1 With a Join?

The proper solution to the N+1 query problem is to join and select all the data at once. But if you're not careful (I wasn't!) it can make things worse. Blackfire catches that. We'll also see the *perfect* solution and the complexity it adds.

Profile All Requests (Including Ajax)

Usually you want to profile a specific page or endpoint with Blackfire. But you can also hit "Record", surf around your site, and create profiles for *everything*, including AJAX request. It's... super fun and super handy!

Symfony 5 builds on top of the shoulders of Symfony 4. It doesn't completely change any directory structures or add any ground-breaking new way of developing. But it *does* come with some *key* new features to make life easier. Let's upgrade... then try some of those out.

This e-mail has been sent to @, click here to unsubscribe.

Blackfire.io this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

Even if you didn't level up in your favorite video game over the weekend, you can still do it with Blackfire by installing its command-line utility and then configuring and using it to profile AJAX/API requests. We also peek into the timeline, where we can find seemingly invisible parts of our code, like which listeners are called during the RequestEvent.

Happy Tuesday!

Ryan

Blackfire.io: Revealing Performance Secrets with Profiling

The Blackfire CLI Tool for AJAX Requests

To level-up with Blackfire, let's get its command-line utility installed and configured. It's *first* superpower may surprise you: the ability to easily (and repeatedly) profile any AJAX/API request.

Profiling Command Line scripts

Have some long-running command line PHP scripts (e.g. bin/console commands)? Profiling those with Blackfire is a *blast*. Let's find our performance problem & balance it with the need for our command to be resilient.

Timeline: Go Behind-the-Scenes with your Code

Want to visually understand every layer of your code flow? *That* is the superpower of Blackfire's timeline. Let's learn about metrics & navigate through the call stacks of our app. Oh, and the timeline looks super cool ????

Timeline: Finding a Hidden Surprise

Blackfire's timeline lets you see the invisible parts of your code: like which listeners are called during the RequestEvent (e.g. routing & security firewall) and what they're doing. Plus we'll find a performance surprise hiding in a listener...

Spotting Heavy Object Instantiation

We often think about "slow functions". But have you ever thought about how many resources it takes to *instantiate* an object? Let's use Blackfire to discovery a "heavy" object in our code and discuss *what* makes instantiation take so many resources.

Symfony 5 builds on top of the shoulders of Symfony 4. It doesn't completely change any directory structures or add any ground-breaking new way of developing. But it *does* come with some *key* new features to make life easier. Let's upgrade... then try some of those out.

This e-mail has been sent to @, click here to unsubscribe.

Blackfire.io this week on SymfonyCasts

View online version

Hello Henry!

Wow! 2019 has been one of my favorite yet and I want to take a moment to say how grateful I am to be a part of the amazing Symfony community. And what a wonderful job it is to make learning that technology a little bit faster... and hopefully a bit more fun.

Just here for the screencast updates? We've got that! 5 new videos on upgrading to Symfony 5 and in our Blackfire tutorial we use a service subscriber to avoid instantiating dependencies of a service (that we don't *always* need) to improve app performance!

Thank you so much for a fabulous year. Let's crush 2020 and build some seriously-cool stuff together!

Ryan

Upgrading & What's New in Symfony 5

Flex, Versioning & extra.symfony.require

New tutorial time! Upgrading & What's new in Symfony 5! Let's start by talking about the "extra.symfony.require" key in composer.json & how it teams up with Flex to control the version of all Symfony packages & give you a performance kick in the pants.

Managing Flex, extra.symfony.require & Version Constraints

Time to upgrade to Symfony 4.4! But when we change extra.symfony.require to 4.4.* and update... *some* libraries don't upgrade! Why? Time for a geeky history lesson about Symfony Flex, version constraints & a performance optimization.

Upgrading to Symfony 4.4

Time to *fully* upgrade to Symfony 4.4! How? By keeping our package versions in sync with extra.symfony.require. We'll also discover that a few packages incorrectly "snuck" into my app's require-dev section and fix them.

Selectively Committing Recipe Updates

We accidentally just upgraded our first Flex recipe! Woo! But hold on: don't commit everything blindly. Instead, let's use a git trick to walk through the changes. Hidden inside them is a new feature from MonologBundle!

Upgrading Recipes: New Commands!

Upgrading to Symfony 4.4 and 5.0? You *can* just upgrade your dependencies. But to truly keep your app updated, you should also upgrade your *recipes*. Introducing new Flex commands to list, show & upgrade your recipes!

Blackfire.io: Revealing Performance Secrets with Profiling

Service Subscribers

In Symfony, if a service doesn't always need *all* of its dependencies, you're wasting resources instantiating them. Let's fix that with a service subscriber & use Blackfire to make sure it made enough difference for the new complexity.

This e-mail has been sent to @, click here to unsubscribe.

Upgrade to Symfony 5 this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

We pull out all the tricks to make sure our deprecations are gone and then (YAS!) we finally upgrade to Symfony 5! We also start working with one of my absolute *favorite* Symfony 4.4/5 features: Secrets Management. Seriously, try it! Security has never been so much fun!

And stay tuned, because next week we'll again have releases for the Blackfire tutorial! I'm feeling like it's going to be another performant week :)

Onward and Upward!

Ryan

Upgrading & What's New in Symfony 5

Fixing our Deprecations: Form, Controller & Mailer

We're hunting down deprecations in our Symfony 4.4 app - including in the form component, the old base Controller & changes to Mailer. So far, it's casual: surfing around & clearing cache.

Hunting the Final Deprecations

How can you be *sure* your deprecations are gone and you're ready for Symfony 5? A bunch of tricks can help: watching your logs - especially your production deprecations log - running commands & executing your tests. Our app is ready.

Upgrading to Symfony 5.0

This is it! The deprecations are gone and it's time to upgrade to Symfony 5! How? Thanks to all our hard work, upgrading is nothing more than a careful dance with Composer. Hello Symfony 5! ??

Secrets Management Setup

What's my *favorite* new feature in Symfony 4.4 & 5.0? It's a secret... cause it's secrets management people! You can now *encrypt* sensitive environment variables and commit them to your repo. It's super fun. Let's dive in!

Production Secrets

Where should your sensitive production config live in Symfony? In your prod secrets vault! The most beautiful part? You can now securely commit this config to version control. What about deployment? Set the decryption env var and you're done.

This e-mail has been sent to @, click here to unsubscribe.

Blackfire this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

This week we're back to profiling! But instead of relying on the Blackfire browser extension, we take control by triggering a profile from directly inside our code via the SDK. We even leverage an "event subscriber" to get the most data possible. Then, when we identify a performance "bug", before fixing it, we'll write a test that *asserts* that a page only makes 1 HTTP request. Yep, that's possible! Did we just become best friends? I hope so!

Cheers!

Ryan

Blackfire.io: Revealing Performance Secrets with Profiling

Manually Profile (Instrument) Part of your Code

The Blackfire tutorial is back! And it's a good one! What *really* happens behind the scenes when you create a profile? We'll find out and use that info to *control* the process: writing code to tell Blackfire *exactly* which code to "instrument"

SDK: Automatically Create a Profile

Sure, you *typically* trigger a Blackfire profile with the browser extension. But you can *also* trigger a profile automatically from right inside your code! Let's use the SDK to do exactly that.

Creating an Automatic Probe Early in your Code

The Blackfire SDK lets us generate a new profile *whenever* we want to right from inside our code. To grab as *much* data as possible, we can leverage an "event subscriber". Let's do that & learn how to *avoid* the probe from "closing" too early.

Performance Tests

In a functional test, you already assert that the status code is 200 & some things about the response. With Blackfire, you can also add *performance* assertions - like asserting that a page made less than 10 SQL queries or... anything you can dream up.

This e-mail has been sent to @, click here to unsubscribe.

Upgrade to Symfony 5 this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Heyo Henry!

This is it, we've upgraded our app to Symfony 5! We also go pro with the "secrets" system to override a secret on only *your* computer by using the "local" vault. It turns out, this will help us discover the true (simple) "secret" behind how it works. ????

We also check out the new way to upgrade your password hashing algorithm without breaking existing accounts, improving your app performance by preloading PHP 7.4 and even leverage the new validation auto-mapping.

To Symfony 5 and beyond!

Ryan

Upgrading & What's New in Symfony 5

Overriding Secrets Locally
(Local Vault)

Symfony's environment variable system and new secrets system play together beautifully. Want to override a secret only on *your* computer? Use the "local" vault... and discover the true (simple) secret behind how it works.

Prod Vault Optimization
& Vault for Tests

2 more tricks about Symfony's new secrets system: a production deployment optimization & secrets in your test environment. Plus bonus! Reading HTML exceptions in your tests got *much* easier in Symfony 4.4.

Validation Auto-Mapping

Validation constraints - like NotNull & Length - can now *automatically* be added to your entities/classes based on your Doctrine metadata & how your code is written. It's called "Validation auto-mapping", it's available in Symfony 4.4 & it's *brilliant*!

Migrate Password Hashing

Do you know what your password hashing algorithm is? In Symfony 4.4, you can now change to use a *newer* hashing algorithm without breaking existing accounts. AND automatically re-hash those existing users over time as they log in. Security!

PHP 7.4 preload

PHP 7.4 "preloading" can give your app an instant performance boost. Symfony 4.4/5.0 provides an intelligent preload file you can use... without doing *anything*.

Is your Container Running?
Catch It! lint:container

One of Symfony's superpowers is its compiled container: it's +???? for performance and less bugs. Symfony 4.4 also comes with a new lint:container command to make sure *every* argument to *every* service matches its type-hint.

This e-mail has been sent to @, click here to unsubscribe.

Upgrade to Symfony 5 this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

Not only are we upgrading an app to Symfony 5 we're also upgrading all of our recipes, along the way we'll see how to navigate bc breaks from "previously-experimental" components and learn about the `anonymous: lazy` setting.

If you have the pleasure of living in Mexico you can catch Diego and I at PHP Querétaro this Friday: https://www.meetup.com/PHP-Queretaro/events/267809879/ Hope to see you there amigos!

Adios!

Ryan

Upgrading & What's New in Symfony 5

Updating the TwigBundle Recipe

On the way to upgrading our app to Symfony 5, we're updating all of our recipes. Next up is TwigBundle: let's see what's changed in its recipe and why.

Updating the Mailer Recipe(s)

Because the app we're upgrading to Symfony 5 uses Mailer, let's update *two* related recipes and uncover two BC-breaks we need to fix in our code to make this "previously-experimental" component ready for Symfony 5.

phpunit-bridge & routing Recipes

Let's crush 2 more Symfony-related recipe updates: symfony/phpunit-bridge & symfony/routing. Both have minor - but good - changes to keep your app in pristine condition.

Updating security, translation & validator Recipes

3 more recipe upgrades on our way to getting our app *perfectly* updated for Symfony 4.4 and 5.0: symfony/security-bundle (we talk about the new anonymous: lazy setting), symfony/translation and symfony/validator

Updating the webpack-encore-bundle Recipe

We're down to updating our *last* Symfony recipe before upgrading to Symfony 5... and it's a bonus one! The WebpackEncoreBundle recipe. It's not a "core" package recipe, but it *does* contain a lot of nice changes.

This e-mail has been sent to @, click here to unsubscribe.

Upgrade to Symfony 5 this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Happy New Year Henry!

I hope you had a fun New Years Eve... or boring like us, if that's your thing. If you're a new-year's-resolution setter (I am!), I'd love to hear your favorites. For example, this year I'm giving up red meat and... my bad habit of eating half of my daily calories after 9 pm.

2020 isn't the only thing that's fresh: we also have the shiny new recipe update system! We'll use it to upgrade all kinds of symfony/ recipes. Step by step we're getting our app perfectly ready for the move to Symfony 5.

Cheers!

Ryan

Upgrading & What's New in Symfony 5

Recipe Upgrade: symfony/console & bootstrap.php

Let's use the shiny new recipe update system to upgrade the symfony/console recipe. This will update one of *the* most important files in your app & the one that controls the careful loading of environment variables: config/bootstrap.php.

Upgrading the FrameworkBundle Recipe (Part 1)

If you only ever updated *one* Symfony recipe, it should be the one for symfony/framework-bundle. Let's get to work updating this & tracking what's changed during the past 2 years to the most core files in your app.

FrameworkBundle Recipe Part 2: The Kernel Class

We're upgrading Symfony's FrameworkBundle recipe, which means making sure our framework.yaml, services.yaml, Kernel.php & other critical files look *exactly* like they should for Symfony 4.4 & 5.0.

This e-mail has been sent to @, click here to unsubscribe.

Upgrade to Symfony 5 this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

This week we're working on our list of deprecations so we can finally upgrade this app to Symfony 5. Some of these pesky deprecations are coming from 3rd party libraries, but don't worry, we'll tackle that too - even tough ones!

Diego and I had a fantastic week in Querétaro working with the awesome Código Fuente Software Development team. Thank you to them for hosting us and putting on an awesome Friday night conference! (are you also unsure of what to do with your hands in pictures, and try to change your mind right when they take the picture? haha, me too.)

Gracias!

Ryan

Upgrading & What's New in Symfony 5

Fixing the First Deprecations

The *only* thing blocking our 4.4 Symfony app from going to 5.0 is the list of deprecations! Let's learn how to find them - including how to discover any deprecations happening on production. Then we'll start fixing them!

Upgrading KnpPaginatorBundle & PHP Platform Version

What if a Symfony deprecation is triggered by a 3rd party library? Simple: upgrade it. But that's not always easy. Let's try a hard one: knp-paginator-bundle. This requires a major update, upgrading *its* dependencies *and* tweaking config.platform.php

Upgrading/Migrating from StofDoctrineExtensions

Sometimes good libraries don't get the love they need. And hey, most maintainers are volunteers. But thanks to the community - specifically @antishov - we're ok! In this part, we'll "upgrade" StofDoctrineExtensions bundle to its Symfony5-compatible fork.

Upgrading to DoctrineBundle 2.0

Upgrading to Symfony 5? Cool! Then you'll *also* need to upgrade to DoctrineBundle 2. To help with that, we'll "unpack" our "orm-pack" with Flex.

DoctrineBundle Updates & Recipe Upgrade

We just upgraded from DoctrineBundle 1 to 2. Now let's check the CHANGELOG, fix our app (it IS broken) *and* update to the latest version of the recipe. We'll get to see - first hand - some of the nice changes in v2 (hint: less config!)

This e-mail has been sent to @, click here to unsubscribe.

Blackfire this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Happy Tues-yay Henry!

Metrics & framework-specific metrics: the little nuggets of data behind the Blackfire engine! With those metrics, we can write assertions (i.e. tests) that will be executed against any profile we create. We'll take this new focus on profiles & tests to the Blackfire Player tool: a language for crawling the web & asserting things, like status code & HTML elements. What's next? Performance assertions? Oh yea!

Cheers!

Ryan

Blackfire.io: Revealing Performance Secrets with Profiling

All about Metrics

Metrics are the little, raw pieces of data that Blackfire collects... and it collects a *lot* of them - including many framework-specific metrics. Let's learn more about them & then crush our performance bug.

Assertions / Profile "Tests"

Profiling a page is about more than just collecting data. By leveraging the *large* amount of data available from Blackfire (called metrics) we can write *assertions* (i.e. tests) that will be executed against any profile we create. Data!

Blackfire Player

The "Blackfire Player" is an open source tool that allows you to crawl a site - click links, fill out forms, etc - by writing a very simple text language. It's fun... and (secretly) will form the basis for the rest of our Blackfire profiling tutorial!

Expectations/Tests with Blackfire Player

By writing some simple text & leveraging the blackfire-player tool, we can crawl a site. Now let's go one step further and add *tests* - like checking the status code & HTML elements. We'll also get a sneak peak into adding *performance* assertions.

Deploying to SymfonyCloud

To make our Blackfire tutorial more interesting, let's deploy our app to production! We just need 5 minutes and 3 commands thanks to SymfonyCloud.

This e-mail has been sent to @, click here to unsubscribe.

Vue.js this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hello Henry,

We''d be remiss in sending out this week''s email without mentioning the importance of what is happening with the Black Lives Matter movement worldwide and in the US, where we are headquartered. The incredible momentum we have seen is inspiring and we are here wanting to learn, listen and do better.

• On June 2nd, as a company we made a donation to the NAACP (National Association for the Advancement of Colored People) which was matched 100% by Google
• We''re reading to expand our knowledge on the issue. We''ve listed a few books that we are starting with on our blog if you''d like to know more.

We''re human, imperfect and doing our best to grow & hear others. If you''d like to share, discuss or have any comments on this, please feel free to reply - we do read and write back.

If you''re here for the tutorials, we''ve got you covered. On the topic of Vue.js, if you want to *love* working with this tech you''ll definitely need the Vue.js Dev Tools so you can visualize your app and changes on the fly. We''ll then break our HTML & data into sub-components to help with code reusability and readability. Finally, we explore what we can do with props and v-bind.

?

Cheers,

Ryan

The Delightful World of Vue.js

data() and Vue Dev Tools

If you need a value to change while your Vue app is running, then it needs to live as a key on "data". And if you want to *love* coding in Vue, you need to get the Vue.js Dev Tools so you can visualize your app and change data on the fly.

Creating a Child Component

In PHP, we refactor code into services for reusability and organization. In Vue.js, we do the same! By breaking chunks of HTML, data & behavior into a hierarchy of *components*. Let's create our first child component and use it.

Props: Passing Info into a Child Component

In Vue, if you need to pass an "argument" from one component down into another, it's done with "props". Let's see this in action + learn how props & data compare to what we're used to in PHP: arguments and variables.

v-bind: Dynamic Attributes

When it comes to using dynamic JavaScript inside an attribute, you can't just {{ theDynamicThingy }} with Vue. Instead, say hello to our first "directive" - v-bind - and its trendier shortcut syntax!

Symfony, Doctrine & the Database this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

While the built-in Doctrine repository methods have some flexibility, we''ll still need to write custom queries. This week, we dive into the core EntityRepository class to see how that''s done. On our way, we''ll check out DQL (Doctrine Query Language) and the QueryBuilder to make our first custom query!

Oh and what''s my favorite tiny bundle you ask? It''s definitely KnpTimeBundle: it allows simple, beautiful 5 minutes ago times.

?

Cheers,

Ryan

Doctrine, Symfony & the Database

"5 Minutes Ago" Strings

Love having "5 minutes ago" style dates? That's the job of my favorite tiny bundle: composer require knplabs/knp-time-bundle Then send a date through an `|ago` filter and celebrate! It also comes with a ton of translations.

Custom Repository Class

The built-in Doctrine repository methods have *some* flexibility, like adding an "ORDER BY". But ultimately, we *will* need to write custom queries. Let's dive into the core EntityRepository class + learn about the custom repo class already in our app

DQL & The Query Builder

Doctrine uses "Doctrine Query Language" (DQL) internally for queries. But don't worry, it's super similar to SQL & is even easier to work with via the QueryBuilder. Time to make our first custom query + learn a shortcut to fetch the repository object!

Reusing Query Logic & Param Converters

Doctrine's QueryBuilder gives us a special power in our repository classes: the ability to isolate query logic into private methods and *reuse* that across multiple custom queries. Sweeeeeet!

Automatic Controller Queries: Param Converter

When your Symfony controller needs to query for a single entity, you probably don't need to do that query by hand. Let's talk about the Doctrine "param converter".

This e-mail has been sent to @, click here to unsubscribe.

Vue.js this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

Did you wake up this morning wondering what "modular" css is? Us too! This week we also take a quick detour to check out the Webpack dev-server. And if that isn''t cool enough, you can also enjoy seeing your code changes instantly in your browser using HMR (hot module replacement). Finally we remove all the ../../ imports and introduce aliases to our code. Now we''re really living that vue life.

?

View the Vue!

Ryan

The Delightful World of Vue.js

Modular CSS

What is "modular" CSS? Let's find out! And then leverage it inside Vue to create styles that are *truly* sandboxed to each component. Fancy!

Webpack dev-server: Faster Updating

Let's take a quick detour from Vue to the Webpack dev-server. The dev-server is an alternate to "watch" while developing and using it with Encore is simple. Let's get it set up, see how it works and learn what it gives us.

HMR: See Changes without Reloading

Hot module replacement - or HMR - is where you update your JavaScript/CSS and see the changes in your browser... without even reloading. It works *brilliantly* with Vue, so let's get this awesomeness working!

Organizing into more Components

One of the strengths of Vue is that, when a component gets too big or complex, we can organize by splitting it into sub-components. Let's do that now: create 2 new components, split up our template, data and styles, then enjoy a new level of readability.

Aliases

Webpack aliases give you the ability to create fake "paths" that resolve to wherever you want. Let's see how we can remove all the ../../ imports from our code and replace them with aliases - a common practice in the Vue world.

This e-mail has been sent to @, click here to unsubscribe.

Vue.js this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

Welcome back for another week of Vue.js!?Things can get confusing when you want multiple pages to render different Vue components. Except not for us! We'll get a 2nd traditional page set up and ready to render.

In order to do that we'll pass "context" from Symfony into Vue - in this case the "current product ID" (or, IRI for you JSON-LD geeks!).?.

It's finally here! This week is SymfonyWorld Online. I'll admit it's really weird to be getting ready for it at home and not at Disneyland Paris... but I'm excited for the awesome virtual conference the Symfony team has put together! "See" you there!

?

Cheers,

Ryan

The Delightful World of Vue.js Part 2

Page 2: Product Show Page

Things can get confusing when you want multiple pages to render different Vue components. Let's get a 2nd page traditional page set up and ready to render. #Symfony

Current Product Id

To help make our component smarter (and render something different on different pages), we'll pass some "context" from Symfony into Vue - in this case the "current product ID" (or, IRI for you JSON-LD geeks!)

The Dynamic Component

We're not building a single page app, but our Vue app *will* be used to power several pages. In this video, we'll use the "dynamic component" to intelligently render a different component based on the page.

AJAX & Delayed Rendering

Here's the process: our Vue component reads the current "product id", fetches that data from the API, then - only once the data is ready - it renders. Let's get this put together!

Upgrade to Symfony 5 this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

It goes without saying that this has been a strange start to the week. I hope you''re all safe and well - wherever you may be. The SymfonyCasts team is already remote, so we''ll do our part by keeping our normal content schedule and releasing as much new content as we can!

For the new content this week, we''re talking about how Symfony is built on a unique package recipe system: we''ll dive into how recipes automate all the boring work of installing a new package. One great example is the Twig recipe: we''ll see what it does and then immediately use Twig to render some templates! I''ll cover syntax, filters & template inheritance: everything you need to go pro in Twig... in just 10 minutes.

Waiting for our Symfony Deep Dive Tutorial? It''s coming *very* soon.

Cheers!

Ryan

Charming Development in Symfony 5

The Lovely bin/console Tool

One of the tools you will LOVE inside Symfony is "bin/console": a little executable that's *filled* with debugging goodies. Let's get to know it!

Flex, Recipes & Aliases

At the core of Symfony's "start small & grow with your app" philosophy is its truly unique package *recipe* system. Let's learn about Flex, composer aliases and how recipes automate all the boring work of installing a new package.

How Recipes Work

Symfony recipes allow you to install a package and... just start using it! No config file tweaks or other setup needed! Let's find out where the recipes live, what they look like *and* a few new Composer commands to discover more about them.

The Twig Recipe

One of my *favorite* Symfony recipes in action is for Twig: composer require twig ... and start using it immediately. This creates the templates/ directory + all the config you need. Let's check it out!

Twig ??

Time to introduce Twig into our brand new Symfony 5 project so we can render some templates! We'll talk syntax, filters & template inheritance: everything you need to go pro in Twig... in just 10 minutes.

Vue.js this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hi Henry!

Here we are, about to enter into the delightful world of Vue.js. I''m so excited to get started on this with you! And as you''re working through this, keep in mind that while this course is written in Vue.js 2 it will totally work for Vue.js 3 (now in beta) and you can even code along in Vue 3! We''ll highlight the few places where there *are* differences.

This week we create a rich Vue app inside a Symfony app, learn how the Vue object really works, create a set of variables called "data", watch the page magically update, add CSS... then immediately upgrade to SASS. Boom!

?

Cheers!

Ryan

The Delightful World of Vue.js

Encore, Symfony & API Platform

The first part of our newest tutorial is done baking: The Delightful world of Vue.js! In this tutorial, we'll create a rich Vue app inside a Symfony project with an @ApiPlatform powered API. Eek! Those are some of my favorite things!

Installing Vue, Webpack & Eslint

Our TODO list for the 2nd video in our Vue tutorial: * Install Vue * Configure Webpack to parse .vue files * Set up ESLint * Create our first Vue app & render it For ALL that? We just need 9 minutes

Vue Instance & Dynamic Data

In 5 lines of code, we rendered a Vue template. Cool... but time to get more exciting! Let's add our first "data": a set of variables you can pass to your template. We'll play with these, watch the page update (magic!) & also look under Vue's hood.

Single File Component

One of Vue's biggest innovations is the "single file component". But let's not just see what a single file component is: let's find out how Vue works without them and *exactly* how they fit into the system (+ why I love them!)

CSS: Styling a Component

How can you add CSS to a Vue component? Thanks to Vue's single file component format, you can add the CSS *right* next to the HTML that you're styling! We can even enable Sass support with a nice: lang="scss"

This e-mail has been sent to @, click here to unsubscribe.

Vue.js this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

This week we dive a bit deeper into Vue, and I can''t tell you how excited I am for all of the upcoming chapters.

Similar to those very cool tags in Twig, Vue has several syntaxes called "directives". We check out v-for, v-on, v-if and v-show. We even look into some of Vue''s most important magic: the "this" variable and discover *exactly* how Vue''s magic reactivity works. If you want to understand Vue, this is key!

?

Happy Tuesday!

Ryan

The Delightful World of Vue.js

Looping with v-for

Like Twig {% tags %}, Vue has several special syntaxes called "directives". Let's see our second directive: v-for. We'll use it to loop over dynamic data & learn why we *really* need to care about the key attribute.

v-on & methods: User Interaction

We've done a lot with dynamic data, rendering & components in Vue. Now it's time to add *behavior* via one of the most important directives: v-on. To do that, we get to leverage a new "methods" option!

Magic "this" & its Properties

Vue uses your component to create a powerful Vue Instance (the "this" variable). Where does that object come from? And how does it relate to our component's options? Why don't we use it in the template? Answers to some of Vue's most important magic!

Reactivity

When you change some data, how does Vue know to re-render? The answer is *fascinating*: a brave tale of getters, setters & proxies all centered around an observer that directs traffic. This is all invisible... but understanding it ==> great power

v-if, v-show and Conditional Classes

Vue has two ways to hide/show elements and they're both some of the *final* important directives that we'll see: v-show & v-if. Let's use these then learn how we can leverage a special :class syntax to conditionally hide/show certain classes.

This e-mail has been sent to @, click here to unsubscribe.

API Platform this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

It''s a new course week! API Platform Custom Resources, the 3rd course in our API Platform series, is here! This course is about customizing everything we can think of: custom API Resources, filters, the input/output DTO system and lots more.

Oh, and we have a new feature on SymfonyCasts: every tutorial (except for a few ancient ones) now publishes their full composer.json and package.json (if it has one) file contents right on the main tutorial page under a button that highlights a main library that''s being taught. If you open the contents, you can see the exact, locked version of each library from the final code in the tutorial. Huge thanks to Victor for his work, re-work and re-work again to make this feature really shine.

?

Cheers,

Ryan

API Platform Part 3: Custom Resources

App & Test Setup

Time for part *3* of our Api Platform series! We're calling this one "Custom Resources"... but it's really about customizing everything we can think of: custom Api Resources, fields, filters, the input/output DTO system + more.

Data Persister Decoration

If you need to run custom code before/after an entity is saved in ApiPlatform, a data persister is the answer. But instead of *replacing* the core data persister, let's "decorate" the one from Doctrine... and avoid reinventing the wheel. #Symfony

Decorating Data Persisters vs Context Builders

Let's geek out on Symfony service decoration + ApiPlatform. To run custom code on save, we call the core Doctrine data persister from our class. But why does this *not* require the "decorates" service option... but custom context builders do? Let's dig!

Custom Logic Only for some Operations

A custom data persister in ApiPlatform gives you the ability to run code before an item is saved. But what if you need to run that code only when something is created? Or updated? Or.. only when a field changes to a specific value? Let's dive in! #Symfony

API Platform this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hi Henry!

When it comes to API Platform''s REST system all the magic happens in listeners. That''s where you''ll find all kinds of neat things like data providers, deserialization, validation and persisters. We''ll use a good old-fashioned Doctrine postLoad listener to populate a non-persisted custom field in our API and stay performant with Symfony''s LazyString. Which also sounds like an instrument I''d be good at playing!

Finally, we''ll kick off the next set of videos by starting to create a *completely* custom API Resource class!

?

Restfully yours,

Ryan

API Platform Part 3: Custom Resources

Core Listeners & Accessing the "Resource" Objects

Where does all the magic happen in API Platform's REST system? Inside *listeners*. Yep, data providers, deserialization, validation, persisters, etc all live in listeners. Oh & they store the current API resource "data" somewhere you can get it! #Symfony

Doctrine postLoad Listener

The ultimate way to populate a non-persisted custom field in your API is with a good old-fashioned Doctrine postLoad listener. Let's use this to power another custom field. And bonus! We'll learn about Symfony's LazyString as a way to stay performant!

Completely Custom Resource

It's great when your API Platform resource is a Doctrine entity. But if you need to do something special, creating a custom API Resource (even if you only need 1 endpoint) is no big deal! So let's start creating a totally custom API resource class!

This e-mail has been sent to @, click here to unsubscribe.

Symfony, Doctrine & the Database this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

Another week and another property added to our Doctrine entity. Luckily we can do that smartly with make:entity -- sweet! We''ll use the Request object to read query parameters, POST data and headers in Symfony. And in just 8 minutes we''ll cover the difference between rich vs anemic models, add some rich methods *and* create our first UPDATE query. Need more? We''ll wrap up with some really awesome (and time saving) work with fixtures.

?

Let''s crush it this week!

Ryan

Doctrine, Symfony & the Database

Smarter Entity Methods

To add a new votes property to our Doctrine entity, we can leverage make:entity *again* to smartly update our class! Then we'll see how we can give the field a default value (hint: it's good, plain PHP code) & create our first custom entity method.

Request Object & POST Data

How can you read query parameters, POST data or headers in Symfony? It's all through the Request object. Fetching it will introduce us to the *fourth* "thing that we can have as an argument to a controller". Let's review all 4!

Update Query & Rich vs Anemic Models

What is a rich vs anemic model when it comes to Doctrine entities? Let's discuss, add some rich methods, create our first UPDATE query and dive into the core of Symfony to figure out how a redirect works. All in 8 minutes!

Data Fixtures

To work faster (not waste time constantly adding dummy data to the database manually) let's install DoctrineFixturesBundle. This simple library gives us the power to empty our database & get a fresh set of data whenever we want. Simple, but powerful.

Foundry: Fixture Model Factories

Want a data fixtures system that you can love? Say hello to Foundry! A shiny new lib that lets us define "model factories" and gives us the ability to create 20/50/100 fake rows in the database with a single line of code.

This e-mail has been sent to @, click here to unsubscribe.

Doctrine, Symfony & the Database this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hello Henry!

It''s new course week! These are just my favorite. We start by installing everyone''s favorite db library: Doctrine. This is the course where we use Docker - which I know some of you have been very excited about :) We''ll call in MakerBundle to bootstrap a docker-compose.yaml with a functional database container. Fun fact: the Symfony binary web server has automatic Docker integration. Add a database with make:docker:database, run docker-compose up and your app''s DATABASE_URL is *instantly* configured.

Also, thanks to the amazing team of Victor and Matias, we now have multiple choice challenges up on our Symfony 5 intro course, if you''ve already finished this course check what you remember: https://symfonycasts.com/screencast/symfony. And let us know what you think of them!

Another reminder that if you haven''t gotten your fill of JavaScript from us, you can catch me online on August 24th giving a virtual talk with our local web dev meetup here in Grand Rapids. Register and get the zoom link at https://www.meetup.com/grwebdev/events/271337206/.

?

Cheers,

Ryan

Doctrine, Symfony & the Database

Installing Doctrine

New tutorial time! Symfony 5 & Doctrine! For people new to Symfony, you'll *love* this team. If you're not new, this tutorial has a few tricks & surprises. To start, we'll see the pack "unpacking" feature that's new in symfony/flex 1.9

make:docker:database

To get a MySQL server running, we're going to use Docker and the *shiny new* make:docker:database command from MakerBundle. Big props to @jrushlow for creating that! With 2 commands, we have a running database container.

docker-compose & Exposed Ports

Now that we've used make:docker:database to generate a docker-compose.yaml file, let's take a 5 minute crash course into docker-compose itself, including how we can *connect* to the database instance from our host machine!

docker-compose Env Vars & Symfony

Fun fact: the Symfony binary web server has automatic Docker integration. Add a database with make:docker:database, run docker-compose up and your app's DATABASE_URL is *instantly* configured.

doctrine:database:create & server_version

The Symfony binary automatically exposes our running Docker services as environment variables. To get these vars in "bin/console" commands, we'll use "symfony console". We'll also chat about Docker image versions & match it with Doctrine's server_version.

This e-mail has been sent to @, click here to unsubscribe.

API Platform this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

This week we go custom: by creating a *totally* custom API Resource class, powering it with a data provider and learning a few other cool tricks. It turns out, documenting your properties properly is pretty important and can impact how API Platform determines if a relation propery should be an IRI string or an embedded object. There''s proof that good documentation makes more than just me happy!

?

Cheers,

Ryan

API Platform Part 3: Custom Resources

Custom Resource Data Provider

An API Platform Resource class does *not* need to be an entity. Let's prove it! In this video, we'll power a custom API Resource class via a data provider + learn a few tricks along the way - like how to choose your "identifier" & even make it a method!

Property Metadata

The documentation - and the rules for how to serialize/deserialize your objects - are largely determined by the "property metadata" that API Platform can collect. These come from a *bunch* of smart sources, like Doctrine config, PHPDoc and more #Symfony

Why/When a Many Relation is IRI Strings vs Embedded

API Platform determines whether a relation property should be an IRI string or an embedded object by looking at the "shared groups" of both classes. But unless you properly document your property, this may not work. Let's find out why! #Symfony

Collection "Types" and readableLink

To figure out if a collection property should be an array of IRI strings or embedded objects, API Platform reads your *code* to find out what's *inside* that collection. Internally, this sets the readableLink option, which you can also control #Symfony

Vue.js this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

Another awesome week of Vue.js where we get to "experience" the benefit of smart vs dumb components.?And now for the exciting part where we bring our Vue product page to life! This is mostly easy for us... but we *will* sneak in one cool new component: a reusable color-selector that emits an event when we choose a color.

And thanks to everyone - you, the community, the Symfony team - for a *wonderful* SymfonyWorld Online last week! I talked about Symfony's new security system, Fabien talked about the huge new "Symfony UX" initiative and that's just scratching the surface! The talks are available on the conference website. If you missed it, you can still buy a ticket to see the replays.

?

Cheers,

Ryan

The Delightful World of Vue.js Part 2

Making the Title Component Less Smart

What does it look like to discover that a Vue component is "too smart"? Let's find out and... really "experience" the benefit of smart vs dumb components.

Product Template & Color Selector

Let's bring our Vue product page to life! This is mostly easy for us... but we *will* sneak in one cool new component: a reusable color-selector that emits an event when we choose a color ??

Cart API & Data

This video is a bit less about Vue, and a bit more about our shopping cart API! How we store carts, how we update them & how we keep track of which cart belongs to the current user. ??

This e-mail has been sent to @, click here to unsubscribe.

API Platform this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

While there are tons of awesome built-in filters with API Platform, sometimes you still need to DIY it! We''ll create a custom filter and even take a look at what it''s like to create one for a resource that is *not* an entity class. Lastly, this week we''ll leverage the "arguments" option of @ApiFilter to return a 400 error if our filter has an invalid format!

Haven''t signed up for Symfony World Online? What are you waiting for? Some of the talks and workshops are now posted at: https://live.symfony.com/2020-world/ and you can purchase your ticket there too! Join us!

?

Cheers,

Ryan

API Platform Part 3: Custom Resources

Custom Filter, getDescription() & properties

API Platform has a great collection of built-in filters. But what if you need to do something different? Let''s create our first custom filter! To do it, we''ll take a tour into some core filters & dive into the getDescription() method

Custom Filter Logic for Entities

Time to fill in the logic for our custom API Platform filter. This includes the description - used in the interactive docs - *and* updating the query with our own logic. #Symfony

Custom Filter for Custom Resources

What does it look like to create a custom API Filter for a resource that is *not* an entity class? Let''s find out! #Symfony

Custom Filter apply()

Let''s dig into some core classes! I''m curious how the API filtering system *works* behind the scenes. Once we discover the answer, we''ll leverage it to pass our filtering logic from our filter into our data provider. Custom filter ? #Symfony

Filter Class Arguments

When you use an API Platform filter, you can configure it via an "arguments" option. Let''s see how that works and leverage it to return a 400 error if our filter has an invalid format!

This e-mail has been sent to @, click here to unsubscribe.

Upgrade to Symfony 5 this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Hey Henry!

I hope you''re able to stay home and safe this week. We''re doing what we can to push out content faster than ever. Let''s keep working! 

Our new Symfony 5 course continues to come alive! In just 1 step, we bring one of the most incredible debugging tools. It''s also time to see how CSS works in Symfony, generate some URLs, and build our first JSON endpoint in Symfony. 

Been waiting for the Symfony Deep Dive course? We''ve begun releasing it ...

Cheers,

Ryan

Charming Development in Symfony 5

Profiler: Your Debugging Best Friend

How can you add one of the most *incredible* debugging tools and get it working? Just follow these steps: 

1. composer require profiler 

2. Done :) 

Refresh and say hello to the web debug toolbar & profiler! We''ll also talk about Composer "packs".

Assets: CSS, Images, Etc.

Time to make our shiny Symfony 5 app... shinier with some CSS! We''ll get an intro to Twig''s asset() function & learn exactly what it does and does *not* do. Looking for a more robust CSS/JS setup? It''s coming later in the tutorial :)

Generate URLS

Every route has a name... but Symfony hasn''t made us worry about that yet. Now that we want to create some links, we''ll give each route a name and generate a URL to it. If we change the URL on a route later, all the links update!

JSON API Endpoint

Let''s talk API''s by building our first JSON endpoint in Symfony! We''ll learn that returning JSON is really no different than returning an HTML response. And we''ll uncover a few shortcuts along the way to make life easier.

Javascript, AJAX & The Profiler

We''ve got an API endpoint, so let''s bring some JavaScript into our Symfony 5 app! We''ll learn about page-specific CSS/JS, *appending* to Twig blocks & we''ll see one of the most *impressive* features of the web debug toolbar.

This e-mail has been sent to @, click here to unsubscribe.

Symfony 5 Deep Dive this week on SymfonyCasts

View online version

This week on SymfonyCasts!

Yo Henry!

This week we wrap up our Symfony 5 Deep Dive into the HttpKernel Request-Response flow by figuring out how type-hinting an argument with an entity class works, what a sub request is and why it''s the key to HTTP Caching.

Now onto *drum roll*... Symfony Fundamentals: services, config & environments! We walk through installing a new bundle, figuring out what service(s) it gives us and then actually use it. So cool! The debug:autowiring command is a super handy way to find all the services you can autowire. But it''s not the full list of services. To get that, we''ll try out the debug:container command and finish by learning how autowiring actually works.

?

Cheers

Ryan

Symfony 5 Deep Dive! The HttpKernel Request-Response Flow

How Entity Controller Arguments Work

While we're discovering *all* the different ways that Symfony passes arguments to our controllers, when we type-hint an argument with an entity class, how does that work? What system automatically queries for that object and passes it to us?

Sub Requests

You've probably used render(controller(...)) in Twig before. But did you know that this works by creating an entirely *new* Request object and sending it through HttpKernel? It's called a sub request & it's the key to HTTP Caching. Let's see how it works!

Sub Requests & Request Data

While building a new feature, we uncover a mystery! The $request object contains *different* data based on where we use it! This is a (purposeful) side-effect of sub requests. #Symfony #DeepDive

Manually Making a Sub Request

Ok, let's just do it then! To learn more about Symfony sub requests, let's trigger one manually ourselves in PHP! How? It's *delightfully* simple.

Sub Request Attributes

Final Symfony Request-Response Deep Dive Video! What's the secret to passing data from a master request to a sub-request? It's our good friend "request attributes"! The beauty is that, when using HTTP caching, this becomes part of the cache key!

Bundles!

Hot out of the tutorial oven! Our Symfony Fundamentals course is being updated for Symfony 5 - the one where we dive into services, autowiring, configuration, environments, env vars & more. All the tools you'll need to find your way through any feature.

KnpMarkdownBundle & Service

The *primary* job of a Symfony bundle is to give you services! So let's install a new bundle, find what service it gives us and *use* that service. We'll also use a handy tool to see *every* Twig function + filter in your app!

The Service Container & Autowiring

Symfony's debug:autowiring command is a *super* handy way to find all the services you can autowire. But it's not the *full* list of services. Let's try out the debug:container command then learn how autowiring actually *works* behind the scenes.