Testing, Testing, 1, 2, 3

2017 is here. I hope you’ve had an enjoyable New Years? These last two weeks seem to have flown by, but then I guess they always do.

I’m going to keep this week’s update short and sweet, as I’m sure you will have had a bunch of accumulated emails to plow through after a two week break.

In the first two videos this week we covered testing the “happy”, and “unhappy” paths through the Request reducer. Writing the tests helped guide us through what should happen, and as your logic gets more complex, tests become ever more important in delivering working code on time, every time:

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/testing-request-reducer-part-1

and

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/testing-request-reducer-part-2

Testing reducers should be easy though. After all, they are pure functions. Where things get a little more involved is in functions that have side effects – calls to our API, and all the perils that entails.

As we’ve already covered, to handle these side effects we are using Redux Saga. But up until now, we haven’t tested these functions. When I first sat down to write a test for a Saga I have to admit, I found it daunting. Thankfully though, testing Redux Sagas is actually really, really easy.

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/testing-authsaga-happy-path 

We’re covering the “happy” path through our doLogin generator function, and in the process we’ll see how easy it is to reliably test functions that contain calls to APIs, or other side effect generating (excuse the pun) activities.

What’s New This Week at CodeReviewVideos – 30th December 2016

I hope you’ve had a nice Christmas week. I remember carving the turkey on Christmas day somewhat concerned there might not be enough. And yet, only yesterday did we finish the last of the left overs. Madness.

Over the course of the last week you may have read (via Twitter) a discussion around “side projects” and should developers be doing them in their free time over Christmas. I’ll start by sharing my opinion on this, but I’d love to hear yours:

For me, side projects are amongst the most important things a developer can be doing with their free time. Now, I’m not talking about sacrificing spending time with your family to instead be eyeballs-in-front-of-monitor (Lord knows, we do enough of that all year anyway). I mean if you’re going to sit down and write a bit of code, it might as well have some structure to it.

One of the things that I frequently hear from others developers is that we don’t get the opportunity – at work – to play with interesting / new technology. For example:

“I want to learn Redis, but my boss won’t let me.”

Controversial – I agree with your boss! 🙂

I mean I agree with the underlying reason: no, you are not hacking Redis into the production, money-making stack that runs the companies business to scratch your technical itch.

And that’s fine. There’s a way to play with Redis without any approval from your boss:

Use it in a side project!

Side projects don’t need to change the world. They don’t need to become self sustaining businesses in their own right. They have always worked best for me when they satisfy some personal demand I have that might also just happen to allow me to play with some new tech – Elasticsearch, Ansible, Graylog, etc.

Then, once you’ve played with your new tech (e.g. Redis), and used it in a real (side) project, not only will you have something new to stick on your CV, but you can also talk more authoritatively with your boss / colleagues / significant other about how awesome {shiny_new_tech} is, and how it might improve said current money making business system even further.

And hey, if your side project does transform into something money making, maybe one day in the not too distant future you will have employees of your own asking to shoehorn Rails into your PHP code, so they too can scratch their own itch 🙂

This Week in Videos

Throughout this week there have been three new videos.

First up, we looked at how we might add a spinner to our React / Redux application:

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/showing-spinning-icons-because-why-not

Whilst on the surface this seems really simple, what’s cool here is how that spinning icon is displayed depending on a current value in our Redux-managed state. The idea here is to keep our application’s code sane and manageable as we grow.

This implementation is fairly naive. As our application grows – think: maybe we add a Registration flow using Stripe – then we’re going to hit a bug in the way our spinner works on the back end. Thinking about this, we then move on to a better implementation:

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/more-robust-request-tracking

This is nice and all, and maybe good enough, but from my own personal real world experience, we could still hit on an issue whereby our spinner seems to show / hide unexpectedly. The problem we have now is that to track multiple requests (e.g. one to Stripe, another to our API, all in the same form submission), we need a more involved reducer implementation. And whilst we could have a hack at it, instead it makes sense to write a tested implementation.

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/getting-started-testing-with-jest

As if we haven’t covered enough new stuff in this series (what with React, Redux, Redux Saga, React Router, Yarn, Bootstrap 4… the list goes on), we’re going to start testing all our code using Facebook’s JavaScript testing framework – Jest.

To me, this makes sense as our entire stack is Facebook centric already. We might as well embrace the tooling they use. After all, if it’s good enough for the third biggest web site in the world then it’s good enough for me.

I’ll finish up here by covering one last point:

In my quest to find out how popular Facebook is for the purposes of this post, I Google’d “alexa”. In the olden days, the defacto result for Alexa would have always been the site I linked to earlier. Now Alexa is an Amazon product which occupies the top two search engine results. Alexa – the company – is owned by Amazon, and comes third. I feel old.

And with that, I would like to wish you all a very Happy New Year, and a prosperous and successful 2017.

Chris

What’s new this week at CodeReviewVideos? 23rd December 2016

I hope you’ve had a fun week coding. As it’s really nearly Christmas I’m in full scale geek mode over a present I know I’m getting. I’ve been looking forward to reading this for ages, and I’m also excited about reading a paperback. It still sucks if you drop it in the bath, but at least you don’t risk electrocuting yourself like if you drop your tablet.

I’ve been experimenting with Elixir (the language used by the Phoenix Framework) over the past few months and I love it. Apparently it’s very similar to Ruby, which I never gelled with, but there’s so much more to it than that. If you are at all interested in learning Functional Programming, I cannot recommend Elixir highly enough. A couple of nice resources to check out are:

But that doesn’t mean I’m stopping with PHP. Far from it. PHP7.1 is proving really nice, and my codebases are starting to see a liberal use of return types, nullable types, and more.

I also couldn’t be happier with how Symfony is performing as the API (back end) for the React / Redux / Saga project.

There’s some really cool new things in Symfony 3 that will be covered over the next few weeks, and there’s a really cool thing that’s been in since early days on Symfony 2 that may help make your code base more modular. Stay tuned for those.

This week we covered logging out (in a fashion) from our React front end:

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/logout

There’s a bit more to it than this as we shall see once we add in a few more pages to our app, but as a starting point, it’s good enough.

Then we added a Bootstrap 4 (alpha :)) NavBar to our project:

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/adding-an-auth-aware-navbar

We added in some of that ‘classic’ React style ternary to display our username and a logout button if available, or just the log in button if not. Though the code to implement this is trivial, it’s only trivial because we’ve done a bunch of the hard work before hand (via Redux / Sagas).

BTW – did you know ‘Sign In’ is probably better to use than ‘Log In’ – obligatory StackOverflow link.

Finally, we tidied up the project:

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/cleanup-linting-and-login-form-styling

With using a boilerplate, we gain a load of things we do want, but a few that we don’t. The benefits of initially having these files around as examples far outweighs the downsides of having to spend a bit of time deleting them in the future.

All this code is fine, but it’s untested. I know there’s an absolute ton of new things to cover for any PHP dev who is new to JavaScript, but now that we’ve covered a typical work flow, and you’ve hopefully started to get a feeling of how pages / components fit together, we can now add yet another ‘thing’ to our cornucopia of things, and look at testing.

We’re going to be using Jest. It’s CV friendly 🙂

Before I go, could I ask you to reply and let me know of any conference / meet up group / user group talk – that you can find on YouTube (or similar) – that you would recommend a watch?

I’ve been watching a bunch of them recently (follow along on Twitter if you’d like to know which) and my mind seems to go blank whenever I need to think of one to watch next. I’d love a few recommendations.

I hope you have a very merry Christmas. I’ll be back before New Years, but if you don’t catch the mail before then, a happy new year to you also 🙂

Chris

What’s new this week at CodeReviewVideos? 9th December 2016

I hope you’ve had a fun week full of coding. Have you upgraded to PHP 7.x yet? With the recent release of PHP 7.1, a number of the new languages features are really usable.

This week there have been three new videos, two of which continue the dive into PHP 7.1:
https://codereviewvideos.com/course/php-7-1/video/class-constant-visibility

We start off with a look at class constant visibility. As with all these computer science-y sounding things, it initially doesn’t seem that appealing, I’m sure.

However, this is a fairly handy tool to have in your belt. It allows setting private, and protected constants. Not so useful if you only ever add constants to your interfaces, but if you’re a little more liberal with their usage then this ones going to be helpful, I’m sure.

https://codereviewvideos.com/course/php-7-1/video/void-functions

Last week we looked at nullable types – the idea being that functions may either return something, or null. We learned how this also applies to type hinting variables inside function arguments.

In this video on void types, we cover the edge case of what happens when your function doesn’t return anything – and that includes null.

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/login-part-4

Finally we continue on with the login journey for our React / Redux / Redux Saga front end to our Symfony 3 API back end.

If you’ve ever wanted to get started with React / Redux then I cannot recommend this course to you enough.

One thing that really bugged me when learning React was in how the examples covered the API connectivity. Frequently the way this would be done would be to provide some JSON mock. That’s all good for a small tutorial, but back in the real world, the API part is super important to know, and can be quite tricky to build.

Thankfully we’ve already built the API in Symfony 3, and now we get to see how a modern front end JavaScript application might interact with it. Redux, and Redux Saga have fundamentally changed my approach to front end development, and learning about them will likely make you a more rounded developer. Sharing this with you is an absolute privilege.

See you all next week 🙂

Chris

What’s New This Week At CodeReviewVideos (2nd December 2016)

This week there have been three new videos.

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/login-part-2

Firstly, we continue with the Login Journey throughout the React / Redux / Redux Saga app we are building. In this video we cover a fundamental part of the stack – the Action. As we finish up this video, you will have dispatched your first Action.

Ok, but you may be wondering: why should that thrill me?

Because it’s at the heart of how our application will change its state. And that ultimately leads to applications that are many, many times more fun to work with than spaghetti slop.

https://codereviewvideos.com/course/react-redux-and-redux-saga-with-symfony-3/video/login-part-3

Secondly, we go from dispatching this Action to handling that Action inside the world of Redux Saga.

This is the sort of stuff that’s absolutely MASSIVE in the jobs market right now. It’s popular for a reason. This will contribute greatly not only to your CV, but to making applications that you are highly more likely to enjoy working on.

https://codereviewvideos.com/course/php-7-1/video/nullable-types

And then the final video for the week covers probably the best thing about PHP 7.1 (released today btw):

Nullable types.

This is a major usability fix to a really nice, but largely unusable PHP 7.0 zero : Return types.

It also fixes scalar type declarations (int, string, bool, etc).

In other words, these will now become much more common as more and more migrate their codebases to PHP7.x, and with all these reported speed boosts, why wouldn’t you?

See you all next week 🙂

Chris