Com ele, sempre teremos a quantidade correta de dados armazenado. Neste artigo, vamos fazer juntos um projeto para entender melhor.

[adrotate banner=”4″]

Formik na prática

Os requisitos para a criação do Formik Field Array são:

• Ter o node instalado;

• Possuir um editor de código.

O primeiro passo para iniciar é criar o projeto React Js. Para isso, iremos utilizar o seguinte comando:

npx create-react-app my-app

Se estiver com dificuldades para executar o comando de criação, recomendo que acesse a documentação usando o link a seguir: https://github.com/facebook/create-react-app

Preparando o projeto

Depois do projeto criado, você deve abrir no editor de código de sua preferência. Depois de aberto, o seu projeto deve parecer com a imagem abaixo (lembrando que pode mudar de acordo com a versão do React Js).

Logo após isso, vamos instalar o Formik, para utilizar o Field Array. Então, vamos abrir o terminal (linux e mac) ou cmd (windows), navegar até a pasta do projeto e utilizar o seguinte comando:

npm install formik

Abrindo o package.json, podemos ver que o Formik foi instalado.

Por último, vamos usar o comando npm start para rodar o projeto. Neste momento, o programa deve abrir uma nova aba no seu navegador mostrando o projeto inicial React. Caso não abra, você deve abrir seu navegar e digitar: localhost:3000

Usando Formik Fiel Array

Para o projeto ficar mais organizado, iremos criar uma pasta dentro de src com o nome “components” e dentro dela um componente chamado “Form.js”.

No arquivo Form.js, vamos importar os arquivos necessários e criar um componente funcional com um formulário e uma instância do Formik. Assim, o resultado podemos ver na imagem abaixo.

Dessa forma, podemos ver na imagem acima que foram importados:

• FieldArray: possibilita o uso de vários formulários dinamicamente;

• useFormik: hook que permite o uso de várias ferramentas do Formik;

• FormikProvider: engloba o FieldArray para passar tudo o que é necessário para seu funcionamento;

• Field: componente que o Formik utiliza para usar inputs.

Dentro do componente, instanciamos o Formik e passamos os valores iniciais (initialValues), a função que vai ser executada quando o formulário for enviado(onSubmit), e no retorno da função um formulário com o submit apontando para o formik handleSubmit.

Para poder ver o formulário na tela do navegador, temos que chamar esse componente no App.js. Então, vamos aproveitar e tirar as linhas de código desnecessárias.

Se você fez tudo certo até aqui, o resultado deve ser similar à imagem abaixo:

Inserindo no formulário

Voltando ao arquivo Form.js, vamos inserir dentro do formulário o FormikProvider, em que ele recebe uma propriedade chamada value. Recebendo a instancia do Formik, dentro do FormikProvider, iremos colocar o FieldArray, que recebe duas propriedades.

A primeira é o name, que recebe o nome da propriedade em que os valores ficaram armazenados. Já a segunda propriedade é o render, que recebe uma função em que passamos um parâmetro que iremos utilizar no decorrer do projeto e retornará um componente que será renderizado na tela. Veja na imagem abaixo:

Assim, podemos ver na imagem acima que no render foram criadas algumas validações para poder renderizar os componentes. Isso porque, como salva em um array, se ele for menor que zero ou não existir, não deve ser exibido nada.

Na imagem também podemos ver o uso do Field recebendo o atributo name. Esse atributo diz onde o valor deve ser armazenado. Neste caso, ficará salvo dessa forma:

family:[{name:”fulano”,kinship:”pai”}].

Component

Além disso, outro atributo muito legal do Field é o component, em que podemos passar o tipo de input html que queremos renderizar. Quando isso não for passado, ele irá retornar com um input do tipo texto.

O resultado até agora é esse:

Agora, vamos adicionar três botões: um para adicionar um novo campo; outro para remover um input; e o terceiro para submeter o formulário.

Dessa forma, podemos ver que o tipo dos botões de remover e adicionar é button. Isso serve para evitar o envio do formulário. No onClick, utilizamos “param”, que veio da propriedade da função. Assim, utilizamos dois métodos: push (adiciona no final do Array) e remove (remove de acordo com o index passado).

Se você fez tudo certo até aqui, o resultado deve ser similar à imagem abaixo:

Finalização do projeto

Neste momento, vamos adicionar quatro campos e preencher. Dessa forma, o resultado será:

Agora, clicando em enviar o resultado e abrindo o console, podemos ver o seguinte resultado:

Com isso, finalizamos esse tutorial. Se você tiver dúvidas, deixe nos comentários!

Autor: Hagleyson Fernandes Leite

[adrotate banner=”5″]

O post Construção de Formik Field Array com React Js apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Por que utilizar animações Lottie com React?

Existem muitas vantagens em utilizar animações Lottie com React. Com a Lottie, podemos adicionar animações em nossos projetos que são facilmente manipuláveis através de propriedades.

Assim, essa biblioteca possui ótima qualidade, desempenho e fluidez, tendo um tamanho bem inferior quando comparada com a utilização de PNG e GIF. Além disso, a Lottie aumenta a velocidade de download e economiza memória.

Como utilizá-la?

Criamos um passo a passo para utilização de animações Lottie com React. Então vamos conferir?

1. Escolher a Animação

Primeiramente, precisamos criar uma conta no site da Lottie para ter acesso às animações. Fazendo isso, já teremos acesso a diversas animações gratuitas. Assim, escolha a animação que preferir e faça o download do arquivo JSON.

2. Adicionar a Lottie ao projeto React

Com a nossa aplicação React já criada, devemos instalar a biblioteca react-lottie com o seguinte comando:

• Se estiver utilizando npm:

npm install react-lottie

• Se estiver utilizando yarn:

yarn add react-lottie

Depois disso, se estiver utilizando Typescript, instale a tipagem do react-lottie com o seguinte comando:

• Se estiver utilizando npm:

npm install –save-dev @types/react-lottie

• Se estiver utilizando yarn:

yarn add @types/react-lottie -D

3. Utilizar a Biblioteca

Adicionar animações

Devemos adicionar as animações baixadas em JSON ao nosso projeto. Para isso, podemos criar um diretório chamado animations e adicioná-las dentro dele, como o exemplo a seguir:

Importação do arquivo

Precisamos realizar a importação do nosso arquivo JSON e da Lottie no componente em que utilizaremos a animação. Dessa forma, no exemplo abaixo, estamos importando uma animação de carregamento que chamamos de “loadingAnimation”.

Adicionar componente

Agora, devemos adicionar o nosso componente Lottie que deverá obrigatoriamente ter uma propriedade chamada “options”. Assim, ele irá conter um objeto com a chave animationData, que deverá receber o arquivo JSON da nossa animação que foi importado. Dessa forma:

Com isso, já teremos este resultado:

Adicionar propriedades

Perceba que a animação está em loop (é um comportamento default que pode ser alterado adicionando a chave “loop” que recebe um booleano ao objeto de “options”), sendo pausada ao ser clicada. Porém, esse não é o comportamento que desejamos, já que estamos utilizando uma animação de carregamento.

Então, vamos resolver esse problema e adicionar mais propriedades à animação.

Mudar o comportamento de pause

Para mudar o comportamento de pause, adicionamos a propriedade “isClickToPauseDisabled” recebendo true. Dessa forma, também adicionamos as principais propriedades que a nossa animação pode receber, que são:

• isPaused: define se está pausada ou não (ao pausar, a animação fica no frame em que foi pausada);
• isStopped: define se está parada ou não (ao parar, a animação fica no frame inicial);
• direction: define se a animação vai seguir o fluxo normal ou se irá ser reproduzida de trás para frente (1 ou -1);
• speed: define a velocidade da animação;
• height: define a altura da imagem;
• width: define a largura da imagem;
• options: recebe um objeto que pode possuir a chave loop e autoplay, que definem, respectivamente, se queremos que a animação nunca pare e se ela começará instantaneamente.

Criar animações avançadas

Com isso, temos a nossa animação de carregamento funcionando perfeitamente! Agora, com esse conhecimento, podemos criar animações mais avançadas, utilizando estados para controlar as propriedades da nossa animação. Por exemplo:

Conclusão

Utilizar animações Lottie com React pode melhorar muito o seu site ou aplicativo. Pensando nisso, confira o repositório contendo todas as animações clicando aqui.

[adrotate banner=”5″][/vc_column_text][/vc_column][/vc_row]

Leia também:

Como automatizar a criação de componentes funcionais em ReactJs

O post Como utilizar animações Lottie com React apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Com o crescimento do número de aplicações desenvolvidas, alguns desafios foram detectados de forma recorrente e as suas soluções eram semelhantes. Dessa forma, foram criados os Design Patterns, padrões e modelos de código que são capazes de resolver os problemas que aparecem de forma rotineira no desenvolvimento de sistemas. Um desses modelos de projeto é o Strategy.

O que é o Strategy e para que serve?

O Strategy é um Design Pattern listado pela GoF (Gang of Four) do tipo comportamental. Ou seja, ele descreve como classes e objetos dividem as responsabilidades entre si. Além disso, ele consegue mudar o comportamento de um objeto de forma indireta através de outros objetos.

Com essas responsabilidades separadas, o Strategy consegue lidar de formas diferentes os dados que são recebidos por ele. Portanto, nesse padrão de projeto, é possível solucionar casos que é necessário a criação de uma família de algoritmos, dividir esses algoritmos em classes separadas e trocar os objetos dessas classes em tempo de execução, quando for necessário.

Exemplos de situações que uma empresa pode usar o Strategy para facilitar a implementação de uma tarefa:

• Calcular o custo do frete de diferentes serviços de empresas;
• Uso de diferentes serviços, como provedor de e-mails, serviços de nuvem e armazenamentos de dados;
• Cálculo do tempo de um trajeto com diferentes meios de locomoção.

Componentes do Strategy

O padrão do Strategy é ter 3 componentes principais:

1. A interface Strategy é responsável por estabelecer um tipo de contrato que contém a funcionalidade que o desenvolvedor quer abstrair do seu código. Logo, todas as classes que derivam dela devem implementar essa funcionalidade.
2. O ConcretStrategy é a classe concreta que irá implementar a interface Strategy. Nesta classe, o desenvolvedor irá construir a regra de negócio que precisa para lidar com os dados que foram recebidos.
3. A classe Context tem como responsabilidade armazenar uma instância do tipo Strategy, chamar a função abstrata da interface e conseguir trocar objetos do tipo Strategy, se requisitado. Dessa forma, o Context não fica limitado apenas a um tipo de implementação.

Exemplo de um diagrama implementado o Strategy:

A interface Strategy define o que as classes que a implementarem devem possuir um método chamado algorithm. As classes do ConcretStrategy implementam a interface e possuem suas próprias regras de negócio para o método algorithm.

Por fim, na classe de Context, existe o método operation, que é responsável por chamar o método algorithm do objeto Strategy.

Utilizando o Typescript

O Typescript é uma linguagem baseada no Javascript que possui um superconjunto de funcionalidades adicionais. Com esses novos recursos, é possível utilizar variáveis com uma tipagem estática opcional, os conceitos da orientação a objetos e outras coisas.

Implementação Abstrata do Design Pattern Strategy com Typescript

Abaixo temos um exemplo genérico aplicando os conceitos do strategy.

Interface Strategy

Classes concretas que implementam a interface

Definindo o Context

Utilizando o contexto para poder usar os diferentes casos de usos

Implementação Real do Design Pattern Strategy Com Typescript

Criamos um exemplo mais concreto que pode ser utilizado no mundo real. Utilizando os conceitos vistos anteriormente, fizemos um projeto simples para enviar e-mails que é capaz de usar diferentes implementações.

Para a interface Strategy, temos a interface IMailSender, responsável por definir o método que as classes concretas devem implementar e o IMessageProps para definir o que a mensagem deve possuir:

Classes concretas que implementam o IMailSender, neste exemplo, temos o MailTrapMailSenderImplementaion, que é responsável por criar a regra de negócio necessária para ser capaz de enviar e-mails para mailtrap. Ademais, para termos outra implementação, criamos a classe FakeMailSenderImplementaion, que também implementa o IMailSender, mas apenas mostra a mensagem no console:

Por último, temos a classe de contexto chamada MailSender. Nela temos uma referência do tipo IMailSender mailProvider, um método que chama a função sendEmail do mailProvider e outro método que é capaz de trocar a referência do mailProvider, se necessário.

Para executar esse exemplo, temos também um index.ts.

Dessa forma, conseguimos fazer um sistema, utilizando o Typescript, que não dependa exclusivamente de uma implementação para o envio de e-mails. Se quisermos adicionar um outro serviço de e-mails, apenas seria necessário criar uma nova classe, criar a implementação com o IMailSender e construir a regra de negócio no método sendEmail.

Relação do SOLID com o Strategy

Seguindo os conceitos utilizado no Strategy, é possível notar que os princípios do SOLID são respeitados:

• Single Responsibility Principle – princípio da responsabilidade única: cada classe possui uma única função clara e objetiva;
• Open Closed Principle – princípio do aberto-fechado: a classe de contexto não é alterada caso uma nova funcionalidade seja necessária, mas uma nova implementação pode ser feita seguindo os padrões da interface Strategy;
• Liskov Substitution Principle – princípio da substituição de Liskov: o objeto Strategy da classe de contexto é capaz de trocar entre diferentes implementações da interface Strategy;
• Interface Segregation Principle – princípio da segregação de interface: a interface Strategy tem uma responsabilidade bem definida e não implementa métodos desnecessários;
• Dependency Inversion Principle – princípio da inversão de dependência: a classe de contexto recebe uma propriedade abstrata pelo seu construtor e não uma implementação concreta da interface Strategy.

Design Pattern Strategy com Typescript vai facilitar suas aplicações!

Com isso, vimos o que é o Design Pattern Strategy, como ele pode ajudar a resolver alguns desafios na construção de um sistema, em que casos ele pode ser útil, seus principais componentes e como aplicar o Design Pattern Strategy com Typescript. Além disso, vimos uma implementação usando o Typescript para o caso de envio de e-mails e como o Strategy consegue seguir todos os princípios do SOLID.

Link do repositório com os exemplos: https://github.com/albertojcvs/Strategy-Example[/vc_column_text][/vc_column][/vc_row]

Veja também:

Construção de Formik Field Array com React js

[adrotate banner=”5″]

O post Como Aplicar o Design Pattern Strategy Com Typescript apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Com o crescimento exponencial dessa tecnologia, acabaram surgindo alguns frameworks baseados no próprio React para melhorar ainda mais a produtividade de um programador e também aumentar a quantidade de possibilidades nas aplicações sem que haja necessidade de adicionar outras bibliotecas ao projeto. Um dos mais poderosos e populares desses frameworks é o NextJS.

Antes de entrar no principal tema do artigo (React vs NextJS), vale ressaltar alguns pontos antes de irmos a fundo no assunto. Primeiramente, vamos entender os princípios básicos para a aplicação do sistema!

O que é uma biblioteca?

Biblioteca é uma coleção de recursos organizados para ser utilizada na criação de aplicações.

O que é um framework?

Assim como uma biblioteca, o framework também possui uma coleção de recursos para serem utilizados, mas que já possuem um fluxo de trabalho ou uma estrutura pré-criados para serem seguidos. Sendo assim, o framework é mais potente que apenas uma biblioteca.

O que é React?

O React é uma biblioteca Front-end para aplicações web criada em 2011 pelo Facebook. Em 2013, ele se tornou open source para que qualquer um pudesse utilizar e modificar, tornando-a assim mais popular.

React é uma biblioteca baseada no Javascript, que é uma linguagem que há algum tempo vem tomando bastante espaço entre os desenvolvedores tanto Front-end quanto Back-end.

Um de seus principais objetivos é fazer com que elementos das páginas conversem entre si de forma simples, direta e com boa performance. Tudo isso acontece através da comunicação entre componentes.

Os componentes são subdivisões no código, que fazem com que o desenvolvedor não precise repetir os mesmos comando. Ao invés disso, ele repete apenas o mesmo componente, tornando a aplicação mais dinâmica e menos verbosa.

Atualmente, essa biblioteca tão prestigiada é a mais presente e mais requisitada no mercado e está presente em mais de 3,4 milhões de projetos pelo mundo.

O que é NextJS?

O NextJS é um framework open-source que foi criado usando como base o próprio React. Ele tem como premissa ser uma tecnologia para desenvolvimento full-stack, pois consegue integrar tanto o front-end quanto o back-end na própria aplicação.

Por ser baseado no React, essa ferramenta herdou suas principais funcionalidades, mas também adiciona diversas funcionalidades próprias. Por exemplo, o roteamento de páginas, que é feito simplesmente através de arquivos dentro de uma pasta chamada Pages.

Vantagens do React

Fácil de utilizar

Com a chegada do React, muitas das funcionalidades que antigamente levariam muito tempo para fazer e possivelmente gerariam vários bugs, código verboso e frustrações, acabaram se tornando simples. Isso por conta dos seus métodos nativos (hooks) e por ser fortemente baseado na linguagem Javascript, que é bastante familiar para a grande maioria dos desenvolvedores web.

Componentização

Essa funcionalidade torna o React uma ferramenta extremamente potente. Isso porque faz com que seu código se torne reutilizável em diferentes partes do seu projeto e possa passar parâmetros, tornando-o dinâmico.

Comunidade

Possui uma comunidade gigante de pessoas aprendendo a usar a ferramenta, pessoas ensinando a usar e pessoas adicionando novas funcionalidades.

Customização

É possível adicionar diversas outras funcionalidades, por meio de bibliotecas de terceiros, tornando a ferramenta ainda mais potente. Por exemplo, o Redux, que é uma biblioteca utilizada para gerenciamento de dados.

Desvantagens do React

É apenas o ponto de partida

Por ser uma biblioteca focada em desenvolvimento de interfaces, ela precisa de ferramentas de terceiros para conseguir usar o máximo de seu potencial.

Documentação datada

Como o React é uma ferramenta extremamente em alta, ela acaba tendo um ciclo de atualizações muito constante. Gerando, assim, uma frequente curva de reaprendizado.

Principais recursos do NextJS

1. Requisição de dados

O NextJS tem um uma ótima performance para fazer requisições. Isso porque existem duas formas de fazer a pré-renderização. O Server-side Rendering (SSR), que é a renderização do lado do servidor e Static Generation, que é a geração estática de dados já requisitados durante seu processo de build.

2. Configure à sua preferência

O NextJS é completamente configurável e isso torna a aplicação muito mais simples em diversos aspectos.

3. Typescript

O NextJS tem compatibilidade com Typescript, e esse é um dos motivos que o ajudou a se tornar tão popular.

4. Redux

O NextJS tem compatibilidade com Redux, que é uma das bibliotecas mais potentes para gerenciamento de dados atualmente.

Vantagens do NextJS

Fácil de usar

Comparado ao React e a outros frameworks que usam React como base, o NextJS exige menos código e isso torna todo o código do projeto mais
legível e fácil de corrigir, caso existam bugs.

Velocidade

As aplicações criadas com NextJS são mais rápidas por conta do Server-side Rendering e Static Generation, que fornecem uma forma mais eficaz para a manipulação de dados.

SEO

É possível manipular o Head da aplicação e assim, por exemplo, tornar os títulos até mesmo dinâmicos em todas as páginas. Para, assim, ter um melhor resultado de SEO.

Suporte a API

O NextJS possui uma funcionalidade chamada API Routes, que torna possível criar tanto o front-end quanto back-end direto na própria aplicação. Isso faz com que fique mais fácil a conexão entre ambos.

Otimização na renderização de imagens

As imagens são melhores gerenciadas, pois utilizam formatos como o WebP, que as tornam adaptáveis ao tamanho de visualização do dispositivo.

Desvantagens do NextJS

Vale ressaltar que o NextJS não possui exatamente desvantagens, mas sim a falta de alguns recursos. Vai de cada desenvolvedor saber e/ou descobrir qual ferramenta é a melhor para seu projeto.

Todas as ferramentas tem como objetivo algum recurso em específico, enquanto outros recursos acabam ficando um pouco para trás. Dois desses recursos que merecem ser citados são:

Roteamento

O NextJS faz o roteamento de páginas basicamente com um diretório de arquivos. E, para alguns projetos, isso não é suficiente.

Comunidade

A comunidade do NextJS ainda é pequena, mas está em crescimento constante. Comparado ao React, há poucos especialistas.

Afinal, qual é melhor: React vs NextJS?

Como o NextJS é um framework de produção criado em cima do React, acaba se tornando óbvio de que ele tem mais funcionalidades do que o React em si.

O NextJS basicamente é uma ferramenta que aumenta o potencial do próprio React. Então, isso quer dizer que, na batalha do React vs NextJS, NextJS é melhor do que o React?!

Não! Essa não deveria ser a questão. O NextJS aprimora e adiciona muitas funcionalidades ao React, mas isso só se torna útil em projetos no qual você teria que de fato utilizá-las.

Para decidir qual é o melhor entre eles, você deve se questionar qual é o melhor para um projeto em específico. Isso porque, apesar de o NextJS ter mais funcionalidades, ele pode se tornar “grande demais para um projeto pequeno demais”.

Ambos são ferramentas muito boas que tornam o desenvolvimento web mais fácil, interativo, dinâmico e mais rápido. Analise o escopo de seu projeto e decida qual delas seria melhor para você aplicar.[/vc_column_text][/vc_column][/vc_row]

Veja também:

[adrotate banner=”5″]

O post React vs NextJS: qual é o melhor framework de Front-end? apareceu primeiro em Luby Software.

[adrotate banner=”4″]

Isso porque, quando tratamos de ReactJs, vemos essa repetição constantemente na criação componentes, sendo eles funcionais ou de classes. Então, que tal se pudéssemos automatizar este processo, criando estes elementos que em sua estrutura inicial são tão semelhantes?

Agora, a boa notícia! Podemos! E utilizando uma biblioteca livre chamada Plop, disponibilizada neste link: https://plopjs.com/.

Configurando o Plop para automatizar componentes funcionais em ReactJs

Antes de tudo, para iniciar este breve tutorial de como utilizar esta biblioteca em projetos utilizando ReactJs, criei um projeto básico com create-react-app. Partiremos daí.

Por isso, começaremos com a instalação local no projeto utilizando o yarn (caso queira, pode utilizar o npm, fazendo as devidas conversões na hora de digitar seus comandos).

Agora, na raiz do projeto, criaremos uma pasta de nome “generators” e esta deve conter uma pasta chamada “templates” e um arquivo javascript de nome “plopfile.js”.

Portanto, a estrutura deve ficar assim:

Agora, configuraremos o nosso script no arquivo “package.json”. Em scripts, colocaremos o seguinte comando:

“generate”: “yarn plop –plopfile ./generators/plopfile.js”

Já em nosso arquivo plopfile.js, faremos a seguinte configuração:

No prompt, temos um array contendo um objeto, com algumas propriedades: “type” será o tipo de comando que será entrado, “name” será o nome do componente e “message” é a mensagem que será exibida ao usuário.

Abaixo, temos as actions que tem um array contendo alguns objetos, os quais contêm algumas propriedades:

• “type” é o tipo de ação que será executada ao gerar;
• “path” será o caminho do objeto gerado;
• “templateFile” será nosso arquivo de modelo.

Em nosso exemplo, vamos utilizar a geração de um arquivo jsx (nosso componente funcional) e um arquivo js (nosso componente de estilização).

Criando templates personalizados em componentes funcionais em ReactJs

Dentro da pasta “templates”, crie dois arquivos: um sendo “Component.jsx.hbs” e um “styles.js.hbs”

No template de component teremos o seguinte conteúdo:

E nome template de estilo temos:

Gerando os arquivos

Finalmente colocaremos a mão na massa!

Agora, é só ir no terminal e digitar o comando “yarn generate” e apertar “enter”. O prompt perguntará qual o nome do seu componente e pronto!

Foram gerados dois arquivos na pasta “components”, como definido no “path”.

O componente “button” com suas exportações:

Arquivo de estilização:

Viu só? Com alguns minutinhos de configuração podemos poupar tempo criando os mesmos arquivos toda vez! O melhor de tudo isso é que podemos criar arquivos completamente customizados. Então, em projetos mais complexos podemos ter muito mais que somente um componente e um arquivo de estilos. Assim, podemos criar estruturas de testes, arquivos de “storybook” e uma infinidade mais. 

Neste exemplo, utilizei a biblioteca de estilos “styled components”. Entretanto, é possível utilizar o css de forma pura, assim como sass. 

Por fim, leia também:

Biblioteca de artigos sobre Front End

Como Aplicar o Design Pattern Strategy

SEO – Search Engine Optimization[/vc_column_text][/vc_column][/vc_row]

[adrotate banner=”5″]

O post Como automatizar a criação de componentes funcionais em ReactJs apareceu primeiro em Luby Software.