Migre para o Ionic Framework 4 mais fácil usando o TSLint Fixers

Migre para o Ionic Framework 4 mais fácil usando o TSLint Fixers

30 de janeiro de 2019 0 Por Ramos de Souza Janones

Há quase um ano atrás na Ng-Conf, quando eu sentei em uma sessão sobre TypeScript. Um dos palestrantes o qual me chamou a atenção foi Alex Eagle, um Engenheiro de Softwarea  no Google que faz parte do time do angular-core, que compartilhou um plano do Google de integrar uma nova versão do  TypeScript internamente, antes de divulgar ao público.

Isso foi de interesse particular para mim na época porque eu estava trabalhando com nossa equipe de arquitetura com o time da SpaceX e a adoção de novos componentes para nossa arquitetura sempre foi problemático para nós. Quando eu discuti isso com o Alex, ele explicou que sua equipe estava usando TSLint fixers (mais sobre isso daqui a pouco) para implementar mudanças nos códigos de seus projetos, o que fez com que eu me interessasse mais sobre a implantação de TSLint em meus próprios projetos.

Durante este tempo, o Ionic 4 Beta tinha acabado de ser anunciado e, embora a lista de alterações iniciais não tenha nada sido muito comparada às atualizações do Ionic 1 para o 2, ainda demorou algumas horas para que a migração fosse concluida entre estas duas versões, mesmo em projeto pequeno. Foi então neste período que decidi testar uma nova migração das testando com o uso do TSLint para executar esta migração para mim.

Usando o TSLint para migração

Fico feliz em dizer que o resultado deste esforço foi a criação da ferramenta Ionic 4 Migration, que você pode usar de maneira semelhante à forma como usarias às regras normais do TSLint. Aqui estão os passos:

  1. Atualizando seu projeto para usar a última versão do Ionic, que era o RC1 até o momento que este artigo era criado. Você provavelmente terá um monte de erros ao tentar compilar.
  2. Instale o rule-set usando npm i -D @ionic/v4-migration-tslint . Você também terá que adicionar um arquivo na raiz do seu projeto chamado ionic-migration.json e adicionar a configuração à baixo.
  3. Execute o analizador para identificar todas as mudançãs que você precisará fazer em seu código usando este comando:  tslint -c ionic-migration.json -p tsconfig.json. Bônus: Nós implementamos um monte de correções automaticamente, para isso você pode usar o mesmo comando adicionando o --fix flag no final do comando. (DICA: Tennha certeza de ter um backup de seu projeto antes de fazer este “Bônus” caso ocorra algum erro, você poder voltar e realizar este procedimento sem esta dica “Bônus).

Limitações da ferramenta

Ingelizmente, há algumas mudanças que não podem ser de forma automática — Um grande problema são com as mudanças de CSS. Isso porque os stylesheets são mais flexiveis, fazendo com que a identificação de mudanças sejam mais difíceis, e até mesmo alguns projetos existem CSS próprios e por serem mais flexiveis à personalizações. Nós também encontramos alguns casos tipo o Ion Menu Toggle onde as alterações do DOM eram eram incrivelmente complexas e tinham que ser tratados caso a caso.

Enfim, durante este processo, houve algumas mudanças recentes em que métodos que retormam promessas. Enquanto a documentação especifica o uso de async/await da forma correta como deve ser usada, nós encontramos pessoas que usavam .then() ou retornavam a promeesa diretamente do médodo ao invés de esperar e retornar o resultado. Como a sintaxe para lidar com promessas pode ser tão variada, decidimos não implementar o fixer para essas regras e, em vez disso, confiar nos avisos da compilação.

No geral, descobrimos que essas limitações são bem pequenas e que a maioria das mudanças tediosas deve ser coberta com esta ferramenta. Para ver/acompanhar as mudanças desta ferramenta você pode acompanhar a página de seu repositório onde há também toda uma documentação das regras da ferramenta.

Como funciona o TSLint para a migração para o Ionic 4?

Esta ferramenta é construida sobre o TSLint que é uma ferramenta de análise estática que aproveita o analisado do TypeScript AST(Abstract Syntax Tree). Nós também usamos o Codelyzer, que é uma implementação do Angular e inclui alguns utilitários muito úteis para analisar componentes específicos do Angular, se necessário.

Cada regra geralmente tem um único alvo. Por exemplo: no caso do botão íon, tivemos que encontrar lugares onde o botão de íon existiu como um atributo e, em seguida, substituir o elemento no qual ele foi anotado. Fizemos isso primeiro visitando todos os elementos na árvore DOM e procuramos por quaisquer atributos que correspondessem ao botão Ionic. Se encontrarmos uma correspondência, extraímos o conteúdo do elemento e substituímos o elemento por um novo botão de ionic, que tinha o conteúdo do elemento anterior.

Pronto, configure, vai (atualize seu app)!

Estou ansioso para ver como os outros usam essa ferramenta e espero que ela ajude você ou seu time de projetos a converter para o Ionic 4.0. E se você estiver interessado em participar na melhoria desta ferramenta, por favor, veja como ajudar neste repositório do Git e sinta-se à vontade para contribuir com o projeto.

Gostaria de agradecer a Dan Imhoff e Mike Hartington por sua ajuda neste projeto. Graças a eles, nossa equipe conseguiu levar esse projeto para a linha de chegada de maneira rápida e fácil. Uma excelente codificação!

Acompanhe a série: APPS de Sucesso.

E visite nossa seção MundoJS

Este artigo vai ter atualizações futuras. Nos acompanhe sempre. 

Série online, 100% gratuita.Powered by Rock Convert

Ramos de Souza Janones

Janones, é um empreendedor brasileiro apaixonado por empreendedorismo e tecnologia. Ao longo dos anos trabalhando com o desenvolvimento de softwares desktop desde a linguagem Clipper, passando pelo Delphi e atualmente com Java.

Optou pela formação de Publicidade e Marketing por sua segunda empresa de tecnologia ter participado do "boom" da internet nos anos 90 e na procura de melhorar seus conhecimentos em negócios.

Em razão da principal formação e profundos conhecimentos em programação e banco de dados, é capaz de realizar o desenvolvimento de aplicativos web, desktop e mobile com maior criatividade e inovação que profissionais de desenvolvimento com uma formação única e mais especifica, dedicada somente ao desenvolvimento de softwares.

Com toda sua experiência com empresas de software, sua formação e paixão por negócios escreveu o livro "Marketing para Empresas e Profissionais de Software", publicado pela editora carioca Ciência Moderna em 2012. Além de outros livros sobre programação.
Sumário
Migre para o Ionic Framework 4 mais fácil usando o TSLint Fixers
Nome do artigo
Migre para o Ionic Framework 4 mais fácil usando o TSLint Fixers
Descrição
Aprenda a migrar seus apps para o Ionic 4.0 com o TSLint Fixer de forma fácil e rápida.
Autor
Nome
Ramos da Informática
Logo
LEIA TAMBÉM:  Southbank Software apresenta dbKoda: uma ferramenta de desenvolvimento Open Source para MongoDB