The 2018 Beginners Guide to Back End (JSON API) + Front End Development

It’s been a few weeks in the making, but I am happy now to reveal my latest course here on CodeReviewVideos:

The 2018 Beginners Guide to Back End (JSON API) + Front End Development.

This course will cover building a JSON-based API with the following back-end stacks:

  1. ‘raw’ Symfony 4 (PHP)
  2. Symfony 4 with FOSRESTBundle (PHP)
  3. API Platform (PHP)
  4. Koa JS (JavaScript / node)

Behat will be used to test all of these APIs. One Behat project, four different API implementations – in two different languages (PHP and JS).

We’re going to be covering the happy paths of GET , POST , PUT , (optionally) PATCH , and DELETE.

We’ll also be covering the unhappy paths. Error handling and display is just as important.

Where possible we’re going to try and use just one Behat feature file. It’s not always possible – the various implementations don’t always want to behave identically.

There’s a ton of good stuff covered in these videos. But the back end is only half the battle.

Whether you want to “catch them all”, or you’re working with a dedicated front-end dev, it’s definitely useful to know the basics of both.

With that in mind, you can pick and choose whether to implement the back-end, or front-end, or both.

If you don’t want to implement a back-end yourself, cloning any of the projects and getting an environment up and running is made as easy as possible by way of Docker. But you don’t need to use Docker. You can bring-your-own database, and do it that way, too.

The Front End

Whatever back end you decide to spin up, the front end should play nicely.

We’re going to implement a few different front-ends. The two I’m revealing today are:

  1. ‘raw’ JavaScript
  2. React

I have plans for a few others, but each implementation is a fair amount of work and I don’t want to over promise at this stage. There’s definitely at least two more coming, but let me first get these two on the site 🙂

The raw JavaScript approach aims to show how things were in the ‘bad old days‘. The days before your package manager  would take up ~7gb of your hard disk with its cache  directory.

The benefit of working this way is that there’s really no extra ‘stuff’ to get in the way. We can focus on making requests, and working with responses.

But that said, this is 2018 and the many modern JavaScript libraries and frameworks are fairly awesome. You’ll definitely get a renewed sense of appreciation for how much easier your life is once you’re comfortable using a library like React, after having done things the hard way.

Again, as mentioned we will cover more than just raw JS and React. Currently each implementation is between ten and fifteen videos. Each video takes a couple of hours to write up, and another couple of hours to record on average. I’m going as fast as I can, and will upload and publish as quickly as possible.

You can watch them as they drop right here.

Site Update

Behind the scenes over the past 10 weeks I have been working on integrating CodeReviewVideos with Braintree.

This is to enable support for PayPal.

I tried to create a ticket for everything I could think of ahead of starting development.

And I added a new ticket for any issue I hit during development. I’m not convinced I tracked absolutely everything, but even so I completely underestimated just how much work would be involved in this feature.

Being completely honest, I have never been more envious of Laravel’s Spark offering. For $99 they get Stripe and Braintree integration, and a whole bunch more. Staggering.

There’s a bunch of other new and interesting features in this release.

I’ve taken the opportunity to migrate from Symfony 3 to Symfony 4 for the API. There’s a bunch of new issues that arose during this transition – I hadn’t given it much prior thought, but with the new front controller ( public/index.php) totally broke my Behat ( app_acceptance.php) setup.

This work is also enabling the next major feature which I will start work on, once PayPal is live. More on that in my next update.

I appreciate that from the outside looking in, there doesn’t seem to have been a great deal of activity on the site over the last few weeks. I can assure you that behind the scenes, there has never been more activity.

Have A Great Weekend

Ok, that’s about it from me for the moment.

As ever, have a great weekend, and happy coding.

p. s. – I would be extremely grateful if you could help me spread the word by clicking here to tweet about the new course.

Conditional SerializerGroup in FOSRESTBundle

I needed to conditionally add an entry to the list of active Serializer Group entries in a FOSRESTBundle controller action.

Here’s my attempt:

The idea behind this code is to that a Widget should show all of its information to all users.

It should show a summary of related features to all users.

It should show a summary of the related sprocket (one-to-one) to all users.

However, if you are logged in, you should see all the sprocket information, not just a summary.

It seems to work quite well in my use case. Gotta love them sprockets!

How I Fixed: Missing Headers on Response in Symfony 3 API

The first time this caught me out, I didn’t feel so bad. The second time – i.e. just now – I knew I had already solved this problem (on a different project), and found my urge to kill rising.

I wanted to  POST in some data, and if the resource is successfully created, then the response should contain a link – via a HTTP header – to the newly created resource.

Example PHP / Symfony 3 API controller action code snippet:

And from the front end, something like this:

Now, the interesting line here – from my point of view, at least – is the final line.

Because this is a newly created resource, I won’t know the ID unless the API tells me. In the Symfony controller action code, the routeRedirectView  will take care of this for me, adding on a Location header pointing to the new resource / record.

I want to grab the Location  from the Headers returned on the Response and by removing the part of the string that contains the URL, I can end up with the new resource ID. It’s brittle, but it works.

Only, sometimes it doesn’t work.

Excuse the formatting.

From JavaScript’s point of view, the Headers array is empty.

This leads to an enjoyable error: “Cannot read property ‘replace’ of null”.

Confusingly, however, from the Symfony profiler output from the very same request / response, I can see the header info is there:

Good times.

Ok, so the solution to this is really simple – when you know the answer.

Just expose the Location  header 🙂

After that, it all works as expected.

Custom Route Name in FOSRESTBundle

I recently had an issue where I wanted to have a controller called SocialMediaProfilesController, but whatever I tried, the automatically generated route names kept coming out as e.g. get_socialmedia_profiles.

I haven’t dived deep into the code to determine as to why this weird spacing issue is occurring, but my guess would be that if you created a controller called SomeEvenLongerStringController, your action might be get_someevenlonger_string. But as I say, I haven’t tried this, so it’s just a guess as to what might be happening.

Anyway, the fix is pretty simple. It’s probably out there on Google, or in the docs, or something, but I couldn’t find it. Instead, I stumbled upon this and it works, so here we go:

By using the RouteResource annotation, you can control how the route names will be generated.

Without the annotation:

And then with:

So that’s pretty handy.

FOSRESTBundle for REST API

FOSRESTBundle is a tool to help you in the job of creating a REST API with Symfony2. Let’s take a closer look at what it all really means and where to download it and get started.

What is FOS?

FOS stands for Friends of Symfony. It’s a group of people who begun collaborating on the KNP Labs User Bundle. They decided to create a dedicated space for Bundles that they maintained as a group. Over time this has led to many more popular bundles being created via the group.

Check out the Friends of Symfony GitHub to see the bundles available.

What is REST?

REST stands for Representational State Transfer. It is resource-based rather than action-based. In a RESTful API, we’re talking about things instead of actions.

REST typically runs over HTTP (Hypertext Transfer Protocol) and has several architectural constraints:

It decouples consumers from producers.

It leverages a layered system.

It leverages a uniform interface.

Able to leverage a cache.

Stateless existence.

Features of the FOSRESTBundle

The FOSRESTBundle gives us great tools to allow the quick development of RESTful API’s and applications using Symfony2. Once you have confidence in using it, you’ll quickly find so many other possibilities become available including apps, Angular JS front-ends and as well as other opportunities.

Some key features include:

  • Generate URLs following REST conventions using a custom route loader.
  • Accept header format negotiation.
  • It has an exception controller used for sending HTTP status codes.
  • RESTful decoding of HTTP request body and accept headers.
  •  View layer for allowing output and format agnostic controllers.

Benefits of FOSRESTBundle

REST is likely to keep growing as more and more businesses seek open, well-defined interfaced for developing applications and infrastructure services. It’s very useful and worthwhile to learn.

Advantages of learning REST include:

  • It is designed for using over Open Internet/Web. It’s a better choice for web scale applications and cloud-based platforms compared to SOAP (Simple Object Access Protocol) and is often the choice for the architecture of internet services these days.
  • RESTful web services are easily leveraged by most tools.
  • REST forbids conversational state, meaning we can scale very wide with the addition of server nodes behind a load balancer.

Getting Started with FOSRESTBundle:

You can find the FOSRESTBundle here. Installation is a quick one step process. There are six main sections on the download page to look over before you begin. Check out the config references too, and there are also some example applications too that can be used as a guideline.

FOSRESTBundle

Ready to learn to code a RESTful API?

In our RESTful API course using FOSRESTBundle, you can watch and learn how to set up, configure and implement a REST API. Sometimes it’s easier watching than trying to figure stuff out for yourself, plus you can also ask questions!

The course covers all of the basics such as GET, POST, PUT and DELETE. This is along with handling related data collections, leveraging the Symfony2 Forms component, and very importantly, this is all done using test driven development techniques. Let’s get cracking and we hope to see you on the inside!