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.
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:
nameEnquanto o Ionic 2 usa o window atributo:
documentComo 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: ` componente. Por enquanto, {{president.name}}
` }) export class AppComponent { title:string = 'President of the United States'; president: IPresident = { id: 44, name: 'Barack Obama' }; } 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:
booleanLembre-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 + ClickUsamos 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-scriptsO 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:
assetsAplicar 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:
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.
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
