Categoria: AngularJs

Hangout migrando do JSF para AngularJS

Fala galera,

sabemos que migrações de aplicações são bem complicadas de serem realizadas, principalmente quando é necessário mudar o paradigma de desenvolvimento. Pensando nisto, no último dia 20 de junho participei de um hangout, com o DFJUG, onde abordamos como migrar de uma aplicação desenvolvida em JSF para AngularJS.

Para quem não conhece, o Java Server Faces é uma especificação Java baseada em componentes para a construção de aplicações web. Portanto, realizar uma migração de um sistema desenvolvido nesta tecnologia para AngularJS não é nem um pouco trivial. Há uma mudança de paradigma muito grande que você pode ver no hangout abaixo. 😉

O conteúdo ta bacana, mas sou suspeito para falar. Confere aí… 😉

Só para lembrar, a ideia do hangout não é incentivar você a sair migrando as aplicações de JSF para AngularJS. Nossa intenção foi apenas mostrar como seria essa mudança e mostrar alternativas.  😉

E aí, gostou? Compartilhe com seus amigos…

Abraços

AngularJS

AngularJS: Componentizando os componentes

Fala galera, beleza?

Você aí que às vezes sofre quando o usuário decide mudar o css de um componente no sistema, por exemplo o ícone do botão salvar, esse post é para você!

Cansei de contar as vezes que precisei entrar em VÁRIAS telas do sistema e mudar como a tag do html ia ser renderizada ou alterar o seu comportamento padrão.  Alguns devs tem uma velha desculpa: Ah Gabriel, mas tem a IDE para fazer isso por nós, o trabalho é mínimo!… Eu como um bom preguiçoso, não gosto é de ter trabalho algum.

Então, é aqui que entra  as diretivas do AngularJS (já bloguei um pouco sobre elas aqui). As diretivas poderão facilitar nossa vida (e muito!) quando se trata de padronizar o nosso sistema. Não seria legal mudar em um único lugar e ter a certeza que todo o sistema sofreu a alteração!?

O exemplo

Leia Mais

Integração contínua com Travis e Heroku

Fala galera, beleza?

Você ainda roda, de forma manual, bons e velhos scripts para por sua aplicação em produção? É chato ter que alterar os arquivos de configuração toda vez que precisa modificar o ambiente? Que tal descomplicar e deixar tudo isso automatizado de verdade? Tá parecendo venda de produto pirata né? Hehehe… Mas é só um post sobre integração contínua!

Vamos falar um pouco sobre como fazer integração contínua por meio do Travis-CI e realizando o deploy no Heroku. Como exemplo, vamos utilizar um sisteminha de Tarefas feito com Spring Boot e a camada de visão com AngularJS. Em um futuro não muito distante, falarei um pouco sobre as maravilhas do Spring Boot, mas, hoje, vamos focar nessa danada de integração contínua.

 

Integração Contínua

O que é? O que come? Para que serve? Veja no novo post do Gabriel Feitosa =)

Muita gente ainda se pergunta no que a integração contínua pode auxiliar no processo de entrega, mesmo se ainda trabalhar com a velha forma cascata  (sim, infelizmente ainda hoje tem muita gente entregando software assim).

Geralmente, associamos a integração contínua somente as metodologias ágeis. Afinal, foi por causa da necessidade de disponibilizar os softwares de maneira rápida, contínua e com qualidade, que se tornou indispensável integrar o que é produzido ao que é entregue.

Uma pergunta para responder em nossas cabeças: quando fazemos um bom trabalho, gostamos de ter um feedback/elogio do nosso chefe, ou não? Pois é, o nosso software também é sentimental. A integração contínua é a maneira mais prática de dar um feedback instantâneo para nosso sistema e, sem ser egoístas, para nós mesmos.

Funciona assim, faço meu código, depois dou o commit no repositório, o processo de build é iniciado, os testes são executados e, se houver falhas, elas serão expostas. Simples, rápido e sem dor. Opa, vão ficar sabendo que comitei sem rodar os testes, isso não é legal!!! Mas é CLARO que é legal meu amigo, já imaginou se você envia esse seu código para homologação e na hora do usuário testar ele não funciona ou se vai direto para produção? Seria muito pior, não?

Para nosso exemplo, vamos usar um repositório no Github. O Travis-CI irá escutar este repositório e sempre que houver mudança executará o processo de build e fará o deploy no Heroku.

Leia Mais

AngularJS

AngularJS: Diretiva para controle de acesso

Fala galera!

Semana passada, recebi um e-mail perguntando se eu tinha algum exemplo, com AngularJS, para controlar as permissões de acesso do usuário aos botões da aplicação. Pensei: porquê não juntar a fome com a vontade de comer e blogar a respeito? Então vamos nessa!

 

Diretiva

Antes de colocar a mão na massa, é importante saber que o melhor lugar para se manipular o DOM é dentro de uma directive. Isso se deve ao comportamento do Angular HTML Compiler. Pode parecer meio estranho falar sobre compilar, mas é graças ao HTML Compiler que podemos anexar comportamento a qualquer elemento HTML ou adicionar atributos.

Uma dica importante refere-se a normalização dos nomes das diretivas. O AngularJS geralmente utiliza camelCase para normalizá-las (exemplo: ngRepeat e ngModel). Porém, temos que lembrar que o HTML não é case sensitive. Por esse motivo, usamos letras minúsculas e mais um traço separando as palavras (ng-repeat e ng-model) para utilizar as diretivas no DOM .

O nome da nossa diretiva de acesso será “permissaoAcesso. Ela terá a restrição de ser utilizada unicamente como atributo em um elemento do DOM. E é aqui que pode surgir a dúvida: “mas Gabriel, tem como restringir como a diretiva vai ser utilizada?”

A resposta é sim. As diretivas possuem a opção de restringir como serão usadas. Essa opção é a restrict  e ela obedece os seguintes parâmetros:

  • A: só pode ser utilizada como atributo.
  • E: só pode ser utilizada como elemento.
  • C: só pode ser utilizada como classe (class) css.
  • M: só pode ser utilizada como comentário.

 

Mas e se eu quiser usar como elemento e atributo, como faço? Aí é só mesclar com as letras que você desejar, por exemplo ‘AECM’, que libera o uso da diretiva em todas as opções mencionadas acima.

Por default, a opção restrict será ‘AE’. Ou seja, poderá ser utilizada como elemento e atributo.

Leia Mais

AngularJS

AngularJS: Diferenças entre $apply, $timeout, $evalAsync e $digest

Fala galera, beleza?

Após alguns meses sem nenhuma novidade por aqui, estou tentando retornar a rotina de publicações… A ausência foi por um bom motivo: estive desenvolvendo, e ainda estou, um projeto social chamado Doe Caridade. Mas em breve eu volto a falar sobre ele, pois pretendo abrir o código fonte.

O post de hoje é sobre as diferenças entre o $apply, $timeout, $evalasync e $digest. Para entendermos um pouco mais como o AngularJS funciona é importante conhecê-las e saber como e quando usá-las.

$apply()

Algumas vezes é necessário executar operações fora do escopo do AngularJS. No post sobre Socket.io e AngularJS: Comunicação em tempo real, por exemplo, falei sobre a execução do $apply para poder atualizar o escopo do AngularJS todas as vezes que o frontend recebia dados do backend através do socket.io.

Leia Mais

%d blogueiros gostam disto: