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.
It initialized the app with a clear file structure, hiding all configuration layer inside the library.
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.
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.
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.