Migre para o Ionic Framework 4 usando o TSLint Fixers

Migre para o Ionic Framework 4 usando o TSLint Fixers

30 de janeiro de 2019 1 Por Ramos de Souza Janones
Powered by Rock Convert

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.

Curso completo de Games, inclusive Realidade Aumentada.Powered by Rock Convert

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.

Leia também: Release do livro: Desenvolvedor Kotlin Android – Bibliotecas para o dia a dia

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.

Frontend Do Zero Ao Profissional

LEIA TAMBÉM:  Novidade no formatador de código Prettier

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. 

Artigos relacionado a Javascript

Artigos e dicas sobre Javascript e toda sua familia: Node.js, Angular, Ionic, React e muito mais.

– GitHub lança repositórios privados gratuitos para até três colaboradores

– Como fazer testes unitários no Node.js com NodeUnit

– Epoc.js: Projeto open source em JavaScript para Sensores de Controle Cerebral

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

– Apollo lança a Plataforma GraphQL e extensão para VS Code

– As novidades do Angular 7

– Tecnologias que andam bombando no GitHub ultimamente

– Node.JS: Envie o gemidão do Whastzap para seus amigos via chamada telefônica

– Southbank Software apresenta dbKoda: uma ferramenta de desenvolvimento Open Source para MongoDB

– Começando com React Native

– React Native Do Zero Ao Profissional, Curso Sobre Criação De Apps React Native Para Android e IOS

– React: Tutoriais Fantásticos e Onde Habitam

– React – O que é Shadow DOM

– O que são middlewares em NodeJS?

– Conhecendo os super poderes dos comandos Git e GitHub

Web

Artigos e dicas sobre desenvolvimento web que você vai gostar:

– 6 TENDÊNCIAS DE UX DESIGN PARA OS PRÓXIMOS ANOS

– UX – User Experience ou Experiência do Usuário – Princípios

– Usabilidade: Tela com muitas informações ou distribuídas em várias telas?

– Entenda as diferenças entre Wireframe, Protótipo e Mockup?

Estatísticas de SEO, novas regras do Google para 2019 e Automação de Marketing Digital

– Bootstrap – O que são grids CSS

– Quando usar ANSI e quando usar UTF-8

– W3C anuncia o DRM como uma recomendação

– Crie um loading animado divertido usando CSS3

– Como descobrir se uma cor hexadecimal é escura ou clara

– Como usar tags semânticas

– O que é o GZIP e como melhora a velocidade de um site

– Como adicionar notificações (Push notification) em seu site

 

LEIA TAMBÉM:  Entenda as diferenças entre Wireframe, Protótipo e Mockup?

Banco de dados

Artigos e dicas sobre banco de dados que você vai gostar:

MongoDB

– Principais diferenças entre MongoDB e MySQL ou outro RDBMS

– Southbank Software apresenta dbKoda: uma ferramenta de desenvolvimento Open Source para MongoDB

MySQL e Instruções SQL em geral

– SQL e Regex – Entenda quando e como usar em instruções SQL

– MySQL – Manter o formato Date e DateTime em formato dd/mm/Year e dd/mm/Year:HH:mm:ss

– SQL – O que são VIEWS SQL, vantagens e desvantagens

– Instrução Insert MySQL e JSON com todos os bancos brasileiros

– PHP e MySQL – Entendendo as codificações iso-8859-1 e UTF-8 e outras

– Como redefinir a senha de root do MySQL ou do MariaDB

– Para que serve uma MySQL Transaction?

– Banco de Dados – Índices desnecessários no banco são um problema?

– Entenda a diferença entre LIKE, IN e BETWEEN no MySQL

– LinkedIn desenvolve a ferramenta MySQL Query Analyzer

– Como otimizar consultas MySQL

– Quando é interessante desnormalizar o banco de dados?

– Entenda Views em SQL, vantagens e desvantagens

– O que é normalização de banco de dados

– Por que não devemos usar funções do tipo mysql_*

SQL – Entenda as diferenças entre aspas simples e duplas

– SQL – Not IN ou Not EXISTS quando usar?

– SQL – Entendendo JOINS

– PHP Do Zero Ao Profissional – Análise do Curso

 

Série Sucesso com App:

Série Startup, Vida e Sucesso:

– Dicas para pagar menos Impostos e economizar dinheiro com fintechs

– Livros sobre independência financeira, finanças pessoas e finanças empresariais que vão mudar sua vida

– Estatísticas de SEO, novas regras do Google para 2019 e Automação de Marketing Digital

– 5 livros Indispensáveis para Startups em fase de Captação de Recursos

– App de Sucesso – Parte 7 – Formas de monetização de Aplicativos e plano de negócios

– 22 Livros de Marketing Digital para ler em 2019

– 15 livros de empreendedores excepcionais para ler em 2019

– 5 passos para criar um canal no YouTube para sua empresa

– App marketing: virando o jogo com ajuda de machine learning

– 5 lições que o Vale do Silício ensina para startups brasileiras

Promova seu APP em seu site e parceiros com o Smart App Banners

– 7 E-Books Indispensáveis sobre Marketing Digital

– 110 ferramentas gratuitas para empreendedores e startups

Melhorando o desempenho cognitivo em empresas de TI

– Os sete passos para construir uma empresa de desenvolvimento de software de sucesso

– Apps Mobile: estratégias para ter sucesso e sobreviver no mercado

– SLACK: CONHEÇA A FERRAMENTA QUE REVOLUCIONOU A INTEGRAÇÃO E A PRODUTIVIDADE DE EQUIPES

– Criação de Startups – Parte 1: O comportamento do empreendedor

– Os Segredos de uma Startup de Sucesso

– O segredo do Google (e de outras empresas) para manter um time mais focado e produtivo

Google ensina como criar aplicativos de sucesso.

– A história, esquecida, da Netflix e suas lições

12 sites para criar Infográficos incríveis!

– 12 dicas para melhorar sua produtividade (seus objetivos chegarão mais rápido)

– Qualidade de Software: Uma questão de eficiência.

React Native Do Zero Ao Profissional: crie apps para Android e IOSPowered by Rock Convert
Siga os bons!

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.

Últimos posts por Ramos de Souza Janones (exibir todos)

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



Frontend Do Zero Ao Profissional