Vou ter que trabalhar com AngularJS. E agora?

Esses são os slides correspondentes a apresentação ocorrida no Meetup AngularSP acontecido no dia 25/03/2021.

Transcript

1. Vou ter que trabalhar com AngularJS ..e agora? Igor Debastiani Desenvolvedor Web Front-End
2. Índice • Um pouco de contexto • EcmaScript e Engines • Exemplo rápido para não ficar com sono • Edições do EcmaScript • As versões do Angular • Expandindo os conceitos com exemplos • Recursos
3. Um pouco do contexto
4. • O AngularJS é um framework JS lançado há 10 anos atrás, sendo bem velhinho para os padrões atuais. • Está em LTS (long time support) até 31 de Dezembro de 2021. • Pelo sucesso massivo na época do lançamento ainda está presente em muitas aplicações web e mobile híbridas.
5. EcmaScript & Engines
6. Engines "interpretam" o código JS. • Google chrome, node.js e Deno utilizam a engine V8. • A operação de uma engine é definida por uma determinada edição da EcmaScript.
7. EcmaScript & Engines • Funções declaradas apenas com function(){} • Declaração de variáveis apenas com "var" • Orientação de objetos era uma abstração, pois não havia a palavra reservada "class" • Import via require e export via module.exports. • Funções podem ser declaradas com function(){} ou ()=>{} • Declaração de variáveis com "var", "let" e "const" • O conceito de orientação de objetos pode ser implementado a partir da criação de classes com a palavra "class". • Import e export dos módulos ES6 via palavra reservada import e export. ES5 ES6 (game changer) Fonte: https://en.wikipedia.org/wiki/ECMAScript
8. EcmaScript & Engines Fonte: https://caniuse.com/?search=es6 É importante ter em mente que haverão navegadores na ativa (<6%) que não dão suporte às versões mais novas (ES6 ou mais novo) do EcmaScript. Para isso se utiliza algum compilador como o Babel.
9. Exemplo rápido pra não ficar no sono
10. Exemplo rápido pra não ficar no sono • Ao lado temos o esqueleto dos nossos testes. • As diferenças já começam no jeito de trabalhar: Com AngularJS é a mais comum trabalhar dessa forma.
11. Exemplo rápido pra não ficar no sono • Para exibir na UI não tem jeito, é necessário o $scope para declarar a variável resultado. • Então a pergunta, quais as funções irão conseguir mudar a variável na UI? Exemplo 01
12. Exemplo rápido pra não ficar no sono • Será que tudo do ES6+ vai funcionar? • O que fazer quando não funciona? Exemplo 02
13. Exemplo rápido pra não ficar no sono • Conferir como as coisas eram feitas no ES5 e verificar se o framework tem algum recurso para isso. • Na maioria das vezes esse recurso é algo que não queremos utilizar como hábito. Exemplo 03
14. Edições do EcmaScript
15. ES5: Define o JS mais básico que conhecemos hoje. Eventos e chamadas assíncronas são feitos com callbacks. A palavra reservada class ainda não existia. ES6: Introduz os imports e exports da forma que temos até hoje. Insere let e const, class, arrow functions e mais. Muito do que temos hoje no JS veio dessa versão. ES7: Trouxe o async/await como uma das formas de trabalhar com promises. ES9: Promise.prototype.finally, operador spread ({...obj}) . ES10: Array.sort, Object.fromEntries. ES11: Operador Nullish coalescing "??".
16. As versões do Angular
17. • AngularJS: Lançada em 2010 e se vale da abordagem do ES5. • Angular 2 até as mais recentes: Iniciaram lançamento em 2014 e todas tem suporte ao ES6. É mais difícil ter algum problema de JS como os mostrados anteriormente.
18. Expandindo os conceitos com exemplos Entendemos como abordar um código legado. Bora ver mais alguns exemplos?
19. Recursos https://github.com/gdinn/angularjs-e-agora Minhas redes sociais: https://www.linkedin.com/in/igor-debastiani-3b579b124/ Repositório Do projeto:
20. Igor Debastiani Desenvolvedor Web Front-End Obrigado. Vou ter que trabalhar com Angularjs ..e agora?