portaldacalheta.pt
  • Principal
  • Receita E Crescimento
  • Aprendendo
  • Processo Interno
  • Processo De Design
Móvel

Ionic 2 vs. Ionic 1: ganhos de desempenho, novas ferramentas e um grande passo em frente



O projeto Ionic está ganhando popularidade rapidamente. Com mais de 27.000 estrelas no GitHub, ele se tornou um dos 50 projetos de código aberto mais populares do mundo.

E desde a versão estável do Ionic 2 foi recentemente anunciado , é o momento perfeito para os engenheiros analisarem e compreenderem as diferenças entre Ionic 2 e Ionic 1 .



problemas e soluções de segurança cibernética

Em um nível alto, Ionic 2 é uma reescrita completa do projeto Ionic 1 com Angular> = 2.x. Dos meus mais de 2 anos de experiência usando Ionic 1, aqui está o que isso significa em termos práticos.



Desempenho aprimorado de detecção de mudança

Ionic 1 é baseado em Angular 1.x, e Ionic 2 é baseado em Angular> = 2.x. O aumento de desempenho que você obtém apenas usando Angular> = 2.x sozinho é significativo.



Com o Angular 1.x, para obter aplicativos de alto desempenho exigia muito conhecimento profundo de estrutura (como $watch, vinculação única e assim por diante). Com Angular> = 2., os aplicativos x têm um desempenho praticamente pronto para uso.

A nova versão do Angular abandonou o famoso e condenado ciclo de resumo (rastreando e testando todas as variáveis ​​do aplicativo a cada mudança). Em vez disso, Angular> = 2.x depende de Zone.js para rastrear alterações de aplicativo (síncronas e assíncronas).



Detecção de alteração em angular> = 2.x vale a pena explorar para entender como as coisas funcionam nos bastidores. Em Angular> = 2.x, a detecção de alterações é sempre executada de cima para baixo. Usando a estratégia certa de detecção de mudança (OnPush ou Default) em seus próprios componentes é de suma importância se você deseja controlar o desempenho de seu aplicativo.

Todos os componentes do Ionic 2 usam o OnPush estratégia, significando que a detecção de mudança não é realizada o tempo todo, mas, em vez disso, apenas quando as entradas mudam. Essa estratégia também evita a renderização desnecessária das subárvores dos componentes. Basicamente, já está otimizado para você.



Se você quiser saber mais sobre como obter um aplicativo Ionic1 de alto desempenho, sugiro a leitura deste Ultimate AngularJS e folha de dicas de desempenho do Ionic .

Desempenho DOM mais rápido

A manipulação do Angular Document Object Model (DOM) evoluiu muito. Se você deseja uma interface de usuário (IU) reativa, manipulação de DOM e Desempenho de JavaScript é importante.



Angular v1.5.8 Angular v2.2.1 React v15.4.0 VanillaJS
Criação de 1k linhas 264,96 177,07 177,58 126,05
Atualizando 10 mil linhas 251,32 178,76 187,73 54,23
Removendo uma linha 54,13 50,59 50,57 36,93
Criação de 10 mil linhas 2247,40 1776,01 1839,46 1217,30
Adicionando 1k linhas a uma tabela de 10k linhas 388,07 278,94 311,43 233,57
Limpando uma tabela de 10 mil linhas 650,28 320,76 383,62 199,67

Por exemplo, a criação de 1.000 linhas em uma tabela leva 126 milissegundos com o vanilla JavaScript, 110% mais (264ms) com o Angular. 1.xe apenas 40% a mais (177ms) com Angular> = 2. Como você pode ver, o desempenho de Angular> = 2.x é melhor que Angular 1.x e é semelhante ao desempenho de React.

O Ionic 2, mais uma vez, se beneficia dessa atualização de desempenho e o faz “de graça”.



A nova API de animações da web

Ionic 1 e Ionic 2 ainda contam com animações CSS para transições e animações internas, mas como Ionic 2 é baseado em Angular> = 2.x, os desenvolvedores têm acesso ao novo API de animações da web (W3C) através do Sistema de animação angular .

A API Web Animations é uma API JavaScript que fornece aos desenvolvedores acesso ao mecanismo de animação do navegador. Isto é não suportado em todos os navegadores ainda, mas com um polyfill você pode usá-lo agora mesmo e desfrutar de uma das maneiras mais eficientes e promissoras de animar a web.



Com a API Web Animations (W3C), assuma o controle de suas animações

Fonte

diferença entre um s corp e c corp

A API de animação Angular> = 2.x permite descrever facilmente animações complexas (entrar e sair de diferentes estados ou animações de grupo) e oferece acesso ao ciclo de vida das animações por meio de callbacks.

@Component({ template: `
  • {{hero.name}}
`, animations: [ trigger('flyInOut', [ state('in', style({ opacity: 1, transform: 'translateX(0)' })), transition('void => *', [ style({ opacity: 0, transform: 'translateX(-100%)' }), animate('0.2s ease-in') ]), transition('* => void', [ animate('0.2s 10 ease-out', style({ opacity: 0, transform: 'translateX(100%)' })) ]) ]) ] })

Rolagem nativa integrada

A rolagem nativa permite que o Ionic 2 ouça eventos de rolagem em WebViews compatíveis. Faz
Pull to Refresh, List Reordering ou Infinite Scroll possível sem emular esses eventos (rolagem JavaScript).

Rolagem Nativa
Ionic 1 Ionic 2
️ Android ️ Android
ios ️ iOS
telefone do Windows ️ Windows Phone

Até agora, a rolagem de JavaScript era necessária, mas Chromium (Android) e WKWebView (iOS) WebViews evoluíram e agora oferecem suporte à rolagem nativa. Ele só está habilitado por padrão no Android com Ionic 1 (desde dezembro de 2015) e habilitado em todas as plataformas com Ionic 2.

O suporte à rolagem nativa oferece melhor desempenho e melhora a experiência do usuário, ajudando a garantir uma rolagem suave graças a eventos assíncronos.

API de componentes aprimorados

Ionic 2 dá acesso a todos os componentes que tornou o Ionic 1 famoso, mas agora foi melhorado e baseado em Angular> = 2.x. Aqui está a lista dos componentes mais comuns:

  • Botão
  • Cartão
  • Ícone
  • Lista
  • Cardápio
  • Capital
  • Barra de ferramentas

Os componentes API mudaram um pouco entre Ionic 1 e Ionic 2. Por exemplo, Ionic 1 ion-spinner componentes usam icon atributo para o tipo de spinner:

name

Enquanto o Ionic 2 usa o window atributo:

document

Como você pode ver, se estiver familiarizado com a API do componente Ionic 1, você se sentirá confortável usando os componentes Ionic 2 também. Você só precisa estar ciente dessas diferenças.

Com uma lista impressionante de componentes, tudo o que você pode fazer com o Ionic 1 é possível com o Ionic 2 e ainda mais.

Introdução de Web Workers

Trabalhadores da Web permitir que seu aplicativo execute scripts em threads de JavaScript em segundo plano. Os trabalhadores podem realizar tarefas tediosas e solicitações HTTP fora do contexto do seu aplicativo (ou seja, sem interferir na interface do usuário). Hoje, os Web Workers são suportado por todos os principais navegadores .

Tradicionalmente, todos os frameworks eram construídos sobre, e confiados, renderer e ion-img objetos. No entanto, em trabalhadores nenhum deles está disponível. Com a nova arquitetura Angular> = 2 que desacoplou o ion-img, a execução do aplicativo dentro do Web Workers (ou qualquer outra plataforma) ficou mais fácil.

descrever os princípios da Gestalt de proximidade, similaridade, continuidade e fechamento

Ionic 2 está começando a experimentar o uso de Web Workers com o novo import { Component } from '@angular/core'; export interface IPresident { id: number; name: string; } @Component({ selector: 'my-app', template: `

{{president.name}}

` }) export class AppComponent { title:string = 'President of the United States'; president: IPresident = { id: 44, name: 'Barack Obama' }; } componente. Por enquanto, IPresident só pode ser usado dentro de um VirtualScroll Lista. Ele delega a chamada HTTP da imagem aos Web Workers e também oferece suporte ao carregamento lento (ou seja, apenas recupera e renderiza imagens na janela de visualização). Seu aplicativo da web agora se concentra apenas na IU e permite que os trabalhadores façam o resto.

Aqui está um exemplo de como usá-lo:

boolean

Lembre-se de que este é apenas o começo e que esperamos ver mais uso ou Web Workers no futuro próximo.

Vantagens do TypeScript

Se você tem usado o Ionic 2, você já sabe que ele está usando TypeScript . TypeScript é um superconjunto do JavaScript ES2015 que compila para JavaScript simples. Com o TypeScript, você tem acesso a todos os seus recursos exclusivos (como interfaces, mixins e assim por diante) e recursos ES2015 (como funções de seta, gerador, strings multilinhas e assim por diante).

Vejamos um exemplo de um componente Angular> = 2.x que exibe o nome de um presidente dos Estados Unidos:

CTRL + Click

Usamos uma Interface (MyPage) que descreve a forma do objeto presidente. É interessante ter interfaces que descrevem o que você está manipulando, especialmente se houver vários desenvolvedores em um projeto. Se você cometer um erro e, por exemplo, use um $ ionic generate page MyPage √ Create src/pages/my-page/my-page.html √ Create src/pages/my-page/my-page.ts √ Create src/pages/my-page/my-page.scss para o nome do presidente, seu IDE dirá que algo está errado antes mesmo da compilação acontecer.

Em praticamente qualquer IDE que você usar (Visual Studio Code, Atom, WebStorm ou semelhante), você encontrará plug-ins para habilitar o preenchimento automático, verificação de tipo e um linter.

TypeScript é uma vantagem real para Ionic 2, pois torna seu código mais compreensível, ajuda a evitar erros de digitação e ajuda você a ser mais produtivo (por meio de recursos como preenchimento automático, importação automática de módulos, definições de dicas de ferramenta ao passar o mouse e my-page.ts para ir para as definições).

Novo CLI v2

O Ionic CLI v2 adiciona uma maneira de gerar páginas, componentes, tubos e diretivas, diretamente por meio da linha de comando.

Por exemplo, se você deseja criar uma nova página chamada import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'page-my-page', templateUrl: 'my-page.html' }) export class MyPagePage { constructor(public navCtrl: NavController, public navParams: NavParams) {} ionViewDidLoad() { console.log('ionViewDidLoad MyPagePage'); } } , aqui está o comando que você pode executar:

ionic-app-scripts

O comando seguirá as convenções e criará três arquivos para você:

Um arquivo HTML para o seu modelo. Um arquivo SASS para seu estilo de componente. Um arquivo TypeScript para sua lógica de componente.

Aqui está o que o gerado @ionic/app-scripts arquivo se parece com:

assets

Aplicar convenções por meio do uso da CLI é ótimo quando você trabalha em equipe. O Angular 2.xe Ionic 2 estão fazendo um ótimo trabalho ajudando a promover um melhor entendimento do que uma arquitetura de aplicativo Angular deve ser. Claro, você é livre para divergir das convenções, se quiser.

exemplo de cliente node js rest

Embalagem Melhorada

O Ionic 1 depende do ecossistema Gulp para agrupar aplicativos, enquanto o Ionic 2 permite que você selecione suas ferramentas favoritas. Ionic 2 fornece sua própria coleção de ferramentas como um projeto separado: scripts de aplicativos iônicos .

O src é baseado na ideia de que os desenvolvedores não devem se preocupar com a configuração do pacote. A única dependência relacionada ao pacote que seu projeto terá com o Ionic 2 é www. Por padrão, ele usa Webpack mas você pode usar Rolar também.

Com o Ionic 2 e o CLI v2, o $ npm install -g ionic $ ionic -v # should return at least 2.1.12 , bem como os arquivos TypeScript, vivem no mesmo ionic-app-scripts pasta. O

|_+_|
agora é gerado durante cada construção e, portanto, deve ser removido do rastreamento de controle de versão.

Introdução da ferramenta Error Reporting

A nova CLI também introduziu uma ótima ferramenta de relatório de erros. Para obtê-lo, você precisa instalar a versão Ionic> = 2.1:

Agora, toda vez que você tiver erros, um modal aparecerá com informações significativas sobre ele. Por exemplo:

Relatório de erros

Ser notificado sobre erros de tempo de execução o mais rápido possível durante o desenvolvimento é incrivelmente valioso e o Ionic 2 fez um ótimo trabalho a esse respeito.

Benefícios da compilação com antecedência (AoT)

Ahead of Time Compilation (AoT) é uma pequena revolução no ecossistema Angular. Introduzido com o Angular 2.x, o AoT permite que os modelos sejam pré-compilados em uma etapa de construção, em vez de serem compilados instantaneamente pelo navegador.

Embora possa não parecer uma grande diferença, na verdade é. Com o AoT, não precisamos enviar o compilador de modelo com o aplicativo. Isso tem duas vantagens. Primeiro, o pacote será menor, o que impacta diretamente a rede e, portanto, torna o download do seu aplicativo mais rápido. Em segundo lugar, o aplicativo inicializará mais rápido porque a compilação do modelo em tempo real não é mais necessária.

O Ionic 2 aproveita ao máximo o Angular 2.x AoT para otimizar o tamanho e o tempo de carregamento do seu aplicativo gratuitamente.

Antes de AOT e depois de AOT

Ionic 2 é um grande passo em frente

No geral, o Ionic 2 é um grande passo em frente para a indústria móvel híbrida. Embora o conjunto de componentes do Ionic 2 seja semelhante aos componentes do Ionic 1, o Ionic 2 oferece muitas ferramentas e melhorias de desempenho.

o que é um site de bootstrap

De fato, com ferramentas como TypeScript,

 e Ionic CLI, Desenvolvedores Ionic 2 podem ser mais produtivos, podem produzir código mais sustentável e são alertados sobre erros de tempo de execução assim que eles acontecem.

O Ionic 2 também fornece um aumento de desempenho gratuito em relação ao Ionic 1, em particular ao eliminar ou reduzir seus gargalos (relacionados à detecção de alterações, animações, tempo de carregamento e assim por diante).

Com o Ionic 2, seus aplicativos parecerão mais nativos do que nunca. Leve-o para dar uma volta. Você ficará feliz por ter feito isso.

Relacionado: Os 9 erros mais comuns cometidos pelos desenvolvedores Ionic

10 dicas para os pais se conectarem bem com seus filhos

Família

10 dicas para os pais se conectarem bem com seus filhos
Além de “mais rápido, melhor, mais barato”: estratégia de integração vertical para startups

Além de “mais rápido, melhor, mais barato”: estratégia de integração vertical para startups

Ciclo De Vida Do Produto

Publicações Populares
Linha de assunto - Como abordar o design de e-mail
Linha de assunto - Como abordar o design de e-mail
Gerentes de produto x Gerentes de projeto: entendendo as semelhanças e diferenças essenciais
Gerentes de produto x Gerentes de projeto: entendendo as semelhanças e diferenças essenciais
Tutorial de física de videogame - Parte II: Detecção de colisão para objetos sólidos
Tutorial de física de videogame - Parte II: Detecção de colisão para objetos sólidos
Estética e percepção - como abordar as imagens da experiência do usuário
Estética e percepção - como abordar as imagens da experiência do usuário
Escreva testes que importem: enfrente o código mais complexo primeiro
Escreva testes que importem: enfrente o código mais complexo primeiro
 
Como Facilitar a Mudança por meio da Liderança de Servo Ágil
Como Facilitar a Mudança por meio da Liderança de Servo Ágil
O lendário alpinista Jim Bridwell morre aos 73 anos
O lendário alpinista Jim Bridwell morre aos 73 anos
Tutorial Grape Gem: como construir uma API semelhante a REST em Ruby
Tutorial Grape Gem: como construir uma API semelhante a REST em Ruby
Energia híbrida: vantagens e benefícios da vibração
Energia híbrida: vantagens e benefícios da vibração
Dê a eles incentivos - como aproveitar uma estrutura de design de programa de fidelidade
Dê a eles incentivos - como aproveitar uma estrutura de design de programa de fidelidade
Publicações Populares
  • como dominar c ++
  • práticas recomendadas de manipulação de exceção de javascript
  • taxa horária do contrato vs calculadora de salário
  • qual banco de dados usar para o aplicativo Android
  • c corp vs. corp vs. llc
Categorias
  • Receita E Crescimento
  • Aprendendo
  • Processo Interno
  • Processo De Design
  • © 2022 | Todos Os Direitos Reservados

    portaldacalheta.pt