Published on 09 May 2023
How does Remix enhance Hydrogen, Shopify's front-end development framework?
Łukasz
Chief Technology Officer
During my career, I worked with many React.js teams and was involved in some way in dozens of projects. Over the years I feel I witnessed enough to say with a degree of certainty what is needed to build a well-functioning, technically precise, and efficient team.
Unsurprisingly, we follow many of those principles and practices at Bitnoise. While you can freely adapt some of them, a few come from past projects and attitudes which is difficult to emulate.
In any case, I hope the below summary will be an inspiration.
So what makes React.js teams truly special?
Experience
At Bitnoise, We’ve been part of the React.js journey since its beginning. When it was released in 2013, we already had years of experience in software development. Before the advent of this library, we worked with various technologies where we struggled trying to achieve user-friendly and efficient applications. However, we’re always looking for new technologies to help expedite our work and provide top-notch solutions using the best possible tools.
Over the past decade or so, we’ve watched React.js grow and evolve. Unfortunately, it has become bloated with multiple offshoot libraries making it rather clumsy to use. Consequently, a few challenger frameworks have emerged, including Vue.js.
Lately, we’ve been contented to see that React.js has become leaner, more efficient, and developer-friendly. We can thank the community and amazing frameworks such as Next.js and Remix.js for helping facilitate this change.
As for our role, it’s safe to say that after delivering dozens of software projects, building multiple frontend and full-stack teams, and speaking to hundreds of developers over the past decade, we know React.js inside-out. This technology bears few surprises to us.
Without this experience, we would not be able to build such good teams, and I doubt others would.
True engineering on the frontend
Typically, you might reserve the term “software engineer” for backend developers. And yet, this term fits front-end developers perfectly. It is not about the part of the application they work on or the technology they specialize in. Things like a degree in Computer Science or some other STEM subject are a great background for a great frontend engineer.
That’s why we tend to hire React.js developers with solid, relevant academic backgrounds. Furthermore, we have several backend and full-stack developers on our team . Node.js, Python, .NET, and PHP are just a few of the tools these developers work with. Whenever we work on a front-end project, our developers are always ready for consultation or ad-hoc work.
Pixel-perfect mentality
Being capable of expressing every imaginable design through code should be within reach of any good frontend team. To transform clients ’ blueprints into a reality, expert UX/UI designers should work hand in hand with developers. As a client, you can work with these designers one-on-one as they service your project. Otherwise, they should be available for consultations if you provide us with designs from an external agency.
In our case, part of our commitment to perfection comes in the form of our use of state-of-the-art tools for design and collaboration.
-
Figma is a powerful cloud-based design collaboration tool. As such, it allows designers, product managers, owners, and developers to communicate and collaborate simultaneously.
-
Storybook is a workshop where developers can build frontend components and pages individually. This is useful because it enables us to demonstrate and check the component pieces of an application without needing to have the entire view or page ready at once.
-
QA engineers test all of the apps we build. At the bare minimum, we run our products through automated testing to ensure that the UX is excellent from day one.
Bitbucket, Eslint, Next.js and Remix to complement React.js
Cutting edge projects usually take advantage of modern tools to complement React.js and streamline frontend work. As a result, high-quality software is created faster. Here are a few of the tools you might use:
-
Bitbucket/Vercel/Fly.io for Continuous Development and Continuous Delivery (CI/CD). This toolkit helps us avoid long builds and unnecessarily complex configuration work. I.e., it relieves us of the typical mess and stress that comes with tedious development and QA processes. Furthermore, we like this combo because it provides collaboration tools alongside instant previews – thus leading to rapid iteration.
-
Eslint/Prettier for code quality. Linting tools analyze our code and look for errors within it. Since React.js does not have built-in compilers to check the validity and quality of our code, Eslint and Prettier are essential to our development process.
-
Next.js and Remix for a fast, slick UI. Using these two frameworks, we can optimize interactions even with the most intricate designs. They also help improve the developer experience while we’re coding thus making our jobs easier.
-
React-Query, Redux-Toolkit, and styled-components as libraries of our choice.
TypeScript
By using TypeScript on top of raw JavaScript, code becomes a lot more consistent. Of course, JavaScript is a scripted language, however, it does not use compilers. Therefore, it’s easy for developers to make errors while coding with it. TypeScript fixes this and makes code more maintainable in the process. Plus, it keeps code up to date with browsers as they change their standards.
Here are some of the many concrete benefits of using TypesScript:
-
Increasing team performance
-
Easier code management
-
Early spotted bugs Increasing code readability
-
Easily readable and understandable components
SEO mindset
Regrettably, raw React causes some issues with search engine optimization. Sometimes, search engine algorithms will shun pages built on React - especially if they’re a single-page application. We resolve this problem with Next.js. Since Next.js permits rendering React applications server-side, the SEO issue vanishes.
Community and knowledge sharing
Best teams are not the ones who become isolated from the rest of the world. Learning, teaching, talking to others, inspiring them, and helping others in the software community brings in a lot of new energy and motivation to developers.
In our case - the commitment to education is everlasting. We’re constantly investing in professional development and growth at every level. Here are some examples of our philosophy in action that may help your teams grow too:
-
Internal training, which is directed and delivered by our senior developers or an external specialist.
-
Bitnoise Meet is a learning initiative we began to encourage education and research in our field. In doing so, we invite professionals from other companies to learn alongside us.
-
PozTechTalks is a series of podcasts and videocasts that we coordinate with other local software companies in Poznań. During these sessions, we discuss advanced computing concepts and challenge each other on our perspectives.
-
Land on Moon is a meetup initiative where CEOs, founders, and product owners share their inside stories from the software development industry.
I hope those hints will help your team become better and happier. If you’d like to work with me or my colleagues check out some of the services we offer and do not hesitate to reach out to us.
