Composable UI: Choosing a Front-end JavaScript Framework
Why We Chose Next.js for Our Open Source Accelerator
Composable commerce and MACH services propel the new wave of digital experiences. When embarking on Composable UI (an open source react storefront for composable commerce), one main objective was to harness these forces through an innovative and stable framework. Recognizing the ever-evolving nature of front-end technology, we sought a framework that embraces innovation, fosters a vibrant community to ensure platform longevity, and maintains stability amidst continuous advancements.
Evaluating the Contenders
Our first checkpoint involved identifying potential frameworks. Next.js, SvelteKit, and Nuxt.js, with their established capabilities, were obvious candidates. Each shines in its own right and caters to specific use cases effectively.
Next.js is a leading front-end framework created by Vercel known for its exceptional features and versatility. It provides server-side rendering (SSR), static site generation (SSG), automatic code splitting, and more, all of which contribute to fast and optimized web performance. An example of Next.js in action is Under Armor’s website. The sportswear giant seamlessly migrated its main consumer ecommerce site, underarmor.com, to a Next.js-based solution to improve page speed, performance and SEO.
SvelteKit is a front-end framework with a growing community and ecosystem of plugins and tools. Diverging from React’s widely recognized JSX syntax, SvelteKit employs its own simplified syntax, Svelte, enhancing developer experience by reducing code complexity. In addition, SvelteKit provides performance advantages, including smaller bundle sizes, faster loading times, and responsive user experiences. A noteworthy example of SvelteKit’s effectiveness can be seen in New York Times’ Coronavirus tracker, where the framework’s capabilities allowed seamless data handling and ensured a snappy interface for users to interact with.
Nuxt.js, on the other hand, stands out for its versatility in rendering modes, including server-side rendering, static site generation, and single-page application (SPA). Its modular architecture, based on Vue.js, makes it a powerful ally for complex applications that require a high degree of customization. An example that showcases Nuxt.js's strengths is the LiveMentor website which offers online courses for entrepreneurs. LiveMentor leverages Nuxt.js's capabilities for server-side rendering to improve performance and load times.
All three frameworks showcased their strengths and effectiveness during our initial evaluation, shining in their own ways and catering to specific use cases exceptionally well. However, the selection of the most suitable framework ultimately relies on conducting a thorough needs analysis for the project at hand. By carefully assessing the specific requirements, we can make an informed decision to ensure the chosen framework aligns perfectly with our objectives and delivers optimal results.
The Victor: Next.js
Full disclosure, our team was biased in its decision, having launched our enterprise accelerators using Next.js several years ago. However, we approached the decision around Composable UI with a willingness to be convinced, in case a stronger contender had emerged that would justify making a change for our open source commerce accelerator.
In the end, Next.js still emerged as the winner. It was a calculated decision based on Next.js's continual commitment to front-end evolution, its strong, community-driven ethos, and the delicate equilibrium it strikes between stability and innovation.
“Composable UI opens an avenue for learning and experimentation while enabling successful composable deployments. We are thrilled to be partnering with Orium to empower developers to get started with composable commerce and enabling them to deploy instantaneously and without friction." - Alex Hawley, Partner Solutions Engineer at Vercel
Front-end Innovation
With Next.js, we find ourselves at the forefront of front-end innovation. Next.js closely aligns itself with React.js, providing a powerful abstraction layer that allows us to harness the full potential of React. Leveraging Next.js's server-side rendering (SSR) and static site generation (SSG) capabilities, we were able to pre-render our pages, resulting in enhanced SEO and performance.
Next.js's automatic code splitting feature intelligently loads only the necessary code for each page, optimizing load times and improving overall performance. Additionally, the built-in development server and seamless toolchain simplify the deployment process, eliminating the need for a separate setup and streamlining our development workflow.
The extensive range of features offered by Next.js is a testament to its commitment to front-end innovation. It ensures that we consistently have access to the latest advancements to deliver exceptional experiences.
Community-driven Approach
Next.js thrives on its community, which consists of a vibrant and evolving group of developers who contribute significantly to its evolution. A notable example of community involvement occurred during the recent launch of Next.js 13's documentation, which activated Vercel’s commenting feature. This initiative encouraged thousands of community developers to actively review and validate all aspects of the documentation, fostering a collaborative and inclusive environment.
Next.js also maintains a highly active blog that serves as a valuable resource for the community. The blog keeps developers informed about ongoing improvements, new features, and best practices, and by providing regular updates and insights, Next.js ensures that the community remains engaged, involved, and up-to-date with the latest developments.
These initiatives, along with numerous others, exemplify Vercel’s unwavering commitment to making the framework as accessible as possible to its growing community. By actively involving developers in the documentation review process and providing a platform for ongoing communication through the blog, Next.js nurtures a sense of inclusivity and transparency. This fosters a strong community bond, encourages knowledge sharing, and allows developers to contribute to the framework's evolution, making Next.js an even more robust and developer-friendly platform.
Balancing Innovation and Stability
Innovation and stability are often viewed as conflicting elements. But in the development of Composable UI, our goal was to find a platform that could embrace innovation and evolution without burdening developers with frequent, complex updates and breaking changes. Next.js strikes a remarkable balance here, introducing new features as it preserves existing functionality, all while ensuring a seamless development experience.
This balance was evident when Next.js 13 was released during the development of Composable UI. The upgrade from 12 to 13 was swift and easy, showcasing the efficiency and convenience of the upgrade process. Despite the major version upgrade, Next.js 13 introduced new features and tools (such as a new App Router built on React Server Components) without deprecating the existing way of doing things. This approach allowed for incremental adoption, ensuring a smooth transition for developers.
Importantly, the development of Composable UI remained largely unaffected during the upgrade process, maintaining its momentum while gaining access to cutting-edge features. Next.js' commitment to backward compatibility and stability was evident as the existing codebase seamlessly integrated with the new version, underscoring the framework's reliability and dedication to providing a stable development environment.
By striking the right balance between innovation and stability, Next.js empowers developers to leverage the latest advancements while ensuring a solid and consistent development experience. The successful upgrade during the development of Composable UI exemplified how Next.js enables developers to embrace new features without sacrificing stability, reaffirming its position as a trusted framework for forward-thinking and sustainable projects.
Manifesting in Composable UI: The Next.js Effect
The decision to adopt Next.js has brought about a transformative impact on Composable UI. The integration of server-side rendering and automatic code splitting has greatly enhanced performance, resulting in impressive Lighthouse scores of 100 under several metrics.
The active Next.js community has been instrumental in swiftly addressing any challenges encountered along the way, providing valuable support and problem-solving expertise, allowing us to overcome obstacles efficiently while ensuring the long-term sustainability of the platform.
And finally, Despite the rapid pace of innovation, Next.js maintains a well-balanced approach that combines stability with a drive for continuous improvement. This equilibrium enables Composable UI to flourish, positioning it as a champion in the world of composable commerce.
As we embark on this exciting journey, we remain confident in the instrumental role of Next.js. Its exceptional capabilities and ongoing advancements empower us to venture further and achieve new heights. Next.js continues to be a key component in our pursuit of success and innovation within Composable UI.
David Azoulay
Director of Product, Orium
David is a technical leader with over two decades of experience in product development and technical consultancy. He leads the development of composable commerce accelerators and engages in thought leadership within the digital commerce space.