Blog
How we continue to evolve our frontend tech (stack and beyond)
Cris Silva — Frontend Developer
May 07, 2021
•
4 minute read
If you’ve done any type of user interface web development in the last years, you’re familiar with the constant change. The pace can be both challenging and overwhelming. Frameworks change, languages evolve, and the wide use of mobile devices has made the possibilities of developing for the web a continuous and exciting journey. The opportunities are endless and wide, and it’s natural that with time, your stack will become a living organism as well.
At Neon, we aim to build the best product possible with our partners. That means our frontend and back-end engineering teams work hard to keep up with the latest technologies, read up on documentation, join conferences and workshops, watch tutorials, and build small projects to experiment and share their results with the group, so we can improve our foundation in a way that suits our partners’ needs and business requirements.
What is a tech stack anyway?
Mixpanel has a great article on the subject. If you’re too busy to head over there, this easy-to-digest explanation is borrowed from them:
“A technology stack, also called a solutions stack, technology infrastructure, or a data ecosystem is a list of all the technology services used to build and run one single application. The social site Facebook, for example, is composed of a combination of coding frameworks and languages including JavaScript, HTML, CSS, PHP, and ReactJS. This is Facebook’s ‘tech stack.’”
Choices we’ve made
I joined Neon as a frontend developer in 2019. React has been Neon’s framework of choice. There’s no doubt you can develop solely with HTML, CSS, and Javascript without any issues, but as you try to build and scale, the appeal of maintainability, consistency, and component reusability is a huge advantage of React. Not to mention how much easier and less complex DOM manipulations become and how easy it is to integrate our data with the user interface.
Back in 2019, we were using React together with Proptypes, an amazing library that makes property-checking a breeze in Javascript.
Styled Components was our CSS-IN-JS choice and I was also introduced to Storybook, my favourite tool to build, create, and test UI components in isolation. Jest was (and still is) our testing framework of choice, and the team was already on board with React Hooks. I remember sitting at my desk on my first day at work, and after I cloned the team’s current project, I could not find one single Class-based component.
It was then I realized that Neon is a team of builders and innovators: we strive to do our best work and we always take the next step to create products that matter.
What fascinates me most about working at Neon, is that we always get to experiment hands-on with the most exciting and challenging frontend tech out there. That doesn't mean all of our trials succeed, but we learn from our choices and carry that knowledge over to the next project we tackle.
Our current frontend tech
At the end of 2019, we switched over from Javascript to Typescript and never looked back. It improved our code readability, but also ensured the products we ship are more stable, with fewer bugs. Coming from a non-CS background, the idea of static types scared me in the beginning, but Typescript has saved me so many headaches that I can’t remember how I used to write code without it. All week long, the team kept repeating, “Typescript is awesome!!!” 🤣
We’ve been using Emotion as our CSS in JS choice, and it’s been an amazing experience. I love that it’s agnostic, and I also really enjoy the syntax. Our team continues to use and love Storybook (version 6 was a very exciting release) and we’ve enjoyed and explored TestCafé for our end-to-end tests. But maybe I saved the best for the last: Chakra UI has been a game-changer for our team.
Chakra is a component library that has been gaining greater popularity across the React community.
A few reasons why we’ve adopted Chakra:
Development velocity
Chakra gives us the tools we need for fast prototyping and agile development. We can quickly turn wireframes our designers worked on into living, breathing components to be reused in a product, ready to be tested and shipped
Built with Typescript
Since Chakra is built using TS, it supports type checking out of the box :)
Component centric
The components Chakra provides are robust enough to cover any number of scenarios you’d need on an application, and they’re as easy to customize as it sounds. Chakra has lots of options for layout components, but I particularly like how it has both a Flex and a Stack component. Here’s a Box component where the syntax is as easy as it gets:
<Box
mt={1}
fontWeight="semibold"
as="h4"
lineHeight="tight"
>
This behaves like a div, but is rendered as an h4 element.
</Box>Accessibility
It’s built with accessibility (a11y) in mind, and it does an amazing job of covering accessibility concerns.
Hooks
Chakra has a whole section dedicated to hooks. Common custom hooks used in interfaces are ready for use. Not having to write a custom useState hook to check for a boolean value is so convenient and time-saving. They also have super useful hooks like useDisclosure to handle modals and alert components. Their latest release introduces a useMergeRefs hook that allows you to merge several refs into one.
Some final thoughts
Our tech (stack and beyond) is evolving every day. Frontend technologies come and go, but at the end of the day, it’s important to understand what helps us get our jobs done, while meeting our requirements. We’re really happy with our current setup, but we’re always on the lookout for what’s coming next.
If you’re excited about frontend development and experimenting with the latest technologies, come join our team!
Want to build something that matters?
Let's talk
We are grateful to be located in the traditional, ancestral and unceded territories of the xʷməθkʷəy̓əm (Musqueam), Skwxwú7mesh (Squamish) and səl̓ílwətaʔɬ (Tseil-Waututh) Nations.
©2023 Neon. All Rights Reserved.