In this article, I will explain how I migrate to typescript a Create React App project written in javascript. You can follow instructions on CRA's official documentation about adding typescript, but I promise my intention here is to go farther than this.

I will explain an excellent strategy to migrate your whole codebase to typescript. For this, I’ve separated this article in three steps

  1. How can you configure typescript by yourself, fixing linter/prettier and integrating with jest;
  2. A migration strategy to move your current codebase to typescript with simple refactoring and less headache as possible;
  3. What I’ve learned so far…


The usage of a generic loader is the worst feedback an application can provide to a user. It’s the laziest strategy that an engineering team can use to say that the application is loading something.

In this article, I intend to describe how to create prettier loading feedback using React Suspense, Skeletons, and SWR. I will not approach each tool in depth. I want to explain how they can work well together. So, before you read, it’s interesting to understand something about React Hooks and React Suspense. …


Na minha carreira eu consegui ajudar duas startups diferentes na implementação de feature toggle. Uma delas, a Arquivei, um SaaS B2B, usamos em diversas ocasiões, tanto no lançamento de features com rollouts quanto na migração da AWS para o GCP. Na outra, a Creditas, uma fintech, usamos no lançamento de alguns produtos internos. Em ambas as ocasiões usei o Split como ferramenta (falarei sobre essa escolha ao longo do artigo).

O meu objetivo nesse artigo não é o de explicar no detalhe como uma feature toggle funciona e nem divagar sobre os benefícios do uso de feature toggles. Eu espero…


Photo by Geral on Pixabay

O redux é um gerenciador de estados em javascript. Com ele é fácil testar, desenvolver e depurar aplicações, garantindo flexibilidade para trabalhar com qualquer ferramenta de UI.

Desenvolver aplicações redux pode exigir mais código do que o necessário, mas realmente garante uma aplicação robusta. Um exemplo claro é quando comparado com React hooks, para React, claro.

Uma pré-requisito para esse artigo é entender a arquitetura flux e o redux. Para o redux eu recomendo o curso do Dan Abramov no Egghead.

Você deve encarar uma aplicação redux como uma aplicação com o design orientado a eventos. …


Fazer código é muito simples. Abra o seu editor de texto, escreva umas linhas de código, talvez alguns testes unitários e pronto, você finalizou o seu trabalho, certo? O problema vem logo após isso, a maior barreira de todo programador, revisão de código e por fim os bugs.

Quem nunca começou o dia abrindo o email e lendo uma série de notificações de pull requests para revisar ou notificações de novos eventos de erro que apareceram no Sentry (ou outra ferramenta para tracking de erro). …


Photo by Isromar on Pixabay

Este artigo não é muito técnico e tem como propósito guiar as empresas e os programadores na criação rápida de novos produtos através de uma boa definição de compatibilidade com os navegadores.

Definir a compatibilidade dos browsers é uma dificuldade para a maioria das empresas. As empresas mais novas dificilmente se preocupam com isso enquanto as mais maduras sofrem para garantir uma compatibilidade decente com os navegadores. Deixarei aqui o meu resumo sobre algumas das muitas conversas que tive com os meus amigos, com a comunidade (Opensanca e ReactBrasil) e com algumas empresas do grupo Monashees.

Antes de prosseguir na…


Há dois anos me surgiu a oportunidade de trabalhar em uma Startup em São Carlos e todo o meu portfólio até o momento era relacionado à construção de APIs com Ruby on Rails e frontend em AngularJS. Naquela época eu realmente acreditava que tinha domínio em Javascript e achava AngularJS confuso, sobretudo pelo fato dele estar amarrado ao padrão MVC. Também já tive problema com o data-binding do framework quando tive que consumir uma API muito complexa (praticamente um ERP). Eu já tinha trabalhado com AngularJS por mais de dois anos, sendo um deles durante a minha iniciação científica.

Como…


Este é um artigo explicando a minha jornada quando implementei o redux na aplicação da Arquivei. Primeiramente vou falar sobre redux e seus princípios fundamentais e depois explicar os erros que cometemos na Arquivei e como contornamos os nossos problemas.

Se você já possui um conhecimento bem sólido sobre Redux eu recomendo pular a parte "O que é Redux?" e ir direto para "Redux no mundo real". Mas não deixe de ler as inspirações que me levou a usar essa ferramenta.

Inspirações

Quando estávamos planejando a construção da aplicação de frontend da Arquivei diversos conceitos do React e o seu ecossistema…


A arquitetura flux foi um conceito apresentado pelo facebook e você pode ver tudo mais detalhado no site oficial https://facebook.github.io/flux/. A arquitetura flux é um modelo unidirecional de fluxo de dados e é mais um padrão do que um framework.

O que é flux?

Flux é uma arquitetura de fluxo de dados desenhado pelo Facebook em conjunto com o react que propõe deixar o os caminhos dos dados e as suas atualizações mais explícita e compreensível. Isso permite que as aplicações sejam mais simples de desenvolver, rastrear bugs e arrumá-los.

Contexto histórico

Acredito que o que promoveu a criação de um novo modelo de fluxo de…


Quando me refiro a Arquitetura Isomórfica esta faz referência aos conceitos de Javascript Isomórfico ou Javascript Universalpropostos pelo Airbnb em novembro de 2013. No universo da Arquivei quando dizemos Arquitetura Isomórfica isso traduz que o frontend é renderizado tanto no microserviço como no browser do cliente via javascript. Toda requisição que acontece no nosso frontend é renderizada duas vezes, no microserviço e no cliente.

Contexto

Há cerca de 1 ano atrás, em meados de 2016, me surgiu a proposta de arquitetar um projeto do desmembramento de um monolito em um arquitetura de frontend-backend. …

Rafael Mariano

Senior Software Engineer @ Creditas

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store