Como anda o Angular.js? Devo embarcar nessa?

Há 7 meses recebemos a tarefa de reestruturar um sistema crítico da empresa. O foco era economizar a quantidade de dados trafegados e diminuir o tempo de espera do usuário em cada interação com a aplicação. É uma empresa grande, sistema que atende o Brasil inteiro, com mais de 100 desenvolvedores envolvidos no projeto e até então a ideia principal era evoluir as tecnologias já existentes.

Contudo, determinado dia, um desenvolvedor veio com a ideia de fazer uma mudança radical. Mudar o MVC server-side para client-side e para isso a sugestão foi utilizar o Angular. Minha primeira reação foi de negação e desaprovação, não pelo framework, mas pelo JavaScript.  Nunca havia me dado bem com a linguagem e também nunca tinha feito um grande esforço para lidar com o essencial.

Esse foi o começo da minha história, que não terá meio e nem fim uma vez que os posts terão um viés mais técnico. De qualquer maneira, essa figura resume bem como anda minha relação com o framework:

feelings_about_angularjs_over_time

Nosso objetivo aqui é fazer um série de artigos sobre o Angular, tratando basicamente sobre conceitos gerais, dicas, navegação, CRUD e um pouquinho de REST. Então não vamos comparar o Angular com os seus concorrentes como Ember, Blackout, dentre outros que estão proliferando por aí.

O Angular é um framework JavaScript, criado pelo Google, no estilo MVC e usa o conceito de SPA (Single Page Application). Nesse tipo de aplicação, apenas uma parte dela muda e a outra permanece fixa, fazendo parte de um template compartilhando entre as páginas. Isso traz melhoras para a experiência do usuário e tráfego de dados. Ele tem crescido muito em adoção e é um dos frameworks mais importantes da atualidade

Você pode começar com o tutorial do Angular, desenvolvendo o PhoneCat. Você pode inclusive utilizar o JSBIND para codificar e ver o live coding, ferramenta muito bacana inclusive para quem já está na utilizando o framework. Na Caelum, o curso de front-end com JavaScript e jQuery aborda Angular, além do curso online de Angular no Alura.

Recomendo sempre acompanhar os posts do Bruno Scopelliti, que também foca bastante na parte REST, assim como John Papa, que fez um excelente Angular Code Conventions e outros blogs como do Angular e Bennadel. Ah! claro, não se esqueça de seguir o “James Gosling do Angular” e o Igor Minar, o principal commiter do projeto.

E caso você já esteja utilizando Angular no seu dia a dia, você já sabe que o framework está na versão 1.3 e que a versão 2.0 está em fase de desenvolvimento. Mas talvez o que você ainda não saiba é da tendência delas não serem retrocompatíveis e que muita features irão mudar, talvez a principal delas seja o ATScript. Então temos que nos preparar para eventuais mudanças em nosso código e principalmente como iremos suportar essa migração.

Algumas dicas básicas para quem resolver adotar o framework é que invariavelmente você precisará de pelo menos um especialista JavaScript na sua equipe, e pelo começo desse texto você pode notar que não sou eu na minha equipe (obrigado Tiago Lage). Sim, o Angular abstrai muito o uso do JavaScript, provendo inclusive algumas funções auxiliares, mas você precisará de alguém capaz de entender bem o assincronismo e outras loucuras, digo, features que a  linguagem provê. Além disso, acompanhar os eventos sobre Angular (talvez um dia cheguem aqui) e os podcasts que falam sobre a tecnologia

Finalizando, a ideia inicial aqui é interar o leitor sobre esse novo mundo, mostrando as vantagens do framework e apontar também algumas desvantagens, que são melhor exploradas com o uso diário. Agora é esperar a série de posts, sendo que no próximos discutiremos sobre navegação seguido pelos posts de CRUD. Eu ainda estou aprendendo e você? Como está seu conhecimento desse “novo velho” mundo de ferramentas JavaScript? Algum tópico que você gostaria de ler sobre Angular?

24 Comentários

  1. João Paulo Sossoloti 04/11/2014 at 09:59 #

    Ae Raphael, boa iniciativa!

    Brinquei pouco com o Angular, e uma outra boa fonte para quem quer “saber qual é” pode ser visto no CodeSchools: https://www.codeschool.com/courses/shaping-up-with-angular-js. Não é nada aprofundado, mas dá para saber no que ele é capaz, e se gostar, procurar outras fontes e cursos.

    Uma coisa que discuti um pouco com outras pessoas é sobre a parte de segurança (mais autorização). Um post mais elaborado sobre isso seria show, mas no que já lí rapidamente, como as rotas estão configuradas client-side, é possível o acesso para as páginas restritas, mas vc segura os dados retornados. E aí muda bem a forma de pensar e programar.

    E uma pergunta conservadora/direitista: apesar dos benefícios e vantagens, como ele é bem diferente do que estamos acostumados, uma futura descontinuação do framework (tipo a Google não dando mais suporte) não faria com que sistemas seriam, além de legados, difíceis de manter e encontrar devs, ao ponto de ter que reescrever a app toda? Java, .NET, PHP tem seus legados, mas além da fácil contratação de devs, manter uma app Struts legada, por mais que é desanimador, qualquer javeiro dá conta.

    Se a pergunta acima for respondida por um dev, acredito que, pela curiosidade intrínseca da profissão e senso de desafio, ele vai querer muito aprender Angular e sair codando (eu msm me enquadro nisso!). Mas, como vc disse no início do post, para um projeto grande a longo prazo, pensando no projeto em sí, riscos e etc, não pode ser um grande problema? Ou o framework já está em um nível que já passou essa “barreira do medo”?

    🙂

  2. Rafael Ponte 04/11/2014 at 10:32 #

    Muito bom, Rapha!

    Angular é um novo mundo, novos conceitos e principalmente uma forma diferente de trabalhar! Decidir usá-lo na empresa é uma decisão séria, o que deve ser decidido e analisado juntamente com a equipe. Ele facilita muita coisa, mas em contrapartida ele dificulta outras que antes eram simples de resolver! Se fosse fazer uma comparação com algum framework MVC server-side, eu diria que Angular é o JSF no client-side! <3

    Gostei da honestidade, ter um especialista em JavaScript na equipe é muito importante e imprescindível! Assim como ter alguém bom com práticas REST para auxiliar determinadas decisões arquiteturais, de design e segurança.

    Enfim, boa parte da comunidade está feliz com Angular, já outra parte nem tanto! Vamos ver como fica o design final do Angular 2.0!

    Um abraço!

  3. Raphael Lacerda 04/11/2014 at 10:44 #

    João,

    dá uma olhada nos posts do Bruno, http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app

    Sobre a “barreira do medo” eu sinceramente não sei avaliar isso. Vi pelos posts que a galera ficou meio chateada da versão 2 mudar tanto, mas enfim, já houve até discussão se o Java não deveria quebrar a retrocompatibilidade.
    Enfim, concordo com tudo que vc disse. É um tradeoff. Não tem como ganhar em todas!

  4. Alan Ghelardi 04/11/2014 at 11:57 #

    Olá a todos!

    Estou utilizando o Angular há alguns meses em uma SPA (que utiliza uma API Rest baseada no VRaptor) e fiquei muito impressionado com a capacidade do framework. Ele apresenta um novo paradigma de tratamento do front-end – e a curva de aprendizado acaba sendo acentuada (sobretudo, para se fazer coisas mais complexas) -, mas creio que os ganhos em legibilidade, organização e produtividade valham a pena. O binding bidirecional que ele oferece entre a view e os objetos JavaScript simplificam demais a implementação de funcionalidades dinâmicas nas páginas HTML. Outra coisa bem legal no Angular é a modularização dos componentes da aplicação e o fato do framework ser muito baseado em injeção de dependências – dá para ver como os desenvolvedores se basearam em diversos conceitos de boas práticas oriundas do back-end. Além disso, a possibilidade de criarem-se diretivas (tags HTML customizadas) é bem interessante e, a meu ver, auxilia a tornar o HTML bem mais expressivo e favorece a reutilização de componentes.

    Abraços e parabéns pelos artigos sempre extremamente relevantes!

  5. Matheus Cardoso 04/11/2014 at 15:59 #

    O Angular extrapolou o conceito de SPA e hoje é utilizado por frameworks de desenvolvimento de app híbridos, como o Ionic Framework e o Onsen. Achei que foi o grande passo para o Javascript se estruturar melhor, embora o Angular consiga fazer o Javascript ser mais verboso ainda. Contudo, há melhorias na estruturação do código e na separação dos interesses numa aplicação (adeus ao “padrão de projeto” “One Big Index File” como todo o javascript no index.html). E minha experiência é parecida com a sua: nunca fui fã de Javascript e o Jquery era meu canivete suíço. Mas depois do Angular, eu vejo Javascript com outros olhos, apesar das desvantagens existentes do framework (não se pode agradar gregos e troianos, né?).

    Bom post.

  6. Edmo Lima 04/11/2014 at 17:03 #

    E pra quem decidiu embarcar nessa,

    Uma dica onde pode-se encontrar bastante conteudo:
    https://github.com/jmcunningham/AngularJS-Learning

  7. Raphael Lacerda 04/11/2014 at 23:02 #

    Belo resumo Alan

  8. Leonardo Souza 05/11/2014 at 08:29 #

    Rapha,

    Apenas para enriquecer ainda mais o seu post, faltou citar o excelente guia de estilo feito pelo Todd Motto para desenvolvimento com Angular:

    https://github.com/toddmotto/angularjs-styleguide

    Abraços e parabéns pela publicação!

  9. Zeovaldo 05/11/2014 at 09:51 #

    Raphael, parabéns pelo post…
    Os comentários, das pessoas que já utilizam o AngularJS, estão top de mais
    Que venham novas postagens e/ou comentários dos experts sobre o assunto.

  10. Flávio Almeida 05/11/2014 at 11:50 #

    Olá Larcerda,

    Utilizo Angular há um bom tempo. Acho muito salutar sua iniciativa de informar o leitor e deixar que ele decida se o AngularJS é a melhor escolha. Nascido na Google, ele tá no coletivo imaginário das pessoas, o que pode ofuscar decisões mais acertadas. Aliás, na última Mobileconf mostrei sua integração com o Firefox OS.

    Abraço

  11. Raphael Lacerda 05/11/2014 at 23:53 #

    Boa Leonardo! Eu citei o do John Papa, era o que eu conhecia até então!
    Vc já comparou os dois?

  12. camilo lopes 07/11/2014 at 08:31 #

    Muito bom o post. Simples e direto. E abordagem bacana sobre o framework. Venho trabalhando 1 ano com o framework e temos aqui dois projetos em produção e os benefícios que tivemos são vários, claro que há limitações que pode ser considerado desvantagem.Inclusive fiz um post há um tempo atras do primeiro projeto http://blog.camilolopes.com.br/experiencia-angularjs-java-em-producao/
    Parabéns Lacerda.

    abraço

  13. Rafael Jesus (@_jesus_rafael) 07/11/2014 at 10:54 #

    Angular ajuda muito para quem não faz idéia de como estruturar uma app no client, não tenha dúvida disso,

    Mas para min e para uma grande parte de devs JS no exterior, ele pecou em algumas decisões de design,

    Tanto é que será reescrito do zero e não terá mais suporte p/ versão 1,

    Mas sim ainda terá directives, services, o anti-pattern two way data-binding(yeap anti-pattern) e o polemico dirty checking aquele que detona a bateria do mobile,

    Tom Dale/Yehuda Catz(criadores do ember.js e de diversas gems da comunidade Ruby) e Jeremy Ashkenas(criador do coffeescript, underscore.js and backbone.js) já estão fartos de alertarem sobre o uso do angular no Twitter,

    Mas todo problema aparece quando a app esta grande, eu não estou contente com o design que temos na app hoje,

    Me incomoda absurdo a falta de um model, o dirty checking e o design para renderizar templates dinamicos, por isso tem aos montes apps em angular hoje c/ ng-show e ng-hide,

    Vejo e vi controllers enormes, sem encapsulamento nenhum, claramente falta um model, não aquilo que é declarado no ng-model, por favor aquilo não representa seu model no client,

    Busquem saber quem são os devs por traz dos frameworks, ou melhor fique por dentro da comunidade,

    O que não dá é adotar uma linguagem só pq agora tem o Google por traz e esquecer de aprender JS a fundo,

    Se for assim para tudo e vamos construir apps com golang, que diferente do angular é usado em vários projetos em produção no Google, foi feito lá e por um dos criadores da JVM e o criador do Unix,

    O ponto é, aprenda JS e não se limite só nas abstrações do angular, ou xyz, e de nenhuma abstração que te deixe limitado,

    Jeremy Ashkenas(backbone.js) está desenvolvendo um projeto há 2 anos com ember.js e dise que em 10% usou two-way-databiding,

    Sugestão minha pra quem esta começando é, puxar um projeto menor talvez com JS puro, depois sim desenvolva backbone, angular e ember e aprenderá JS de uma vez,

    Minha stack hoje seria:
    carregamento modular – browserify, sim o pessoal não esta usando mais require.js

    models – backbone.model ou com bom design e encapsulamento vc pode sim ter um model elegante em JS puro

    views – React.js

    rotas – react-router ou extender o backbone.router

    controllers – iria de Flux do Facebook

    Abrcs,

  14. Raphael Lacerda 07/11/2014 at 13:30 #

    Muito rico seu comentário @_jesus_rafael
    Obrigado por compartilhar a experiência.
    Relacionado script loader, o que vc acha do head.js?

  15. Thiago 14/11/2014 at 11:36 #

    Ótimo post Raphael.
    Descobri o Angular semana passada (tô atrasado), pesquisando sobre o Material Design. Achei muito interessante mas não tive muito tempo de pesquisar mais.
    Este post ajudou a despertar ainda mais meu interesse e agora com diversas fontes para consulta.
    Obrigado.

  16. Wesley 15/11/2014 at 14:11 #

    Muito bom!
    Parabéns pela careza do post. Masssssssss estou esperando o post do “DeltaSpike”.

  17. Tiago Stutz 18/11/2014 at 11:34 #

    @_jesus_rafael, também achei muito legal o que você colocou de se estudar JS a fundo para não se tornar presa fácil dos frameworks que temos por aí; principalmente dos que possuem um grande poder de mídia e marketing.

    Apenas para balancear um pouco, parte das suas colocações estão alinhadas ao pensamento o autor desse post: http://migre.me/mWfrT. Mas há também um outro post que faz um contraponto a essas colocações que achei bem interessante: http://migre.me/mWfkV

    Acima de tudo, o importante é estarmos falando sobre essas questões tão importantes.

  18. Raphael Lacerda 18/11/2014 at 13:59 #

    Muti bom Tiago!
    Dos links que vc passou, achei um bem interessante da galera do airbnb

    http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/

  19. Pedro Vinícius 22/12/2014 at 17:28 #

    Fiz o curso de Angular da Alura e achei o framework bem interessante. Mas ao menos para as coisas que eu faço, seria uma bazuca pra atirar em formigas. Dou uma preferência maior ao Backbone por ser mais leve e mais genérico. Integrar Angular com Rails é um saco! Backbone é bem mais simplesde integrar, porém mais verboso.

  20. Luciano Borges 31/12/2014 at 18:27 #

    Excelente post. Trabalho no desenvolvimento do Framework Demoiselle e estamos pra lançar a nova versão (versão beta já disponível) que dará suporte a aplicações Java seguindo o estilo arquitetural REST e na camada cliente pensamos em adotar um framework JS, chegamos a experimentar o AngularJS com sucesso, mas, optamos em usar no arquétipo (que serve de referência aos outros devs) o JavaScript + JQuery tentando evitar adicionar uma complexidade a mais (AngularJS) considerando a resistência dos programadores JSF em relação ao JS. Adotamos a seguinte estrutura: controller (arquivos js que modificam o arquivo html), lib (arquivos js das bibliotecas de terceiros – bootstrap, datatables …) e proxy (arquivos que fazem acesso ajax aos serviços rest). Como os dados trafegados são simples estamos discutindo a opção de criar os models e deixar como exemplo no arquétipo.

    Tenho lido que o AngularJS2 vai ser incompatível com a versão 1 e vem de certa forma integrado ao WebComponents, estamos aguardando para avaliar nessa segunda versão a possibilidade de trazer arquétipos com o AngularJS.

  21. Caio Ribeiro Pereira 06/01/2015 at 14:51 #

    Muito bom o post!

    Só pra complementar aqui, no site DevFreeCasts tem um acumulado de screencasts sobre AngularJS for free pra assistir http://devfreecasts.org/angularjs

    abs!

  22. Felipe Oliveira 22/04/2015 at 08:27 #

    Muito bom esse artigo, aqui na http://www.chipsetdesenvolvimento.com começamos a usar o angularJs para nossos projetos de desenvolvimento de sistemas web ou sites institucionais, isso tem deixado muito de nossos clientes felizes pois a velocidade de interação com telas aumentou, nossos desenvolvedores conseguem obter uma maior produtividade uma vez que o Framework não é tão complexo assim.
    Estamos gostando muito, recomendamos

  23. Anderson Machado 11/10/2015 at 17:09 #

    Parabéns pelo artigo! Realmente eu concordo com tudo…

Deixe uma resposta