DEV Community: Ronaiza Cardoso

How reading can make you a better developer

Ronaiza Cardoso — Mon, 08 Apr 2024 19:30:52 +0000

Have you ever had the feeling that everything has already been created by someone else? The world is big, and with the internet, we have the capacity to reach almost every piece of knowledge that has been produced by the human race.

But this has started a long time before the popularization of the internet; the sharing of information started with books. They were the first, and in my opinion, the most amazing form of technology created before. With books, you get the chance to access the minds of great people, people who dedicated their lives to learning one specific field, and we are fortunate enough that those people were kind enough to share those learnings with us.

Okay, I wonder that you are thinking something along the lines of: what is the point of all of this? How is this related to programming? Well, it turns out that programming is just a form of writing; while we are writing code, we are just talking to the computer to translate the requirements of our application to the computer.

So if we are writing things, sure enough, someone has already solved the problem that we are trying to solve, but how could we find this? Again, we are fortunate enough to have one of the major "libraries" of code open to us; we just need to read through it. Reading someone else's code is one of the main forms of learning for me. When I do that, I can understand not only the language that I'm learning/working with, but also how people who dedicated their lives to writing applications think. By reading their code, I can get a shortcut on how to solve the problems that I'm facing in a more efficient way without having to spend hours of my life thinking about that problem.

But life is not easy, and every approach has its problems, and over the years - I have been using this one for the past seven years, as a developer - I have faced some issues like: sometimes you are not able to frame your problem in a way that was solved before by someone else, and you have to figure this out by yourself. But interestingly enough, I used the principles of learning from others to create my own solution because, in the end, we, as a society, just exist because we are capable of learning from our peers. But while I was figuring things out with the learnings that I accumulated, I faced some anxiety, and those were addressed with exercises, help from friends, and psychotherapy.

Another issue that I saw people having is not being able to spend the needed time to let things work. The internet brings a lot of good things for us, but also a lot of distractions. And this approach doesn’t work with distractions. To learn by reading, you have to spare time to let things settle inside yourself. If you get distracted by your phone, you will not be able to let your brain do the work that is needed to sink that knowledge in.

Getting free from distraction and sparing time in the day to learn something is one of the foundations of a good life, a life without so much anxiety and more confidence in your endeavors.

Unlocking the Power of Application Testing: A Path to Confidence

Ronaiza Cardoso — Thu, 04 Apr 2024 17:01:35 +0000

In the dynamic world of software development, confidence is key. It's the assurance that our applications will not crumble under the weight of change, but rather adapt and evolve without interruptions. However, this confidence cannot be placed upon us; it must be earned through rigorous testing and validation. Let us delve into the essence of application testing and the imperative for developers to fully embrace it.

Understanding the Essence of Testing

At its core, testing is about more than just identifying bugs; it's about instilling confidence in our products. It's about knowing that when we introduce changes, our applications will continue to function as expected. Testing serves as a safeguard, a safety net that ensures our code behaves predictably in various scenarios. By writing tests, we not only validate our code but also validate our confidence in its reliability.

Identifying What Matters

In the vast landscape of application testing, it's easy to get lost in the minutiae of implementation details. However, effective testing is not about testing everything; it's about testing what matters most. As developers, we must discern what aspects of our applications are critical to their success and focus our testing efforts accordingly. Whether it's core functionalities or user interactions, prioritizing what truly matters enables us to allocate our resources wisely and ensure maximum test coverage where it counts.

Steering Clear of Pitfalls

One common pitfall in testing is becoming wrapped up in implementation details. While it's tempting to obsess over algorithms and coding styles, such intricacies often distract us from the bigger picture. Good tests are not about testing the nitty-gritty of our code; they're about validating that our applications meet the desired outcomes. By adopting a user-centric approach to testing, we can sidestep the pitfalls of focusing on irrelevant implementation details and instead ensure that our tests align with real-world usage scenarios.

Convincing the Skeptics

In a world driven by deadlines and deliverables, convincing stakeholders of the importance of testing can be a daunting task. However, it's essential to convey that testing is not a luxury; it's a necessity. By emphasizing the tangible benefits of testing—such as increased reliability, reduced bug-fixing costs, and improved user satisfaction—we can garner support for our testing goals. Moreover, by demonstrating the tangible value that testing adds to our applications, we can overcome skepticism and foster a culture of quality within our teams.

Testing is not merely a checkbox on our development checklist; it's a mindset, a philosophy that underpins our approach to software development. By embracing the essence of testing—confidence, focus, and pragmatism, we can unlock the full potential of our applications and ensure their success in an ever-changing landscape. So let us embark on this journey of testing with conviction, knowing that with each test we write, we inch closer to unlocking the true power of our creations.

Maximizando o desempenho com inicialização lenta em React useState

Ronaiza Cardoso — Wed, 27 Mar 2024 14:41:30 +0000

No mundo do desenvolvimento React, otimizar o desempenho é sempre uma prioridade. Uma técnica que pode melhorar significativamente o desempenho em determinados cenários é a lazy initialization no gancho useState. Vamos explorar como funciona a lazy initialization, seus benefícios e quando a usar.

Compreendendo a Lazy initialization

A lazy initialization envolve adiar a inicialização de um valor até que seja realmente necessário. No contexto do gancho useState do React, isso significa fornecer uma função como argumento de estado inicial em vez de um valor estático.


const [dados, setDados] = useState(() => {
  // Execute a inicialização cara aqui
  return fetchDataFromLocalStorage();
});

Ao passar uma função para useState, o código de inicialização é executado apenas quando o componente é renderizado pela primeira vez. Isso é particularmente útil em cenários onde o processo de inicialização consome muitos recursos, como buscar dados de um servidor remoto ou ler do armazenamento local.

Benefícios da lazy initialization

A lazy initialization oferece vários benefícios, incluindo:

Melhoria no Desempenho: Ao atrasar a inicialização do estado até que seja necessário, você pode evitar trabalho desnecessário durante a renderização do componente. Isso pode levar a tempos de renderização inicial mais rápido e uma interface de usuário mais responsiva.
Evitar Valores Obsoletos: Ao usar a lazy initialization, o valor retornado pela função de inicialização está sempre atualizado. Isso ajuda a evitar problemas com dados obsoletos, especialmente em componentes que são frequentemente renderizados novamente.

Funções de Despacho e useState do React

Outro aspecto importante a considerar ao usar lazy initialization em useState é o comportamento da função de despacho retornada pelo gancho. As funções de despacho no React são projetadas para fornecer acesso ao valor de estado anterior, garantindo que as atualizações sejam baseadas no estado mais recente.

const [contagem, setContagem] = useState(0);

// Incrementar contagem com base no estado anterior
const incrementar = () => {
  setContagem(contagemAnterior => contagemAnterior + 1);
};

Ao usar a forma de função de setState, você pode evitar possíveis problemas com valores de estado obsoletos, especialmente em cenários onde as atualizações de estado são assíncronas ou ocorrem rapidamente.

Co-localização para Melhor Manutenção

Além de otimizar o desempenho com lazy initialization, também é essencial seguir as melhores práticas para organização de código e manutenção. A co-localização, a prática de manter código e comentários relacionados próximos, pode melhorar significativamente a legibilidade e a manutenção da sua base de código.

Ao manter o estado e sua lógica associada perto de onde são usados, você facilita para os desenvolvedores entenderem como diferentes partes da aplicação interagem. Isso pode levar a depurações mais rápidas, refatorações mais fáceis e colaboração mais suave entre os membros da equipe.

Aprendendo com o Epic React e Desenvolvedores Especialistas

Todas essas valiosas informações sobre lazy initialization e organização de código foram obtidas no curso Epic React, um recurso abrangente para dominar o desenvolvimento React. Ao aplicar esses padrões em projetos do mundo real e aprender com a experiência de desenvolvedores experientes, você pode garantir que suas aplicações React sejam não apenas eficientes, mas também mantidas e escaláveis.

Além disso, muitos desses padrões e melhores práticas foram documentados e endossados por especialistas na comunidade React. Ao seguir convenções estabelecidas e aproveitar a sabedoria coletiva da comunidade, você pode construir aplicações React robustas, eficientes e prazerosas de trabalhar.

Espero que tenha achado este artigo útil! Lembre-se do poder da lazy initialization e da co-localização. Incorporar essas práticas garante aplicações eficientes, fáceis de manter e escaláveis.

Maximizing Performance with Lazy Initialization in React useState

Ronaiza Cardoso — Wed, 27 Mar 2024 14:36:12 +0000

In the world of React development, optimizing performance is always a top priority. One technique that can significantly improve performance in certain scenarios is lazy initialization in the useState hook. Let's delve into how lazy initialization works, its benefits, and when to use it.

Understanding Lazy Initialization

Lazy initialization involves deferring the initialization of a value until it is actually needed. In the context of React's useState hook, this means providing a function as the initial state argument instead of a static value.

const [data, setData] = useState(() => {
  // Perform expensive initialization here
  return fetchDataFromLocalStorage();
});

By passing a function to useState, the initialization code is only executed when the component is rendered for the first time. This is particularly useful in scenarios where the initialization process is resource-intensive, such as fetching data from a remote server or reading from local storage.

Benefits of Lazy Initialization

Lazy initialization offers several benefits, including:

Improved Performance: By delaying the initialization of state until it's needed, you can avoid unnecessary work during component rendering. This can lead to faster initial render times and a more responsive user interface.
Avoiding Stale Values: When using lazy initialization, the value returned by the initialization function is always up-to-date. This helps prevent issues with stale or outdated data, especially in components that are re-rendered frequently.

Dispatch Functions and React useState

Another important aspect to consider when using lazy initialization in useState is the behavior of the dispatch function returned by the hook. Dispatch functions in React are designed to provide access to the previous state value, ensuring that updates are based on the latest state.

const [count, setCount] = useState(0);

// Increment count based on previous state
const increment = () => {
  setCount(prevCount => prevCount + 1);
};

By using the function form of setState, you can avoid potential issues with stale state values, especially in scenarios where state updates are asynchronous or occur in rapid succession.

Co-location for Improved Maintainability

In addition to optimizing performance with lazy initialization, it's also essential to follow best practices for code organization and maintainability. Co-location, the practice of keeping related code and comments close together, can greatly improve the readability and maintainability of your codebase.

By keeping state and its associated logic close to where it's used, you make it easier for developers to understand how different parts of the application interact. This can lead to faster debugging, easier refactoring, and smoother collaboration among team members.

Learning from Epic React and Expert Developers

All of these valuable insights into lazy initialization and code organization were gleaned from the Epic React course, a comprehensive resource for mastering React development. By applying these patterns in real-world projects and learning from the expertise of seasoned developers, you can ensure that your React applications are not only performant but also maintainable and scalable.

Additionally, many of these patterns and best practices have been documented and endorsed by experts in the React community. By following established conventions and leveraging the collective wisdom of the community, you can build React applications that are robust, efficient, and a joy to work with.

I hope you found this article helpful! Remember the power of lazy initialization and co-location. Incorporating these practices ensures efficient, maintainable, and scalable applications.

Um simples truque para otimizar as re-renderizações no React

Ronaiza Cardoso — Tue, 26 Mar 2024 19:26:51 +0000

This is a translation of the original post
One simple trick to optimize React re-renders by
Kent C. Dodds.

Eu estava preparando um post para o blog sobre um assunto relacionado a re-renderizações no React quando me deparei com essa pequena jóia de conhecimento do React que acredito que você vai gostar muito:

// Detect dark theme var iframe = document.getElementById('tweet-1143200604065431552-997'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1143200604065431552&theme=dark" }

Após ler esse post no blog, Brooks Lybrand implementou esse truque e esse foi o resultado:

// Detect dark theme var iframe = document.getElementById('tweet-1149800755404185609-671'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1149800755404185609&theme=dark" }

Animado? Vamos desvendar com um exemplo simples e fictício e então discutir sobre qual aplicação prática isso tem para você em seus aplicativos do dia a dia.

Um exemplo

// brinque com isso no codesandbox: https://codesandbox.io/s/react-codesandbox-g9mt5

import * as React from 'react'
import ReactDOM from 'react-dom'

function Logger(props) {
  console.log(`${props.label} renderizado`)
  return null // o que é retornado aqui é irrelevante...
}

function Counter() {
  const [count, setCount] = React.useState(0)
  const increment = () => setCount(c => c + 1)
  return (
    <div>
      <button onClick={increment}>O contador está em {count}</button>
      <Logger label="contador" />
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('root'))

Quando isso é executado, "contador renderizado" será registrado no console inicialmente e toda vez que o contador for incrementado, "contador renderizado" será registrado no console. Isso acontece porque quando o botão é clicado, o estado muda e o React precisa obter os novos elementos React para renderizar com base nessa mudança de estado. Quando ele obtém esses novos elementos, ele os renderiza e os aplica ao DOM.

Aqui está onde as coisas ficam interessantes. Considere o fato de que nunca muda entre as renderizações. É estático e, portanto, poderia ser extraído. Vamos tentar isso só por diversão (não estou recomendando que você faça isso, espere mais tarde na postagem do blog por recomendações práticas).

// brinque com isso no codesandbox: https://codesandbox.io/s/react-codesandbox-o9e9f

import * as React from 'react'
import ReactDOM from 'react-dom'

function Logger(props) {
  console.log(`${props.label} renderizado`)
  return null // o que é retornado aqui é irrelevante...
}

function Counter(props) {
  const [count, setCount] = React.useState(0)
  const increment = () => setCount(c => c + 1)
  return (
    <div>
      <button onClick={increment}>O contador está em {count}</button>
      {props.logger}
    </div>
  )
}

ReactDOM.render(
  <Counter logger={<Logger label="contador" />} />,
  document.getElementById('root'),
)

Você percebeu a mudança? Sim! Temos o registro inicial, mas então não recebemos novos registros quando clicamos no botão! O QUÊ!?

Se você quiser pular todos os detalhes técnicos profundos e ir direto para "o que
isso significa para mim", vá em frente e vá direto para lá agora

O que está acontecendo?

Então, o que está causando essa diferença? Bem, tem a ver com os elementos do React. Por que você não dá uma pausa rápida e lê minha postagem no blog "O que é JSX?" para ter um rápido lembrete sobre os elementos do React e sua relação com o JSX.

Quando o React chama a função do contador, ele recebe algo que se parece um pouco com isso:

// algumas coisas removidas para clareza
const elementoDoContador = {
  type: 'div',
  props: {
    children: [
      {
        type: 'button',
        props: {
          onClick: increment, // este é o manipulador de clique
          children: 'O contador está em 0',
        },
      },
      {
        type: Logger, // esta é a nossa função de componente de registro
        props: {
          label: 'contador',
        },
      },
    ],
  },
}

Esses são chamados de objetos descritores de IU. Eles descrevem a IU que o React deve criar no DOM (ou via componentes nativos para react native). Vamos clicar no botão e dar uma olhada nas mudanças:

const elementoDoContador = {
  type: 'div',
  props: {
    children: [
      {
        type: 'button',
        props: {
          onClick: increment,
          children: 'O contador está em 1',
        },
      },
      {
        type: Logger,
        props: {
          label: 'contador',
        },
      },
    ],
  },
}

Até onde podemos ver, as únicas mudanças são as props onClick e children do elemento button. No entanto, todo o conteúdo é completamente novo! Desde os primórdios do uso do React, você está criando esses objetos totalmente novos em cada renderização. (Felizmente, até os navegadores móveis são bastante rápidos nisso, então isso nunca foi um problema de desempenho significativo).

Pode ser mais fácil investigar as partes deste conjunto de elementos do React que são iguais entre as renderizações, então aqui estão as coisas que NÃO mudaram entre essas duas renderizações:

const elementoDoContador = {
  type: 'div',
  props: {
    children: [
      {
        type: 'button',
        props: {
          onClick: increment,
          children: 'O contador está em 1',
        },
      },
      {
        type: Logger,
        props: {
          label: 'contador',
        },
      },
    ],
  },
}

Todos os tipos de elementos são iguais (isso é típico), e a propriedade label para o elemento Logger não mudou. No entanto, o objeto de props em si muda a cada renderização, mesmo que as propriedades desse objeto sejam iguais ao objeto de props anterior.

Ok, aqui está o ponto crucial. Porque o objeto de props do Logger mudou, o React precisa reexecutar a função do Logger para garantir que não receba nenhum novo JSX com base no novo objeto de props (além dos efeitos que podem precisar ser executados com base na mudança de props). Mas e se pudéssemos evitar que as props mudassem entre as renderizações? Se as props não mudarem, o React sabe que nossos efeitos não precisam ser reexecutados e nosso JSX não deve mudar (porque o React depende do fato de que nossos métodos de renderização devem ser idempotentes). É exatamente isso que o React é codificado para fazer bem aqui e tem sido assim desde o início do React!

Ok, mas o problema é que o React cria um novo objeto de props toda vez que criamos um elemento do React, então como garantir que o objeto de props não mude entre as renderizações? Espero que agora você entenda por que o segundo exemplo acima não estava re-renderizando o Logger. Se criarmos o elemento JSX uma vez e reutilizarmos o mesmo, obteremos o mesmo JSX todas as vezes!

Vamos juntar tudo novamente

Aqui está o segundo exemplo novamente (para que você não precise rolar para cima):

// brinque com isso no codesandbox: https://codesandbox.io/s/react-codesandbox-o9e9f

import * as React from 'react'
import ReactDOM from 'react-dom'

function Logger(props) {
  console.log(`${props.label} renderizado`)
  return null // o que é retornado aqui é irrelevante...
}

function Counter(props) {
  const [count, setCount] = React.useState(0)
  const increment = () => setCount(c => c + 1)
  return (
    <div>
      <button onClick={increment}>O contador está em {count}</button>
      {props.logger}
    </div>
  )
}

ReactDOM.render(
  <Counter logger={<Logger label="counter" />} />,
  document.getElementById('root'),
)

Então vamos verificar as coisas que são iguais entre as renderizações:

const counterElement = {
  type: 'div',
  props: {
    children: [
      {
        type: 'button',
        props: {
          onClick: increment,
          children: 'O contador está em 1',
        },
      },
      {
        type: Logger,
        props: {
          label: 'counter',
        },
      },
    ],
  },
}

Como o elemento Logger está completamente inalterado (e, portanto, as props também estão inalteradas), o React pode automaticamente fornecer essa otimização para nós e não se preocupar em re-renderizar o elemento Logger, pois ele não deveria precisar ser re-renderizado de qualquer maneira. Isso é basicamente como o React.memo, exceto que, em vez de verificar cada uma das props individualmente, o React verifica o objeto de props holisticamente.

Então, o que isso significa para mim?

Em resumo, se você estiver enfrentando problemas de desempenho, tente isso:

1 - "Eleve" o componente caro para um pai onde ele será renderizado com menos frequência.
2 - Em seguida, passe o componente caro como uma propriedade.
Você pode descobrir que fazer isso resolve seu problema de desempenho sem precisar espalhar o React.memo por todo o seu código como um grande band-aid intrusivo 🤕😉

Demo

Criar um exemplo prático de um aplicativo lento em React é complicado porque geralmente requer a construção de um aplicativo completo, mas eu tenho um exemplo de aplicativo criado artificialmente que tem uma versão antes/depois para você conferir e brincar aqui

⚠️

Uma coisa que eu quero adicionar é que, mesmo que seja melhor usar a versão mais rápida deste código, ele ainda tem um desempenho muito ruim quando é renderizado inicialmente e teria um desempenho muito ruim se precisasse realmente fazer outra renderização completa (ou quando você atualiza as linhas/colunas). Isso é um problema de desempenho que provavelmente deveria ser tratado por seus próprios méritos (independente de quão necessárias são as re-renderizações). Além disso, por favor, lembre-se de que o CodeSandbox usa a versão de desenvolvimento do React, que oferece uma experiência de desenvolvimento muito boa, mas tem um desempenho MUITO mais lento do que a versão de produção do React.

⚠️

E isso não é apenas algo útil no nível superior do seu aplicativo. Isso pode ser aplicado em qualquer lugar do seu aplicativo onde faça sentido. O que eu gosto nisso é que "É natural para composição e atua como uma oportunidade de otimização." (foi o Dan quem disse). Então, faço isso naturalmente e obtenho os benefícios de desempenho de graça. E é isso que sempre amei no React. O React é escrito de forma que aplicativos React idiomáticos sejam rápidos por padrão, e então o React fornece ajudantes de otimização para você usar como saídas de emergência.

Boa sorte!

Clean Architecture—The introduction

Ronaiza Cardoso — Wed, 22 Feb 2023 23:35:11 +0000

Clean Architecture aims to separate the business rules or domain of an application from external resources like databases and frameworks. However, according to Rodrigo Branas, a more suitable name for it could be Clean Design, as architecture imposes constraints such as language and paradigm, while design involves defining responsibilities and their distribution.

Douglas Martin stresses that design is an unavoidable aspect of any project, and the only alternative to good design is bad design, not a complete absence of it. Even if someone not consciously attempts to design something, it will still be designed in some form, whether the result is a good or poor design.

Reinventing the wheel (or almost)

Rodrigo Branas explains that Clean Architecture does not invent anything new with its core principles. Instead, it builds upon concepts that were already introduced in Ivar Jacobson's software architecture books from the 1990s, specifically the use-case driven approach. The book isn't about reinventing the wheel, but rather refining and adapting existing concepts.

Ivar Jacobson's book introduced several key concepts that are still relevant today, such as the Entity-Boundary-Control (EBC) pattern. It involves separating the entity (the object representation), the boundary (the external consumer), and the control (the coordinator) to create a more modular and flexible architecture. By using this pattern, developers can create software systems that are easier to maintain and modify over time.

Core principles

According to Robert Martin, the core of your application is not centered around the database or any framework being used, but rather the use cases of your application. Achieving this requires the isolation of business rules, the definition of layers and responsibilities, and careful control of flow and dependencies within the application. By prioritizing these aspects, developers can ensure that the use cases of the application remain at the center of the development process.

Wrapping this up

This was just an introduction, providing background information on the book and its history. In a subsequent post, I plan to delve into the key concepts presented in the Clean Code Architecture course by Rodrigo Branas, including enterprise and application business rules, interface adapters, and frameworks and drivers. These concepts are going to be a big part of what we do as developers on a day-to-day basis.``

BEM - Block__Element–Modifier.

Ronaiza Cardoso — Sun, 20 Sep 2020 11:20:40 +0000

BEM is a modular solution for writing CSS to large projects. Since BEM is just a conjunct of concepts about how to naming the class, we can only see the real benefit of using it in large codebases.

The goal is to create extendable and reusable interface components. This methodology helps maintain a large codebase organization and avoid the nightmare of change one CSS in one specific area and breaking the other.

Looking through the concept of each letter:

Block: An entity that is meaningful on its own, for example:

.card

Element: A part of a block that has no standalone meaning and is semantically tied to its block:

.card__picture
.card__title
.card__descriptiom
.card__button

Modifier: A flag on a block or element. Used to change appearance or behavior.

.card__button--active

Summary of great content about it:

Ionic vs React Native: Pros and cons

Ronaiza Cardoso — Thu, 25 Jun 2020 11:34:34 +0000

If you're thinking about building a mobile app, this article is for you. I mean, almost everyone has a smartphone these days. Can you name a better way to engage with your users and make their lives easier?

According to a study conducted by Gartner, 70% of all enterprise software interactions are expected to occur on mobile devices by 2022.

However, the mobile ecosystem is complex. In order to have an app published on Play Store or App Store, you may need to have two different development teams: one for Android and another for iOS, which can lead to a cost increase.

To address this struggle, cross-platform tools started to pop up. In this article, we're going to compare Ionic and React Native, which are the most relevant libraries. But first, let me introduce you to the cross-platform world.

Native Apps vs Cross-platform mobile apps

Today, there are plenty of ways of having a mobile application as a final product. The most popular solution is building it as native, by using the native language of each platform. The alternative is to choose a cross-platform tool that I will mention later on.

Using native code leads to superior performance, but has the downside of having two teams to handling the product: one for the Android ecosystem and another for iOS.

Cross-platform libraries rely on standard web tools like HTML, CSS, and JavaScript, providing native experiences by accessing the native features.

The hybrid path has the advantage of increasing the speed of mobile development, by having just one project for both platforms and offering UX consistency across channels. After this short introduction, let's go further in detail about the two most used tools to build cross-platform mobile applications: Ionic and React Native.

Ionic vs React Native: Which one is more popular?

Both have a wide community around them, with a strong adoption by big companies and mobile applications used by a very large number of customers. This is what we can perceive from npmtrends data:

As seen in the graphic above, Ionic had way more downloads than React Native in 2017. This occurred because Ionic is older than React Native. At that time, it was more mature, ready to be used in mobile development, with less bugs and more stable. After 2019, Facebook put more effort into making React Native a stable library, by updating it frequently, using it in their own products, and presenting showcases about the results.

Ionic also has plenty of apps that were released to both Play Store (Android) and App Store (iOS). The Untappd App is one of the examples.

While with React Native, we can check the Marketplace feature, that is part of Facebook app.

What is better: Ionic or React Native?

Both of them have different characteristics and different ecosystems. Let’s talk about each of them individually to better understand how Ionic and React Native work and its pros and cons.

Ionic - A Hybrid Framework

Ionic: what is it?

Ionic Framework is an open-source UI toolkit for building mobile and Progressive Web Apps (PWAs) apps using web technologies like HTML, CSS, and JavaScript. It provides mobile-optimized web technology-based components as well as native APIs using Capacitor and Ionic Native. It was created in 2013, by the Drifty Co. The original version was released in 2013, built on top of Angularjs and Apache Cordova.
In 2019 they launched a version with support for multiple front-ends, including React.js.

Today you can build an Hybrid mobile application in Ionic with Angular, React.js, Vuejs, or even with just plain JavaScript.

Now let’s take a look at its advantages:

Pros:

Has a good documentation, since it's a company specialized in building tools that help companies and developers to make mobile applications.
These tools are well understood by web developers since it uses webview to render the application (letting the developers use day-to-day technologies like HTML, CSS, and JavaScript).
Makes it easy to port the code into a Progressive Web App (PWA), since all the code is built to run in a web browser. Ionic just requires a few extra steps to be able to have one PWA.

Although it has benefits, we can also encounter some challenges in the way, like the ones listed below:

Cons:

Since the organization behind the framework makes a living from it, besides the fremium features, there are also premium ones that you can only use if you pay an extra cost.
Ionic is built on top of the “web browser”. The application code can't easily access the native functionalities.

React Native - Learn once, write anywhere.

React Native: what is it?

With React Native, developers can build mobile applications for Android and iOS platforms using JavaScript, but they can also implement features with native code. It enables cross-platform builds by providing platform-agnostic native components that map into the platforms’ native UI building blocks. It was created in 2015 by Facebook and it is used in many of its products, as for example, the marketplace section of Facebook's application.

Developers can also build TV applications with React Native. This means that with a few extra steps, it is possible to deliver applications for the Apple TV and Android TV.

Now, lets dive into some benefits of React Native:

Pros

Massive community around the ecosystem. Right now, there are impressive numbers on GitHub repo facebook/react-native. This means that it's very likely for developers to find answers to issues or problems they're facing.
Ability of being integrated into existing native apps, like showed in this presentation. Besides that, it's also possible to build native modules, making your mobile application's look and feel as smooth as a native application.
React Native is translated to native code, with the benefit of achieving 60 frames per second. This gives the user the impression of a native app - not slow at all!
It allows developers to deliver applications for Apple TV and Android TV, with only a few extra steps.

Now let's take a look at the issues we've encountered as below:

Cons:

Since there's a big private company behind it, new tools are released according to their own needs. However, the community is free to extend the desired features, to achieve what is necessary for both Android and iOS native technologies.
React Native is still beta. Yes, you read it right. Although it was created five years ago, the Facebook team still didn’t have the confidence to bump a "production" release of it. It may sound like: "be aware of the possible risks".

This often leads to breaking changes in tools and dependencies between versions. But hey, Gmail was almost 5 years in beta and it worked pretty well.

What is the difference between React Native and Ionic?

Both allow developers to build mobile applications that can run on different platforms and use JavaScript as the principal language. However, Ionic's approach is more "web-like". This means that the application runs on a web browser wrapped in an SDK, to access the native functionalities.

React Native uses three bridges, UI Thread, Layout Thread, and Javascript Virtual Machine, to trade information by sending messages to each one.

It uses the JavaScript language to map the native capabilities. This allows developers to build mobile applications that are then translated into native code. On the other hand, the Ionic Framework uses web technologies (HTML, CSS, and JavaScript) to build the applications. It is possible to use Ionic Native and/or Capacitator to connect JavaScript and native abilities like accessing the user location, Bluetooth, camera, etc.

Ionic and React Native also have a different technology stack. With Ionic, developers are building one application on top of the browser, and have the ability to use all the npm packages available to React.js.

React Native has a more restricted stack since the code is translated to native code. Despite this, the React Native community is very large, with lots of ready to use libraries that help the mobile application development.

When to use Ionic or React Native?

Since Ionic works with web technologies (HTML, CSS, and JavaScript) it fits well in a team that has no background in the native world.

With Ionic, you will have the capability to make great mobile applications, accessing native features like GPS, maps, or audio. These features are ready to be deployed into both Play Store and App Store, with the same effort and expertise that will require to build a web site.

React Native is easily addressed by developers with prior iOS or Android development knowledge. The learning curve for a React developer to understand and debug a React Native application is higher than with Ionic. However, React Native stands with the golden triumph of accessing the native functionalities of the mobile devices, allowing your mobile application to deliver a more native look and feel.

Found this article useful? You might like these ones too!

Demystifying React Hooks vs Redux

Ronaiza Cardoso — Tue, 09 Jun 2020 11:37:16 +0000

What is the difference between Redux and React Hooks? In this article, you'll find a walkthrough into these features and how they fit in each use-case.

5 Common Errors Found In A React Native App (Using Expo)

Ronaiza Cardoso — Thu, 07 May 2020 16:59:22 +0000

When creating a mobile app with React Native, you can use Expo to streamline some complexities. In this article, I talk about the most common errors and how to solve them.