adzz.github.io

This is the story of my recent foray back into the world of front end web development. I have been working almost exclusively as a Ruby developer for a little while now, but was recently offered the chance to head up a new project at work: implementing a frontend to a bunch of micro services that form our internal tools. In javascript.

I love Ruby, but I also love learning new things. And challenging myself… And self harm, apparently.

It will be fun I thought. I’ve made websites I thought. I know javascript, I thought.

You see it turns out the first thing I had to do was learn javascript. ES6 to be specific. With just a little bit of ES7. Or is that ES2015? Even though it’s 2017.

Either way javascript isn’t javascript anymore. Except to run it in most browsers it has to be javascript again, so looks like I’ll need Babel. And probably Webpack.

I’ll just read up on them.

Yes, it’s as scary as it looks.

It looks like React is a good choice for our use case, and there will be some relatively complex state management so we’ll probably use Redux. I’ll just learn about those.

I’m three articles deep, I think I know what JSX is and I am thoroughly convinced that html in javascript is actually fine. I’m even coming round to inline styles. Probably ready to give this baby a whirl!**

I’ll just have a look at the react docs and see how we go about starting a react app…

Nope! Nope. Absolutely nope. I’m using create-react-app. In fact, their README is a bit good, wish I’d seen that earlier.

I’m not going to be the only developer on this (I hope) and so when it’s my turn to cry in the corner, I’d like the developer that follows to have some conventions to, um, follow. Which means Linting!

Looks like a different app we have used SUIT CSS naming conventions which worked out marvellously. Let me just brush up on what that is.

Luckily there weren’t four thousand choices, so stylelint for CSS and eslint for javascript will do me nicely. You can even steal Air Bnbs configuration! I made a couple of npm scripts to kick off linting, and ran them on the scaffolded app to ensure the settings were all good.

Oh. It wants me to call js files jsx. Seems reasonable.

Wait now the react server can’t find the js file. Because we changed it to jsx…

Okay we got there. One WORKING app, with react, that compiles AND lints our css and javascript. Only a small part of me is wishing I learnt Elm.

Except it’s not working exactly, because we haven’t actually written any code yet. I’m sure my product manager will understand.

Okay, code. So, tests? I just need to write a test! Should be easy enough….

Holy functional monads. My kingdom for RSpec!

To test in javascript you need a test runner, an assertion library, a mocking library, (instead of just rspec), a browser environment (this is all just for unit tests) AND a test framework. Plus some extra if you want code coverage.

That’s fine, there can’t be that many choices and anyway I’m sure the community has come to some kind of consensus. We only have to choose from:

Air Bnb also wrote enzyme because you need that too. I love those people.

I carefully selected Jest (because it came with create react app) and I’ll worry about E2E tests later.

So now we have it. A passing smoke test, with a component that I managed to apply linted styles to!

Just need the rest of the functionality now….

Part 2 to here

**disclaimer: please don’t whirl babies