Oque é o Angular 2?

Informações exclusivas…

Angular 2 é uma ferramenta totalmente nova, comparações com seu antecessor são difíceis, até seu nome mudou, na versão 1 chamava-se AngularJS agora, na versão dois chama-se Apenas Angular.

Nesta versão temos a nossa disposição o Angular Universal, esta é a parte que pretende dispensar os crawlers, ferramentas necessárias para que os buscadores possam indexar um single page application. Em outra palavras, Angular Universal pretende renderizar a página no backend. Com ajuda do preboot, que tem o propósito de ajudar na gestão e transição de estado entre a página gerada no servidor e a página gerada no cliente.

Comparativo

Foi adotado como linguagem padrão o TypeScript, linguagem mantida pela Microsoft, com foco em Orientação a Objetos Clássico e familiar para a maioria dos desenvolvedores Back-end.

Não tenha medo do TypeScript, código TypeScript é também um códio JavaScript válido, na prática, isto significa que você pode intercambiar entre uma linguagem e outra naturalmente, e obter o melhor dos dois mundos em um mesmo código.

Funcionalidades adicionadas em cada versão

Criar tags customizadas, que estendem o comportamento padrão do HTML, CSS e JavaScript é algo extremamente poderoso, que o Angular te entrega de maneira fácil, padronizada e natural para desenvolvedores, a maneira de organizar o código é muito parecida com oque vemos no padrão arquitetural MVC.

Se estiver preocupado com logs no client-side, o Angular possui um serviço específico para cuidar de log da nossa aplicação chamada diary.js.

Caso você queira utilizar componentes prontos, temos o Angular Material Design, conjunto de componentes visuais que além de respeitar as atuais boas práticas, são feitos utilizando o próprio Angular 2, e se você é um daqueles desenvolvedores que adora estudar lendo código fonte, é um excelente repositório de conhecimento, incluindo de testes automatizados.

Pensando em usar o Firebase? Pois bem, temos uma API oficial, o Angular Fire 2, é só usar.

Com o Angular 2, você será desafiado a pensar em desenvolvimento de aplicações componentizadas, pois nesta surpreendente ferramenta você será levado a criá-los, naturalmente. Web-componentes não é algo novo, no primeiro draft da especificação em 2012 já se falava e estudava as possibilidades.

E se estiver preocupado com segurança, por padrão tudo que você faz é tratado como inseguro, e de maneira transparente, e se mesmo assim for feito algo que não é recomendado um alerta será emitido no console do navegador.

Gerar documentação do seu código fonte, também não é um problema, já existem ferramentas capazes de extrair gráficos das dependências entre módulos. O ecossistema envolta está crescendo rápido

Você, arquiteto, ou profissional responsável por padronizar o código da aplicação está livre deste trabalho, pois o Angular 2 nos entrega um guia de estilo, assim, em qualquer código que você olhe, será possível identificar rapidamente a estrutura dos componentes. É possível até mesmo identificar a não aderência a este padrão utilizando o tslint em conjuto com o codelyzer.

Sua equipe é amante de Closure? Teste o clutz, ele habilita o TypeScript a importar bibliotecas escrita com Closure-stype, usando um compilador para fazer o parse. Não se esqueça do tsickle capaz de processar JSDoc annotations.

Querendo utilizar a arquitetura Flux? Além de poder utilizar a programação reativa através do RxJS e Services, você pode incluir o NgRx/Store, feito pela comunidade, mas com o apoio do time do Angular, veja que entre os commiters estão alguns membros deste time.

Você quer sobrescrever o tratamento de erros padrão, afim de poder envia-los a um servidor, e poder trata-los da meneira que julga ser mais adequada? É possível sobrescrever o ExceptionHandle.

Seu problema é layout, e está pensando em usar o bootstrap? Dê uma olhada no Flex Layout. Fornece uma sofisticada API usando FlexBox CSS com mediaQuery “observables”.

Preocupado com testes automatizados? Além do código do Angular 2 ter testes, a ferramenta Angular Cli gera a configuração do projeto inicial, suportando teste unitários e funcionais automatizados com, Karma-Runner, Jasmine e Protractor.

Quer fazer páginas com transições animadas, aquelas que costumam assustar qualquer desenvolvedor back-end? Temos uma API nativa, o Angular Animation, que abstrai boa parte a complexidade das animações mais comuns.

Mas atenção, por enquanto não da pra fazer Animações utilizando @Directive, pois, por enquanto, animações são possíveis apenas em elementos de view, e diretivas não tem uma view.

E se você quiser usar o Electron, tem como? Sim, tem! Veja a plataforma Angular Elecron, que está sendo criada para suportar. Também é possível se aventurar sem este projeto, já há código na internet demonstrando como fazer isto.

A compatiblidade entre browser do Angular 2 está sendo testado, e validado, utilizando o browserstack, https://www.browserstack.com/, podemos ver problemas em versões antigas dos principais navegadores. Caso você esteja pensando em criar uma aplicação que precisa de algum desses navegadores, recomendo que pense melhor, e faça seus próprios testes.

E caso você seja uma daquelas pessoas que acredita que o Angular 2 não tem a força do Google, veja o código fonte, onde encontramos o Copyright Google Inc. por todos lugares.

Arquitetura simplificada, que pode ser representada em duas imagens

Depois de tudo isto você está preocupado em como depurar e encontrar bugs na sua aplicação? Além de termos como depurar no navegador, como sempre fizemos, podemos utilizar o Augury, um plugin excelente para verificar o estado dos componentes.

Na versão 2.3.0 foi incluido o Angular Language Service, destinado a integração com IDEs e prover verificação de erros e tipos. Nesta versão foi adicionado suporte a herança de componentes, além de melhorar o stacktrace feito pelo zone.js

Pensando em usar o HammerJS para fazer com que sua aplicação tenha ações baseadas em movimentos (Swipe), como fazemos nos dispositivos mobile? Na versão do Angular 2.3.0 há de maneira experimental as classes HammerGestureConfig e HammerGesturesPlugin e o teste hammer_gestures_spec.ts que demonstra a intenção de suportar nativamente esta funcionalidade.

Quer começar rápido, utilizar componentes prontos, ou até mesmo Templates pronto, e criar sua aplicação em cima dele, também é possível, de uma olhada no PrimeNG, e nos templates feitos com Angular 2 oferecidos (omega-ng e ultima-ng) pela Primetek.

Se o PrimeNG não lhe agradar, de uma olhada na lista abaixo:

PrimeNG, Wijmo, Vaadin, ngSemantic, onsen, telerik, bootstrap, fuel-ui, clarity, agGrid, Material design

Mas você só quer gerar um “crudizinho” pra ver como as coisas ficam? Pode utilizar o celerio, um gerador de código, que utiliza , Spring, JPA, Angular 2 com PrimeNG.

Trabalhar com GraphQL, também dá, faça o seu teste com o: http://dev.apollodata.com/angular2/

Te convenci a programar usando Angular 2? Agora você vai precisar configurar um projeto node, incluindo configuração para rodar testes unitários (jasmine) e de integração (protractor), e isso deve te consumir algumas horas criando código repetitivo (boilerplate). Até nisso eles pensaram em nós, e para ajudar temos o Angular Cli, ferramenta que roda comandos no prompt capaz de criar a estrutura inicial do projeto, e até mesmo gerar a estrutura inicial de componentes, diretivas, rotas, services, etc.

Depois de tudo isto, agora você quer trocar aquela idéia esperta com o time que desenvolve esta ferramenta completa? Você pode entrar no gitter, a galera está lá, e respondendo a muitas dúvidas da comunidade.

Por enquanto é isso, fique ligado, pois novas funcionalidade continuam sendo adicionadas ao Angular 2.

Mais conhecimento como este, está ao seu alance no meu Curso de Angular

Referências

https://medium.com/codigorefinado/dica-de-como-gerar-documenta%C3%A7%C3%A3o-de-componentes-angular-2-b786449c77a0
https://medium.com/codigorefinado/dica-de-como-se-proteger-de-hackers-utilizando-o-angular-2-e066c74d0e9c#.knv2zs7l5
https://universal.angular.io/
https://www.w3.org/TR/2012/WD-components-intro-20120522/
https://www.typescriptlang.org/
https://github.com/mgechev/codelyzer
https://angular.io/docs/ts/latest/guide/style-guide.html
https://www.browserstack.com/
https://docs.google.com/presentation/d/1FqMneR6U5CXGeDUKHhBPWWsj8tK58G-RqorqEqxcSaY/pub?start=false&loop=false&delayms=3000&slide=id.g1a021c52c0_3_36
https://angular.io/presskit.htmlhttps://angular.io/resources/