Posted on

Atomic Design: Benefits And Implementation

Atomic Design is a methodology for designing and developing user interfaces that has gained popularity in recent times. It was proposed by Brad Frost as a systematic approach to creating reusable and consistent components in web applications, following an analogy with the structure of atoms and molecules in chemistry.

This approach organizes the elements of an interface at hierarchical levels, from the most basic and simple components to the most complex ones.

Posted on

Vue 3 Composition API

In this article, we assume that you know the basics of Vue 3. In the cited article, the main changes from Vue 2 to Vue 3 are explained, as is the basis for understanding how the composition API functions. The latter would be the main topic of this article: the Vue 3 Composition API.

Vue 3 Composition APIs

The change from Vue 2 to Vue 3 offers several options to developers when assembling the logic of a component. We can continue using the Options API as we were doing in Vue 2 or use the Composition API.

Posted on

A Guide to the Next JS Framework

Next.js is a framework extensively used by TikTok, Twitch mobile, Nike, IGN, PlayStation, Marvel, and many others. It offers all the functionality we need to deploy our application in production, with a hybrid system with static pages and server-side rendered (SSR) pages. It has support for Typescript and can be deployed without having to configure anything.

SSR Benefits (Next.js)

  • Performance
  • Isomorphic: Works on both server and client (browser)
  • Build: Next.js in the build retrieves the necessary data and ejects HTML with React components.
  • Static export: Compile static files to be able to upload to the server
  • 0 config (No need to configure anything to deploy Next, however it has a very extensible config)
  • Api routes
  • Deploy with Vercel
  • Next head: To modify the head part of the page to improve the SEO
  • Typescript support
  • Environment variables are used in the browser code, not just server code.
  • Fast Refresh: New experience of hot reloading in React components
  • Code splitting: loads chunk corresponding to the page path

Comparison With Gatsby

Gatsby is primarily used for building websites that generate static HTML content and web pages that have a fixed or predictable number of pages and stable content. An example might be an e-commerce site that has only 50 products available for sale.