As 2023 draws to a close, it’s a great time to reflect on the technologies I’ve used and the lessons I’ve learned. This year, I’ve explored a diverse range of tools and frameworks, each offering unique benefits and challenges. Here’s a look back at the key technologies that defined my 2023:
React
My journey with React spans over more than five years, witnessing its evolution from class-based components to the revolutionary introduction of hooks. React has become my go-to choice for web development, and its component-based approach continues to be a hallmark of flexibility and scalability. The addition of TypeScript to the equation has further elevated my development experience. With its rigorous type checking, TypeScript has injected an unprecedented level of quality into my codebase, eliminating runtime errors and ensuring type safety throughout the development process.
While Create React App has served as a reliable companion for many React projects, the arrival of Vite has ushered in a new era of development speed and efficiency. Its lightning-fast hot module replacement and native ES module support have significantly reduced build times, leading to a more fluid and enjoyable development experience. This shift from Create React App to Vite represents a significant step forward in my quest for optimization and performance.
React Server Components has added another layer of innovation to the React ecosystem. This paradigm shift allows developers to offload heavy computations to the server, delivering only what’s necessary to the client. The potential for improving performance, reducing latency, and enhancing the overall user experience is significant.
Beyond the core framework, the React ecosystem has flourished with a myriad of libraries, tools, and solutions. One of the most compelling aspects of working with React is the vibrant and supportive community.
Angular
My relationship with Angular dates back to its early days, when I explored the beta versions of Angular 2 and subsequently versions 2 and 4. When i worked on the Angular version 15 recently, one thing i can say is Angular has come a long way. The entire Angular ecosystem has undergone a transformative journey, constantly adapting and improving to meet the needs of modern web development.
While React and Angular offer contrasting approaches to building web applications, with React being a library and Angular a framework, both embrace a fundamental philosophy: the component-based approach!
Next JS
My journey with Next.js began a little while ago, and I’ve been constantly impressed by its rapid development and innovative features. This year, Next.js underwent a major architectural shift with the introduction of App Router, replacing the existing Page Router. This change, while initially demanding some adaptation, has opened up exciting new possibilities for building performant and scalable web applications.
Another notable development this year is the ongoing decoupling of Vercel’s infrastructure from Next.js itself. This move towards greater independence provides developers with more freedom and flexibility when choosing their deployment platform.
With its innovative features, robust ecosystem, and commitment to developer experience, Next.js is poised to remain a hot topic in the coming year.
Three JS and React Three Fiber
I’ve always been fascinated by websites built with Three.js, captivated by the seamlessness and perfection of the user experience they deliver. Bruno Simon’s work, in particular, has been an ongoing source of inspiration. This year, I finally invested in his course, eager to unlock the secrets of 3D development on the web.The course proved to be an eye-opener, providing a deep understanding of how 3D works in the web browser. It was a journey of exploration and experimentation, filled with both challenges and breakthroughs.
One of the most valuable discoveries was React Three Fiber, a library that seamlessly integrates Three.js with the React framework. With its out-of-the-box components and helpful utilities, React Three Fiber makes it easier than ever to add 3D elements to your React applications.I’ve already begun experimenting with React Three Fiber internally, and the results have been incredibly rewarding. From creating interactive 3D objects to crafting immersive animations with gsap library, the possibilities seem endless.
My journey with Three.js and React Three Fiber has just begun, and I’m incredibly excited for what lies ahead. I’m eager to continue learning, exploring, and pushing the boundaries of what’s possible in the world of 3D web development.
Tailwind CSS
While I started exploring Tailwind CSS last year, I truly delved deep into its capabilities this year. Transitioning from writing vanilla CSS or SCSS to directly applying styles within my HTML was a significant shift in my mental model. While the learning curve was steeper compared to other tools, I found the experience immensely enjoyable and would readily recommend it for future projects.
One of the few drawbacks I observed was the reliance on a secondary system for writing more traditional CSS, as not all styles can be easily converted into utilities. Additionally, the approach can add significant bulk to the HTML markup, which might require careful consideration depending on the project’s specific requirements.
React Aria and React Spectrum
When it comes to building websites and applications, making sure everyone, regardless of abilities, can use them is crucial. React Aria steps in as a handy helper in this process. It’s a set of tools, or “hooks” in developer lingo, specifically designed for React that allows us to create components that are accessible from the get-go. It’s like building a solid foundation for a house; in this case, the foundation ensures that everyone, including those who use assistive technologies, can interact seamlessly with the components.
But the story doesn’t end there. React Spectrum, another tool in our toolbox, takes things a step further. It’s a collection of pre-made components built on top of React Aria. So, if you’re looking for buttons, dropdowns, or other building blocks for your project that are already geared toward accessibility, React Spectrum has your back.
And it’s not alone in the mission for inclusive design! Reach UI, Radix UI, and Headless UI are also part of the accessibility dream team. These libraries provide a range of components that consider various needs and abilities, making them fantastic options for projects where creating an inclusive experience is a priority. It’s like ensuring that your digital space is welcoming and usable for everyone who comes through the door.
Vanilla Extract CSS
This year, I had the pleasure of exploring Vanilla Extract, a novel approach to writing type-safe CSS. Its core philosophy revolves around marrying the power of TypeScript with the familiar world of CSS, allowing developers to define and consume styles with greater precision and confidence.
While the concept of type-safe CSS is undeniably alluring, the learning curve associated with Vanilla Extract cannot be ignored. Mastering its unique syntax and nuances requires dedicated effort, and potential challenges arise when tackling global styles or targeting specific classes.
Given its relatively young age and limited community support, recommending Vanilla Extract for a project might seem premature.
Styled components
I’m not a big fan of CSS-in-JS solutions; I always maintain the mental model that HTML and CSS are somewhat separated, or at least use class names like in Tailwind CSS. I’ve tried Material UI’s CSS-in-JS solution before, and it wasn’t that great. However, when I tried this alternative, it introduced a different mental model where we create CSS in JS. I liked the approach of moving HTML elements from the code into the CSS. I’m looking forward to exploring this more in-depth soon.
Others
Two other libraries that truly shone this year were Storybook and React Testing Library. Storybook, a seasoned champion in the framework arena, proved its mettle again, especially when I tackled a component library project. Its features clicked beautifully, making the development process smooth and efficient.
On the testing front, React Testing Library became my go-to partner. Its intuitive nature made component testing a breeze, and its focus on accessibility testing was a real standout. It allowed me to confidently build components that embraced inclusivity, ensuring everyone could enjoy the full experience.
Conclusion
As I look back on the technological landscape of 2023, each tool and framework played a crucial role in shaping my development journey. The lessons learned, challenges overcome, and innovations embraced have collectively contributed to a richer understanding of frontend development. Looking ahead, the dynamic nature of technology promises even more exciting possibilities, and I eagerly anticipate the continued evolution of the tech landscape in the coming year.
Closing
This year has been a journey of exploration, a quest to expand my horizons and unlock the hidden potential of the web. Here’s to a year of growth, innovation, and a shared passion for technology!
Happy Reading!
