Usando PulseJS para manusear estados globais em aplicações React

Gustavo da Silva — Thu, 23 Apr 2020 22:42:14 +0000

Primeiro de tudo, o que é o PulseJS e por que foi criado?

PulseJS é um framework criado por Jamie Pine para tratar de estados globais de uma aplicação, de forma bem semelhante (mas não igual) ao que o Redux faz.

O objetivo principal do PulseJS é tornar o manuseio dos estados de uma aplicação totalmente independente. Com isto, um único código, tratado no Pulse como o "cérebro", pode ser utilizado em múltiplos aplicativos (seja web com ReactJS ou mobile com React Native), fazendo do Pulse uma ferramenta poderosa.

Porém, assim como qualquer nova tecnologia, ele também possui suas desvantagens.

Por ser um framework novo e sem grande comunidade ainda, alguns bugs podem aparecer. Além disso, a versão 3.0 (que traz grandes mudanças) ainda está em desenvolvimento e, portanto, não possui uma documentação específica, sendo limitada aos exemplos de uso. Mas, apesar de tudo, é um projeto OpenSource que vem crescendo com muito potencial!

Quando devo utilizar o PulseJS?

Como visto, ele é uma excelente ferramenta para manipular estados globais em múltiplas plataformas. Além disso, o Pulse também oferece outras features integradas, como por exemplo:

requisições http com Pulse.API (removendo a necessidade do uso do fetch ou do axios);
armazenamento em cache com Computed states (diminuindo o processamento da aplicação, que só reexecuta o código computado em caso de alteração do estado original);
armazenamento de dados no estilo database/ORM com Collections;

Além de muitas outras mais.

Mas, sendo este um framework novo, a curva de aprendizado se torna ainda mais lenta por conta da documentação ainda não finalizada.
Portanto, se você já possui conhecimento de Redux, se sua aplicação não utiliza nenhuma das features citadas acima ou se você não pretende disponibilizá-la em diversas plataformas, ter que aprender um novo framework acaba não fazendo tanto sentido. Neste caso, recomendo que você siga seu caminho com Redux, que já existe há um bom tempo, tem uma comunidade muito bem estruturada e lida muito bem com manuseio de estados.

Se você está começando agora ou simplesmente deseja utilizar o Pulse, aqui vai um pequeno guia de como começar.

Instalando o PulseJS

Iremos utilizar a versão 3.0 como exemplo e, por ainda não ter sido publicada no npm/yarn, é necessário cloná-la do repositório GitHub para algum diretório. Em seguida, trocar para a branch 3.0, instalar as dependências e, finalmente, compilar para javascript. Para realizar estas estapas, você pode seguir o modelo abaixo (caso esteja usando npm, basta trocar o comando yarn por npm i):

$ git clone https://github.com/pulse-framework/pulse.git
$ cd pulse
$ git checkout 3.0
$ yarn
$ tsc

Obs: é necessário ter o TypeScript instalado em sua máquina para rodar o comando `tsc`.

Estes comandos irão gerar uma pasta de nome 'dist'. Para utilizar o Pulse, basta criar uma pasta de nome pulse dentro do diretório principal da sua aplicação e colar o conteúdo da pasta dist gerada. Em seguida, dentro do package.json do pulse, adicionar o seguinte:

{
  "name": "pulse-framework",
  "version": "3.0.0",
  "main": "index.js",
  "module": "index.js",
  "types": "index.d.ts",
  "author": "Jamie Pine",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/pulse-framework/pulse"
  }
}

Por fim, dentro do package.json da sua aplicação, adicionar pulse como uma dependência de projeto:

"pulse-framework": "file:./pulse",

Pronto. Agora sua aplicação já está conectada com o Pulse.

Iniciando com Pulse

Como o PulseJS é o cérebro da sua aplicação, iremos criar uma pasta nomeada core. Dentro dela, criaremos um arquivo pulse.ts (ou pulse.js se estiver usando JS). Neste arquivo, iremos instanciar o Pulse seguindo o exemplo:

// pulse.ts
import React from 'react';
import Pulse from 'pulse-framework';

export const App = new Pulse({
  framework: React
});

Agora, criaremos um arquivo index.ts, que ficará responsável por exportar o acesso de todas as funcionalidades do Pulse. Neste arquivo também iremos conectar com a nossa API.

// index.ts
import { App } from './pulse';

export const api = App.API({
  baseURL: 'https://minha-super-api.com',
  options: {
    headers: {
      // Headers para conectar com a API. Opcional
    },
    method: '<Método HTTP para conectar com a API>' // Opcional
    body: {
      // Corpo para conectar com a API. Opcional
    },
  },
});

export const core = {
  api,
}

Não é recomendado acessar a API do arquivo em que o core é exportado. Para isso, iremos criar um arquivo routes.ts, em que ficará armazenado todas as rotas de conexão com a API. No exemplo, iremos realizar o Login de um usuário. Se você usar TypeScript, pode utilizar interfaces para determinar o corpo da requisição.

// routes.ts
import { core } from '.';

interface LoginInterface {
  email: string;
  password: string;
}

export const login = async (user: LoginInterface) => {
  try {
    const response = await core.api.post('/login', {
      email: user.email,
      password: user.password,
    });
    return response;
  } catch (error) {
   // tratamento de erro
  }
}

Note que, como definimos a baseURL ao instanciar a API, não é necessário passar o valor da mesma para a chamada.

Agora, para utilizar os states, basta iniciá-lo com um valor default dentro do core. No exemplo, usaremos o State para armazenar a resposta do Login, com o idToken do usuário. Então, dentro do index.ts:

// index.ts

// código anterior

export const core = {
  api,
  routes: { ...routes },
  user: {
    credentials: App.State<{ idToken: string }>({ idToken: null }),
    // É possível definir o tipo do State, caso queira. Para isto, basta utilizar o .type(). P.E.: App.State('DefaultValue').type(String)
  },
}

Agora, para armazenar o idToken, podemos fazer isto em qualquer lugar que for realizar a chamada à função login. (No exemplo, a resposta da conexão à api retorna um campo token contendo o token do usuário)

// Login.tsx
import React from 'react';
import { core } from '@core'; // diretório da sua pasta core

const Login: React.FC = () => {
  async function handleLogin(email, password) {
    const response = await core.routes.login({ email, password });
    core.user.credentials.set({ idToken: response.token });
    console.log(core.user.credentials.value) // { idToken: 'DAsjau0913123' }
  }

  return (
    // JSX do componente
  );
}

export default Login;

Pronto! Agora você sabe o básico para começar a utilizar o PulseJS em sua aplicação.

Claro que ainda falta muita coisa para tirar todo o proveito do que o Pulse tem a oferecer, mas falar sobre tudo tornaria o artigo muito extenso. Espero que a documentação fique pronta em breve, para que possamos desfrutar do melhor que o Pulse tem a oferecer!

Agora na próxima vez que for iniciar um projeto React, que tal dar uma chance ao PulseJS? ;)

Abraços e até a próxima!