Contente
- 01. Execute uma verificação de versão
- 02. Instale o Angular
- 03. Crie um esqueleto de projeto
- 04. Carregamento diferencial do chicote
- 05. ... e veja os resultados
- 06. Gerar um trabalhador da web
- 07. Explore o código
- 08. Configurar andaimes
- 09. Não se preocupe com a falta de construtor
- 10. Execute uma pequena execução de compilação
- 11. ... e encontre a saída
- 12. Comece a trabalhar
- 13. Explore Ivy
- 14. Experimente o processamento de ng modificado
- 15. Aproveite a migração aprimorada
- 16. Explore o controle do espaço de trabalho
- 17. Acelere o processo
- 18. Evite os mortos-vivos
- 19. Observe o log de alterações
Angular 8 é a versão mais recente do Angular do Google - uma das melhores estruturas de JavaScript disponíveis. Neste artigo, veremos o que há de especial no Angular 8 e mostraremos como começar. Primeiro, uma breve revisão do que aconteceu com a estrutura até agora.
A introdução do Angular levou a uma mudança de paradigma no desenvolvimento web: enquanto a maioria das bibliotecas se limitava a fornecer suporte aos desenvolvedores com impacto arquitetônico relativamente limitado, a equipe de desenvolvedores do Angular foi na outra direção O produto deles força você a usar uma arquitetura específica, com desvios que variam de difícil a comercialmente inútil. Na verdade, a maior parte do código Angular passa por uma cadeia de ferramentas de transpilação relativamente complexa antes mesmo de chegar ao navegador.
Devido ao imenso sucesso do Angular, tanto dentro quanto fora do Google Inc, o desenvolvimento - em geral - se estabilizou. Isso significa que as mudanças de quebra de código são poucas, enquanto as atualizações semestrais estão focadas em adaptar a estrutura às mudanças no cenário de navegação na web.
No caso do Angular 8, por exemplo, um novo compilador JavaScript é implantado (embora ainda experimentalmente). Ele otimiza o código de compatibilidade gerado para ser significativamente menor e mais rápido às custas de navegadores mais antigos. Além disso, o suporte do Web Worker é integrado para aumentar a capacidade de processamento do Angular. Resumindo, há muito para ver - vamos mergulhar de cabeça.
Se você preferir projetar um site sem código, experimente um desses construtores de sites fáceis. E para tornar as coisas ainda mais suaves, faça o correto no seu serviço de hospedagem na web.
01. Execute uma verificação de versão
O conjunto de ferramentas do Angular reside dentro do ambiente NodeJS. No momento em que este livro foi escrito, o Node.js 10.9 ou superior é necessário - se você estiver usando uma versão mais antiga, visite o site do Node.js e faça uma atualização. O código abaixo mostra o status da versão nesta máquina.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Instale o Angular
O conjunto de ferramentas do Angular reside em um utilitário de linha de comando chamado ng. Ele pode ser instalado através do conhecido NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng versão
Tenha o cuidado de responder à pergunta mostrada na imagem abaixo.
Obter informações de versão da ferramenta é bastante difícil - não apenas a sintaxe é única, mas a saída também é detalhada (veja a imagem abaixo).
03. Crie um esqueleto de projeto
ng gera o andaime angular para nós. Nas etapas a seguir, queremos adicionar roteamento e usar Sass para transpilação de CSS. Se a implantação falhar por algum motivo, esvazie o diretório de trabalho e reinicie ng com direitos de superusuário.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng new workertest
04. Carregamento diferencial do chicote
A nova versão do Angular otimiza o código de compatibilidade com versões anteriores para reduzir o impacto - um arquivo chamado lista de navegadores permite que você decida quais navegadores devem ser suportados. Abrir lista de navegadores e remova a palavra não na frente do IE 9 para o IE11.
. . . > 0,5% últimas 2 versões Firefox ESR not dead IE 9-11 # Para suporte do IE 9-11, remova 'not'.
05. ... e veja os resultados
Solicite uma compilação do projeto, mude para a pasta de distribuição e limpe os arquivos de mapa desnecessários.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Invoque a árvore para ver os resultados - ng cria várias versões de vários arquivos de código (veja a imagem abaixo).
06. Gerar um trabalhador da web
Os Web workers permitem que o JavaScript entre na última fronteira dos aplicativos nativos: processamento massivamente paralelo de tarefas. Com o Angular 8, um web worker pode ser criado diretamente do conforto do ng utilitário de linha de comando.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng gerar web-worker myworker CRIAR tsconfig.worker.json (212 bytes) CRIAR src / app / myworker.worker.ts (157 bytes) ATUALIZAR tsconfig.app.json (236 bytes ) ATUALIZAÇÃO angular.json (3640 bytes)
07. Explore o código
ngA saída de provavelmente parecerá intimidante à primeira vista. Abrindo o arquivo src / app / myworker.worker.ts em um editor de código de escolha, revela o código que você deve conhecer bem do WebWorker especificação. Em princípio, o trabalhador recebe mensagens e as processa conforme necessário.
/// reference lib = "webworker" /> addEventListener (’message’, ({data}) => {const response = `worker response to $ {data}`; postMessage (response);});
08. Configurar andaimes
As aplicações angulares consistem em componentes. Desativar nosso web worker é melhor feito dentro do AppComponent, que é expandido para incluir um ouvinte para o OnInit evento. Por enquanto, ele emitirá apenas informações de status.
importar {Component, OnInit} de ’@ angular / core’; @Component ({...}) A classe de exportação AppComponent implementa OnInit {title = ’workertest’; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Não se preocupe com a falta de construtor
Desenvolvedores experientes de TypeScript se perguntam por que nosso código não usa o construtor fornecido pela linguagem de programação. A razão para isso é que ngOnInit é um evento de ciclo de vida que é acionado sempre que ocorre um evento de inicialização - isso não precisa ser correlacionado à invocação da classe.
10. Execute uma pequena execução de compilação
Neste momento, o programa está pronto para ser executado. Vamos executá-lo a partir do servidor dentro de ng, que pode ser invocado por meio do comando serve. Um aspecto interessante dessa abordagem é que o programa detecta mudanças e recompila o projeto em tempo real.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Dê uma olhada na figura para ver isso em ação na imagem abaixo.
11. ... e encontre a saída
ng serve coloca o endereço de seu servidor da web local, que geralmente é http: // localhost: 4200 /. Abra a página da web e abra as ferramentas do desenvolvedor para ver a saída de status. Tenha em mente que console.log envia dados para o console do navegador e deixa o console da instância NodeJS intocado.
12. Comece a trabalhar
Neste momento, criamos uma instância do trabalhador e fornecemos a ela uma mensagem. Seus resultados são mostrados no console do navegador.
if (typeof Worker! == ’undefined’) {// Criar um novo const worker = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’página recebeu mensagem: $ {data }’); }; worker.postMessage (’hello’); } else {console.log ("Sem suporte de trabalhador"); }
13. Explore Ivy
Versões futuras do Angular usarão um compilador mais avançado, levando a visualizações ainda menores. Embora o produto ainda não esteja concluído, um esqueleto habilitado para ivy pode ser gerado via ng new ivy-project - enable-ivy. Alternativamente, altere as configurações do compilador conforme mostrado no snippet.
"angularCompilerOptions": {"enableIvy": true}
Uma palavra de advertência: Ivy leva a reduções de tamanho incríveis, mas não é grátis. O produto ainda não se estabilizou, portanto, seu uso em ambientes produtivos não é recomendado.
14. Experimente o processamento de ng modificado
Angular ng A ferramenta de linha de comando usou scripts filhos internamente por algum tempo. O Angular 8 aumenta a vantagem, pois agora você também pode usar esse recurso para executar suas próprias tarefas à medida que seu aplicativo é montado e compilado.
"arquiteto": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Uma aplicação elegante de ng scripts envolve o upload direto de aplicativos para serviços em nuvem. O repositório Git fornece um script útil que carrega seu trabalho para uma conta do Firebase.
15. Aproveite a migração aprimorada
Os desenvolvedores que estão migrando do Angular 1.x, também conhecido como AngularJS, tiveram muitos problemas para fazer o navegador funcionar corretamente em aplicativos "combinados". O novo serviço de localização unificada visa tornar esse processo mais suave.
16. Explore o controle do espaço de trabalho
Grandes projetos se beneficiam da capacidade de alterar a estrutura do espaço de trabalho dinamicamente. Isso é feito por meio da nova API de espaço de trabalho introduzida no Angular 8.0 - o fragmento que acompanha esta etapa fornece uma visão geral rápida do comportamento.
função assíncrona demonstre () {const host = espaços de trabalho. createWorkspaceHost (new NodeJsSyncHost ()); const workspace = await workspaces. readWorkspace ('path / to / workspace / directory /', host); const project = workspace.projects. get ('meu-app'); const buildTarget = project.targets. get ('build'); buildTarget.options.optimization = true; aguarde workspaces.writeWorkspace (espaço de trabalho, host); }
17. Acelere o processo
Construir grandes bases de código JavaScript fica entediante. Versões futuras do AngularJS usarão o sistema de compilação Bazel do Google para acelerar o processo - infelizmente, no momento em que este artigo foi escrito não estava pronto para o horário nobre.
18. Evite os mortos-vivos
Embora o Google tome muito cuidado para não quebrar o código, alguns recursos simplesmente precisam ser removidos, pois não são mais necessários. Verifique esta lista de depreciações para saber mais sobre os recursos que devem ser evitados.
19. Observe o log de alterações
Como sempre, um artigo nunca pode fazer justiça a um lançamento inteiro. Felizmente, este registro de alterações fornece uma lista detalhada de todas as alterações - apenas no caso de você sentir vontade de verificar o pulso de um recurso especialmente caro para você.
Tem muitos arquivos prontos para upload em seu site? Faça backup deles no armazenamento em nuvem mais confiável.
Este artigo foi publicado originalmente na revista de web design criativo Web designer.
