A look on the front-end world from the outside

Last week at Shopify we’ve had Hack Days, and as I’ve been working on a project related to Kubernetes I’ve decided to hack on an app around it. However this post is not about Kubernetes. It’s mostly about the state of things that I found in the front-end world and how much I loved it.

My project had server side (Kubernetes API client in Go that translates the events to Websockets) and the client side that consumes the events from the Websockets and renders a dashboard.

The dashboard had to be very dynamic and to render new data every couple of seconds. React sounded like the right fit for it and I’ve decided to give it a try. First thing that I found was that the React community has built the tool that bootstraps a React project which is now the recommended way to start.

The experience that I got from using from the bootstrapping tool was absolutely great. All I disliked earlier about the Javascript world is that you had to manually assemble all the things: Babel and Webpack configs, hot reload support and css loaders. Today all of that just works with `create-react-app`. It’s almost the Rails omakase box.

It initialized the app with a clear file structure, hiding all configuration layer inside the library.

All you have is your app code

My next question was “how do I get control over the configuration when I’m confident with using my own configs”? I was completely surprised when I found that the React community anticipated that too. Running `yarn run eject` converts the bootstrap into the classic app with all configs.

The feedback cycle of working with code is amazing too. Compile errors are rendered right in the browser and it’s way better readable than in any other frameworks.

Linters is another thing. I’m mostly working with Ruby and while we have linters there too, they haven’t been that smart and that easy to integrate into the workflow.

OMG, it suggests me that <div> can’t have onClick event

Usually I prefer Vim, but I try to keep myself open and I’d always prefer the right tool for the language. It’s the reason why I used Emacs when I did Clojure, and this time Atom was the best editor to write JS. I absolutely loved how smoothly the linter integration worked (hi to javascript style guide from Airbnb).

Linter suggesting that I haven’t told React what is the type of the input

Thanks to hot reloading in browser, the CSS changes updated as soon as I saved file in editor without reloading the page. Maybe that’s a usual thing for modern front-end developers, but for me as a backend developer who hasn’t touched the client side for a while it was something unbelievable.

Maybe the hardest part of my project was learning Redux. I appreciate Artur’s help and Getting Started with Redux course. It took me almost a day to understand the architecture, but at the end I became fluent and I could design my app to orchestrate all the Websockets events.

Overall, the impression I got was that all the shiny new things in the ecosystem work really well. You’ll have no troubles creating a single page app with components that have been developed not too long ago. But as soon as you need to integrate it with something from a different paradigm like TinyMCE or Google Maps API it would still be painful because these things don’t fit well into the modern ecosystem.

I’m writing this post as a reminder to myself and others that technologies change very fast. The Javascript that I knew five years ago was painful to use and I always tried to avoid it. Today in 2017 it’s a completely different experience, thanks to people and companies like Facebook who have been investing into tools and ecosystem.

It’s amazing to look broader than your everyday area and see how things have changed. It gives you the inspiration to bring tools from other ecosystems into your favorite language. It gives you the chance to work on front-end even if you always disliked it. It gives you the opportunity to send a Pull Request to the project outside of your expertise area.

Keep exploring.

Show your support

Clapping shows how much you appreciated Kir Shatrov’s story.