Bom galera sou novato em JS e outro dia tive uma duvida em uma pagina de um site que estava criando que era de como eu colocaria duas casas depois da virgula em JS, mas não encontrei algo com clareza sobre o assunto, então perguntei para o Suissa, que me disse que era só usar o toFixed(2), onde o “2” simboliza quantas casas depois da virgula, ou ponto decimal!

o código que eu estava fazendo é este, é um cardápio de um site para o meu TCC de Informática para Internet, que estamos desenvolvendo:

Para quem está iniciando assim como eu e tiver essa duvida espero que isso possa de alguma forma ajudar! Grande abraço a todos!

facebooktwittergoogle_plusredditpinterestlinkedin

Há um tempo atrás recebi o livro da [PacktPub](http://www.packtpub.com/advanced-express-web-application-development/book) para fazer um review de uma das tecnologias que mais adoro e uso atualmente, [Express](http://expressjs.com/).

Esse tipo de review é um pouco diferente dos normais, espero que você curta.

Inicialmente o livro explica uma breve história sobre o Express e explica que o livro vai usar TDD, ou seja, criará os testes antes de criar a funcionalidade, após isso o livro mostra descreve em formato de ações o que cada funcionalidade do projeto precisa ter. Como por exemplo:

Feature: Create project
As a vision user
I want to create a new project
So that I can monitor the activity of multiple repositories

Depois explica rapidamente como instalar o [Node.js](http://nodejs.org/) e como criar o package.json para utilizar o npm install para instalar o Express. Após isso já iniciamos com os testes e para isso ele explica como instalar o [Mocha](http://visionmedia.github.io/mocha/), framework de testes para [TDD](http://pt.wikipedia.org/wiki/Test_Driven_Development) e [BDD](http://pt.wikipedia.org/wiki/Behavior_Driven_Development), e o [Supertest](https://github.com/visionmedia/supertest), framework de testes próprio para [APIs](http://en.wikipedia.org/wiki/Api) [REST](http://en.wikipedia.org/wiki/Representational_state_transfer).

De ante mão ele cria o teste inicial da API e depois vai para o código, que retorna 200/OK, demonstrando como separar o código em diferentes arquivos para uma melhor organização do projeto e melhor testabilidade do código.
Apresentando também o conceito de Code Coverage, brevemente, e demonstrando como utilizar o JSCoverage. Até aí nada de novo, porém depois o livro apresenta uma ferramenta que eu ainda não conhecia, Nconf que é uma ferramenta de configuração que facilita a criação de configurações para vários ambientes.

Apresenta o conceito de middleware e alguns exemplos como: 404, Logging e novamente mostra uma ferramenta que eu não conhecia [Winston](https://github.com/flatiron/winston).

O [Winston](https://github.com/flatiron/winston) é uma biblioteca de Logging assíncrono que suporta diversos tipos de persistência.

Depois o livro chega em um dos projetos mais usados atualmente na comunidade Node.js, o Grunt, apesar de termos diversas opções o Gulp estar tomando um bom espaço, ainda é o mais utilizado nos projetos do Github.

Para quem ainda não conhece o Grunt, ele é um automatizador de tarefas para Node.js, com isso demonstra como colocar os testes como tarefas do [Grunt](http://gruntjs.com/), para automatizar os testes e cobertura de código(code coverage).

Esse foi o primeiro capítulo o qual deu a base para iniciar um projeto real. No segundo capítulo entramos em algo que pessoalmente adoro, [MongoDb](http://www.mongodb.org/) com [Mongoose](http://mongoosejs.com/).

Após criar os models, rotas e seus testes para todas as features, ele mostra como validar via param middleware.

No Capítulo 3 o livro aborda os templates, especificamente [Handlebars](http://handlebarsjs.com/), uma pena não terem usado Jade, mas tudo bem :p

Demonstra o [Bower](http://bower.io/) como gerenciador de pacotes do frontend, abordando também o [Backbone](http://backbonejs.org/) como sistema de Javascript para o frontend.

Chegando em uma parte que acho deveras interessante, no capítulo 5, Real Time. Utilizando [Redis](http://redis.io/) e [Socket.io](http://socket.io/) o sistema conseguirá uma performance melhor, dependendo do caso obviamente.

Uma área que é muito importante é abordada no capítulo 6, Segurança. Explicando como utilizar o [Passport](http://passportjs.org/) que é um middleware de autenticação, com testes de aceitação utilizando [Zombie.js](http://zombie.labnotes.org/) e [Cucumber](http://cukes.info/). Não esquecendo de explicar como usar: https, cross-site request forgery, helmet.

Até o momento estou achando o livro bem completo, ainda mais chegando agora no capítulo 7, onde ele aborda [Escalabilidade](http://pt.wikipedia.org/wiki/Escalabilidade). Inicialmente demonstra como escalar as sessões do Express utilizando [Redis](http://redis.io/), [Socket.io](http://socket.io/) com Redis, expicando até como escalar horizontalmente separando seu sistema em sub-sistemas como: core, web, api e worker.
Depois mostrando como escalar verticalmente com [Cluster](http://nodejs.org/api/cluster.html), que proporciona a execução de mais de um processo de Node.js por processador multiprocessado. Balanceando a carga com [Hipache](https://github.com/dotcloud/hipache).

Chegando no derradeiro e último capítulo, o assunto abordado é Produção. Para fechar com chave de ouro o livro aborda error handling, domains, e crash-only design. Sessões em Redis, SSL, Cache, Minificação, Compressão e Logging.

Sei que normalmente um review não é feito dessa forma mas para mim ficou mais explicado o que é passado no livro dando a você uma liberdade maior de escolha.

Agora quero saber de você caro leitor é melhor esse formato ou um formato mais comum como esse [Review do livro Git – Guia Prático](http://www.luiztiago.com/post/70305979138/review-do-livro-git-guia-pratico)
ps: esse post foi replicado aqui também http://nomadev.com.br/review-advanced-web-application-development-with-express/

 

facebooktwittergoogle_plusredditpinterestlinkedin

 

   Utilizando o generator-angular (https://github.com/yeoman/generator-angular) para criar as minhas aplicações com o AngularJS, passei por uma necessidade bem peculiar. Se você tem uma aplicação CRUD com 4 controllers principais e cada um com os seus métodos específicos, se for se basear no exemplo que é utilizado na documentação do site oficial do projeto (angular-phonecat: https://github.com/angular/angular-phonecat) você vai basicamente quebrar o conceito de DRY: Don’t Repeat Yourself, criando mais de 4 controllers e repetindo o seu código!

 

   Uma solução simples seria a de utilizarmos as rotas ao nosso favor, como frameworks de linguagens como PHP, Python, Ruby e outros fazem por padrão. Como assim? Vamos pensar que estamos acessando a url “http://www.meusite.com.br/products/add”, ok? Comumente a solicitação será feita para o controller “Products” e o método será o “add()” se pensarmos em uma arquitetura baseada em MVC. Já pensou como seria bacana se pudéssemos fazer desta forma utlizando o AngularJS? Pois podemos!

Fiz uma modificação no arquivo “angular-route.js” que habilita a definição dos controllers via parâmetros de rotas ( ou $routeParams ) e sua sintaxe fica simples. Primeiro vamos inserir os arquivos do repositório modificado no projeto (https://github.com/willmendesneto/my-angular-route). Normalmente se tivéssemos que escrever as rotas no arquivo app.js para acessarmos os controllers do projeto “phonecat” ela estaria neste formato:

$routeProvider.

     when(‘/phones’, {

       templateUrl: ‘partials/phone-list.html’,

       controller: ‘PhoneListCtrl’

     }).

     when(‘/phones/:phoneId’, {

       templateUrl: ‘partials/phone-detail.html’,

       controller: ‘PhoneDetailCtrl’

     }).

     otherwise({

       redirectTo: ‘/phones’

     });

Agora pense uma coisa: o controller PhonecatDetailsCtrl necessariamente não precisaria existir, já que trata-se de uma visualização dos dados de um telefone específico.

$routeProvider.
.when(‘/:section/:id’, {

         templateUrl: function(req) {

             return ‘views/’ + req.section + ‘/details.html';

         },

         controller: function(req) {

             var str = ‘-‘ + req.section,

                 controller = str.replace(/[-_]([a-z])/g, function (m, w) {

                 return w.toUpperCase();

             }) + ‘Ctrl';

             return controller;

         },

         method: ‘details’,

         autoRoute: true

     })

Na definição do controller, ele retorna o resultado do parâmetro passado pela url devidamente tratado. Se a sua url for “http://www.meusite.com.br/products/1” ele vai inserir o controller “ProductsCtrl” e o controller e você poderá chamar o método “details()” facilmente. Isso abre um leque de possibilidades, pois você agora pode ter “N” controllers com este comportamento e todos eles serão receptados e inseridos por esta rota! E caso tenha que fazer alguma em específico você pode criar as rotas normalmente antes dela.

Neste repositório ( https://github.com/willmendesneto/angular-architecture ) tem um exemplo (simples, bem simples) de um CRUD utilizando AngularJS + Firebase usando o angular-route modificado. Os métodos são chamados no controller responsável via routeParams também. Daí você pode pensar no melhor formato e adequar a sua aplicação.

Obrigado e até mais!

facebooktwittergoogle_plusredditpinterestlinkedin

Artigo traduzido. Postado originalmente em tutorialzine.com em 30/09/2013

rsz_angularjs_5_exemplos

Você provavalemente ouviu sobre AngularJS – o empolgante framework open source desenvolvido pela Google, que muda a maneira que pensamos sobre as aplicações web. Temos muita coisa escrita sobre isso, mas eu ainda não encontrei algo que fosse escrito para desenvolvedores que preferem exemplos rápidos e práticos. Isto muda hoje. Abaixo você irá encontrar o básico da construção de blocos de aplicativos Angular – Models (Modelos), Views (Vistas), Controllers (Controladores), Services (Serviços) e Filters (Filtros) – explicados em 5 exemplos práticos que você pode editar diretamente no navegador*. Se você preferir abri-los no seu editor de códigos favorito, pegue o arquivo zip.


*Notas do tradutor: Caso deseje fazer as alterações no navegador (ao mesmo tempo em que se lê o artigo), vá para o artigo original. Irei deixar também disponíveis no CodePen os códigos com os comentários traduzidos.

  • Faça o download de todos os códigos fonte dos exemplos com os comentários em português AQUI!

Complementar a este artigo, leia o Guia Definitivo para se aprender AngularJS em um dia , pois nele encontramos melhores práticas para o desenvolvimento das aplicações Angular. Se você iniciar por este tutorial mais direto, recomendo que você os veja e depois refaça todos os exemplos embasados nas melhores práticas mostradas no Guia Definitivo. Ex: criar um namespace para aplicação, evitando as variáveis globais.

Link para arquivo zip dos códigos originais aqui.


O que é AngularJS?

De forma básica, AngularJS é um framework que liga seu HTML (views) com objetos JavaScript (models). Quando seus modelos mudam, a página é atualizada automaticamente. O contrário também é válido – um modelo, associado com um campo de texto, é atualizado quando o conteúdo do campo é alterado. O Angular manuseia toda essa ‘cola’ do código, então você não precisa atualizar manualmente o HTML ou escutadores (listeners) para os eventos, como você faz com jQuery. Como aliás, nenhum destes exemplos incluem jQuery!

Para usar o AngularJS, você tem que incluí-lo na sua página antes do fechamento da tag body. Google’s CDN é recomendado para um carregamento mais rápido:

O AngularJS lhe dá um grande número de Diretivas que permitem a associação de elementos HTML com os Modelos. Elas são atributos que iniciam com ng- e podem ser adicionadas a qualquer elemento. O mais importante atributo que você deve incluir em qualquer página, se você for usar o Angular, é o ng-app:

Isso pode ser adicionado a um elemento que engloba o resto da página, como o elemento body ou uma div externa. O Angular olha para ele quando a página é carregada e automaticamente analisa todas as Diretivas que enxerga nos elementos filhos. Chega de teoria! Agora vamos ver algum código.

1. Menu de Navegação

Para o primeiro exemplo, nós vamos construir um menu de navegação que destaca a entrada selecionada. O exemplo usa somente Diretivas do Angular, e é a mais simples aplicação possível de uso do framework. Click em no botão “Edit” para ver o código fonte. Ele está pronto para experimentação!

  • Para testar no browser, vá para o artigo original
  • Link para codepen com comentários traduzidos > aqui 

No código acima, nós estamos usando as Diretivas Angular para definir e ler a variável ativa. Quando isso muda, causa no HTML uma atualização automática. Na terminologia Angular, esta variável é chamada um modelo. Está disponível para todas as diretivas no escopo atual, e pode ser acessada nos seus controladores (mais sobre estes no próximo exemplo). Se você já utilizou templates JavaScript antes, você é familiar com a sintaxe {{var}}. Quando o framework ve esta string, ele a substitui com o conteúdo da variável. Essa operação é repetida toda hora que a variável for modificada.

2. Editor Inline

Para nosso segundo exemplo, nós vamos criar um simples editor inline – clicando no parágrafo vamos mostrar um tooltip (dica) com um campo de texto. Nós vamos usar um controlador que vai inicializar os modelos e declarar 2 métodos para alternar a visibilidade do tooltip. Controladores são funções regulares do JavaScript que são executadas automaticamente pelo Angular, e que são associadas com sua página usando a diretiva ng-controller:

  • Para testar no browser, vá para o artigo original
  • Link para codepen com comentários traduzidos > aqui

Quando a função controladora é executada, ela pega o objeto especial $scope como um parâmetro, adicionando propriedades ou funções para torná-los disponíveis para o View. Usando o ng-model ligado no campo de texto, faz com que o Angular atualize esta variável quando o valor do campo muda (fazendo com que re-renderizemos o parágrafo com o valor).

3. Formulário de Pedido

Neste exemplo, nós vamos criar um formulário com um preço total atualizado em tempo real, usando outra das úteis propriedades do Angular – os Filtros. Filtros permitem que você modifique os modelos e possa os encadear juntos usando o caracter barra vertical | . No exemplo ebaixo, eu estou usando o currency filter, para tornar um número em um preço corretamente formatado, completo com um símbolo dólar e centavos. Você pode facilmente criar seus próprios filtros, como você verá no exemplo #4.

  • Para testar no browser, vá para o artigo original.
  • Link para codepen com comentários traduzidos > aqui

 

A ligação ng-repeat (docs) é outra propriedade útil do framework. Ela permite que você faça um loop em um array de item e gere um marcador para eles. Quando um item é deletado, isso é atualizado de forma inteligente.

Nota: Para uma versão completa, veja este tutorial, que foi baseado neste outro.

4. Busca Instantânea

Este exemplo vai permitir aos usuários filtrarem uma lista de itens digitando dentro de um campo de texto. Este é um outro ponto onde o Angular brilha, e é um perfeito caso de uso para escrever um filtro customizado. Para fazer isso entretanto, nós primeiro temos que transformar nossa aplicação em um módulo. Módulos são uma forma de se organizar aplicações JavaScript dentro de componentes auto-suficientes que podem ser combinados de formas novas e interessantes. O Angular depende desta técnica para o isolamento do código e requer que sua aplicação siga isso antes de criar um filtro. Há apenas duas coisas que você precisa fazer para tornar sua aplicação um módulo: 1. Usar a função angular.module (“name”, []) chamada em seu JS. Isso irá instanciar e retornar um novo módulo; 2. Passar o nome do módulo como valor da diretiva ng-app. Criando um filtro que é tão simples com chamar o método filter () no objeto retornado pelo módulo angular.module (“name”, [])

  • Para testar no browser, vá para o artigo original.
  • Link para codepen com comentários traduzidos > aqui 

Filtros seguem a filosofia do AngularJS – cada pedaço de código que você escreve deve ser auto-suficiente, testável e reutilizável. Você pode usar este filtro em todas as suas Views e até mesmo combiná-lo com outros através do encadeamento.

5. Grade Alternável

Outra interação UI (user interface) popular é mudar entre modelos diferentes de layout (grid ou lista) *grid = grade* com o click de um botão. Isto é muito fácil de se fazer no Angular. Em adição, eu vou introduzir outro importante conceito – Services. Eles são objetos que podem ser usados em sua aplicação para se comunicar com o servidor, uma API ou outra fonte de dados. No nosso caso, nós vamos escrever um serviço que comunica com API do Instagram e retorna um array com as mais populares fotos do momento. Note que para este código funcionar, teremos que incluir um arquivo adicional Angular.js na página:

Isso inclui o módulo ngResource para um simples trabalho com API’s AJAX (o módulo é exposto como a variável $resource no código). Este arquivo é automaticamente incluso no editor abaixo.

  • Para testar no browser, vá para o artigo original
  • Link para codepen com comentários traduzidos > aqui

 

Services são totalmente auto-suficientes, tornando possível escrever diferentes implementações sem que isso afete o resto do seu código. Por exemplo, durante o teste, você pode preferir retornar um array hard-coded (com código inserido diretamente no seu programa) para acelerar seus testes.

Leitura Adicional

Se você tiver alcançado este ponto, você já compreendeu o básico do desenvolvimento com AngularJS. Entretanto, há muito mais a se aprender se você quiser se tornar um profissional. Aqui temos uma lista de recursos que vão ajudá-lo nesta questão:

facebooktwittergoogle_plusredditpinterestlinkedin

Artigo traduzido. Postado originalmente em toddmotto.com em 02/10/2013

rsz_angularjs

O que é AngularJS?

Angular é um framework client-side MVC/MVVM feito em JavaScript, essencial para modernas ‘single page web applications – SPA’ (aplicações de uma página) e até mesmo sites. É um grande salto para o futuro do HTML e para o que o HTML5 traz, e é um sopro de ar fresco quando se está lidando com a web moderna. Este post é um curso completo ‘do início ao fim’, feito a partir de minhas experiências, conselhos e melhores práticas, aprendidas usando-o.

Terminologia

Angular tem uma curva de aprendizagem de curto prazo, mas devemos nos familiarizar com a terminologia e “pensamento MVC”. MVC significa Model-View-Controller (Modelo-Visão-Controlador).

MVC

Você provavelmente ouviu sobre MVC, usado em várias linguagens de programação com o sentido de estruturação/arquiteturação de aplicações/softwares. Aqui está o significado de cada uma das partes:

Model (Modelo): é a estrutura de dado atrás de uma parte específica da aplicação, usualmente portada em JSON. Leia sobre JSON antes de iniciar com Angular, pois é essencial para a comunicação do seu servidor e ‘view’. Por exemplo, um grupo de ‘IDs de usuário’ pode seguir o seguinte modelo:

Você vai então pegar esta informação ou do servidor via XHR (XMLHttpRequest), com jQuery você conhece isto como o método $.ajax e com os envólucros (wraps) do Angular como $http, ou isto vai ser escrito no seu código enquanto a página é parseada (de um banco de dados). Você pode então enviar atualizações para seu modelo e pegá-las de volta.

View (Visão): O ‘view’ é simples, ele é seu HTML e/ou saída renderizada. Usando um framework MVC, você irá pegar os dados do ‘Model’ que atualiza seu ‘View’ e mostrar as informações relevantes em seu HTML.

Controller (Controlador): Ele faz o que diz na embalagem, controla coisas. Mas que coisas? Dados. ‘Controllers’ são seu acesso direto do servidor para o ‘view’, seu intermediário, atualizando os dados em tempo real via comunicadores entre o servidor e o cliente.

Criação de Um Projeto AngularJS (mínimo essencial)

Primeiro, nós precisamos de fato configurar o essencial para um projeto Angular. Há certas coisas para se observar antes de começarmos, que geralmente consiste em uma declaração ng-app para definir sua aplicação, um Controller para conversar com sua ‘View’, e alguma ligação DOM e inclusão do Angular. Aqui temos o mínimo essencial:

Um pouco de HTML com declarações ng-*:

Um módulo Angular e um Controlador:

Antes de aprofundarmos, nós precisamos criar um módulo Angular o qual toda nossa lógica será acoplada. Há várias formas de declarar módulos, e você pode encadear toda sua lógica assim (Eu não gosto deste método):

Criar um módulo global provou ser a melhor maneira em projetos Angular que eu trabalhei. A falta de ponto e vírgula e o fechamento acidental do encadeamento é notoriamente contraproducente (improdutivo) e frequentemente nos leva a erros de compilação desnecessários. Faça assim:

Cada novo arquivo que eu criar simplemente pego o namespace e automaticamente estamos conectados com a aplicação. Sim, eu estou criando novos arquivos para cada Controlador, Diretiva, Factory e tudo mais (você vai me agradecer por isto). Concatene-os e envie o script único no DOM dinamicamente usando algo como Grunt.

Controladores

Agora que você compreendeu o conceito do MVC e a configuração básica, vamos verificar a implementação do Angular e como você pode trabalhar com Controladores.

Pegando o exemplo acima, nós podemos fazer um ‘baby-step’ (passo de bebê) em como inserir alguns dados no DOM a partir de um controlador. O Angular usa estilo de template com sintaxe {{ handlebars }} para conversar com o seu HTML. O HTML (preferencialmente) não deve conter textos físicos ou pesados códigos, para que se faça o melhor do Angular. Aqui temos um exemplo de inserção de uma simples String no DOM.

E o resultado ao vivo: http://jsfiddle.net/toddmotto/mN7QB/light/

O regra chave aqui é o conceito de $scope, que você irá ligar com todas as suas funções dentro dos controladores específicos. O $scope se refere ao atual elemento/área do DOM (não, não é o mesmo que this), e encapsular um escopo inteligente e capaz de manter os dados e a lógica completamente situados dentro dos elementos. Isso traz ao JavaScript escopos públicos/privados para o DOM, o que é fantástico.

O conceito de $scope pode ser assustador no começo, mas é a sua conexão com o DOM com o servidor (e dados estáticos se você também os tiver)! A demonstração lhe deu a ideia básica de como você pode inserir dados no DOM.

Vamos conferir uma estrutura mais representativas em que teremos hipotéticamente dados recuperados do servidor para mostrar detalhes do login de usuários. Por agora vou usar dados estáticos, mais a frente irei lhe mostrar como buscar dados JSON dinâmicos.

Primeiro vamos configurar o JavaScript:

Agora portando isso para o DOM para mostrarmos estes dados:

Resultado: http://jsfiddle.net/eo_op/xJdWk/

É importante lembrar que os Controladores são para dados somente, e funções (funções de evento também) que conversem com o servidor e insiram/busquem dados JSON. Manipulação DOM não deve ser feita aqui, então deixe seu kit jQuery de fora. Diretivas são para manipulação do DOM, e será o próximo tópico.

Dica profissional: por toda a documentação do Angular (até o momento que escrevo isso), seus exemplos mostram essa forma de se criar Controladores:

… NÃO FAÇA ISSO!!! Isto expõem todas as suas funções no escopo global e não as deixam ligadas de uma boa maneira com sua aplicação. Também faz com que você não consiga minificar seu código ou faça testes facilmente. Não polua o namespace global e deixe os controladores DENTRO de sua aplicação.

Diretivas

Uma diretiva (confira meu post em Diretivas a partir de scripts/plugins existentes) em sua forma mais simples é um pequeno pedaço de HTML modelado, preferencialemente usado múltiplas vezes durante a aplicação onde é necessária. É uma maneira simples de inetar o DOM na sua aplicação sem nenhum esforço, realizando interações DOM personalizadas. Diretivas não são simples no entando, há uma incrível curva de aprendizado para conquistá-las totalmente, porém a próxima etapa irá deixá-lo pronto para começar.

Então para o quê as diretivas são usadas? Vários coisas, incluir componentes DOM, por exemplo abas ou elementos de navegação – realmente depende do que sua aplicação faz uso da interface do usuário (UI – User Interface). Se você já brincou com ng-show ou ng-hide, elas são diretivas (embora não injetem no DOM).

Para este exercício, irei deixar isso realmente simples e criar um tipo de botão customizado (chamado customButton) que injeta alguma marcação que eu odeio do ter que ficar escrevendo. Há várias maneiras de definir Diretivas no DOM, elas podem se parecer com isso:

Eu prefiro usá-las como um atributo, elementos customizados estão vindo no futuro do HTML5 junto com Web Components, mas os relatórios do Angular com eles mostram vários erros em navegadores antigos.

Agora que você sabe como declarar e onde as Diretivas são usadas/injetadas, vamos criar o botão personalizado. Novamente, eu vou ligar o namespace global da minha aplicação como myApp, sendo esta a diretiva na sua forma mais simples:

Eu defini minha diretiva usando o método.directive(), e a chamei ‘customButton’. Quando você capitaliza uma letra no nome da diretiva, ela deve ser separada com hífen no DOM (como mostrado acima).

Uma diretiva simplesmente retorna a si mesma como um objeto (Object) e assume um número de parâmetros. O mais importante para mim, de se dominar primeiro é, restrict, replace, transclude, template e templateUrl, e para nós a propriedade link. Vamos adicionar as outras propriedades:

Resultado: http://jsfiddle.net/toddmotto/VC4H2/light/

Inspecione o elemento e veja as marcações adicionais que foram injetadas. Sim, eu sei, não há icone incluso por que eu não inclui o ‘Font Awesome’, mas você viu como funciona. Agora vamos para as explicações das propriedades das Diretivas:

restrict: isso remonta a utilização, como iremos restringir o uso dos elementos? Se você estiver usando um projeto que necessite dar suporte ao IE legado, você provavelmente precisará de declarações de atributos/classes. Restringindo com ‘A’ significa que você restringiu isso como atributo. ‘E’ para elemento, ‘C’ para classe e ‘M’ para comment. Como padrão temos ‘EA’. Sim, você pode restringir para múltiplos casos de uso.

replace: Isto substitui a marcação no DOM que define a diretiva, como usado no exemplo, você irá notar como o DOM inicial é substituido com o ‘template’ (modelo) da Diretiva.

transclude: Simplificando, usando transclude você permite que conteúdo existente no DOM seja copiado dentro da diretiva. Você verá as palavras ‘”Click me” have “moved”‘ dentro da Diretiva quando ela for renderizada.

template: Um template (como acima) permite que você declare uma marcação a ser injetada. É uma boa ideia usar isto para minúsculo pedaços de HTML somente. Templates injetados são todos compilados pelo Angular, isto significa que você pode declarar as ‘handlebar template tags’ {{ }} dentro deles também para ligação.

templateUrl: Similar ao template, mas mantido em seu próprio arquivo ou tag script. Você pode fazer isso para especificar um modelo de URL, que você vai querer usar para manipular pedaços de HTML que requerem manter-se em seu próprio arquivo, somente especificando o caminho e nome do arquivo, preferencialmente mantidos dentro dos próprios diretóriostemplates:

E dentro do seu arquivo(nome do arquivo não é sensitivo a todos):

O que é realmente bom em se fazer isso. é que o navegador irá efetivamente cachear o arquivo HTML, bravo! A outra alternativa que não utiliza o cache é declarar o template dentro da tag script:

Você irá dizer ao Angular que há um ng-template e irá dar a ele um ID. O Angular irá então buscar pelo ng-template ou o arquivo *.html, então seja qual for sua preferência. Eu prefiro criar arquivos *.html por serem fáceis de lidar, melhorarem o desempenho e manter o DOM muito limpo, pois você pode acabar com 1 ou 100 diretivas, e irá querer ser capaz de navegar entre elas facilmente.

Serviços (Services)

Serviços geralmente são um ponto confuso. A partir de experiência e pesquisa, eles nos dão mais um padrão de projeto estilizado do que diferenças com mais funcionalidade. Você deve usar os Services para singletons, e Factories para funções mais complexas como Objetos Literais e casos de uso mais complicados.

Aqui temos um exemplo de Service que multiplica dois números:

Você pode então usar um Controlador assim:

Sim, multiplicação é muito fácil e não precisa de um Service, mas você entendeu a essência.

Quando você criar um Service (ou Factory), você vai precisar de usar a injeção de dependência para dizer ao Angular que ele precisa ligar seu novo serviço – caso contrário você terá um erro de complicação e seu Controlador irá quebrar. Você deve ter notado na uma parte function ($scope) dentro da declaração do Controlador agora, e isso é a simples injeção de dependência. Você também irá notar [‘$scope’] antes da function ($scope), irei voltar nisso mais tarde. Aqui está como usar injeção de dependência para dizer ao Angular que você precisa do Service:

Factories

Vindo dos Services os Factories se tornam mais simples, nós podemos criar Objetos Literais dentro de um Factory ou simplesmente fornecer métodos mais profundos:

Aqui eu estou criando um wrapper(empacotador) para XMLHttpRequest(XHR) do Angular. Depois da injeção de dependência dentro do Controlador, o uso é simples:

Se você quiser consultar o servidor para mudanças, você pode então configurar Server.poll(jsonPoll), ou talvez se você estiver usando um Socket você pode configurar Server.socket(jsonSocket). Isso abrirá portas para você modularizar código assim como criar ferramentas para você usar e manter o código dentro dos Controladores minimamente.

Filters (Filtros)

Filters são usados em conjunto com arrays de dados e também saídas de loops. Se você estiver em um loop de dados e quiser filtrar coisas específicas, você está no lugar certo, você pode também usar os Filters para filtrar o que um usuário escreveu dentro de um input por exemplo. Temos algumas formas de user os Filters, dentro dos Controladores ou como um método definido. Aqui está a utilização por método, que você pode usar globalmente:

Uso no DOM:

Saída: http://jsfiddle.net/toddmotto/pmh4s/light/

Utilizando dentro de um ng-repeat:

E aqui temos um exemplo rápido real de um Filter dentro de um Controlador:

E seu uso dentro de um ng-repeat:

Saída: http://jsfiddle.net/toddmotto/cZbCf/light/

Essa é a parte principal atrás do AngularJS e sua API, mas estamos apenas na parte rasa sobre o assunto, porém isso já é mais que suficiente para você começar a construir sua aplicação com Angular.

Two-way data-binding (Duas vias de ligação de dados)

Quando eu ouvi sobre two-way data-binding (duas vias para ligação de dados), eu não entendi realmente o que isso seria. Two-way data-binding é melhor descrita como um ciclo completo de sincronismo de dados: atualiza o Model e atualiza o View, atualiza o View e atualiza o Model. Isso significa que o dado se mantém sincronizado sem precisar de exageros. Se eu ligar um ng-model com um input e começar a escrever, isso criará (ou atualizará se já existente) um modelo ao mesmo tempo.

Aqui eu criei um input e o liguei ao modelo chamado ‘myModel’, assim eu posso então usar a sintaxe de chaves para refletir este modelo e ele será atualizado no View no mesmo momento:

Resultado: http://jsfiddle.net/toddmotto/qrr3q/light/

XHR/Ajax/$http chamadas e ligação JSON

Você pegou a ideia quando começamos a inserir dados para o $scope, e uma noção superficial de como os Models e two-way data-binding funcionam, então agora é hora de simular alguma chamada XHR real com um servidor. Para websites, isto não é necessário se você tiver uma requisição Ajax específica, isso é principalmente focado em levar dados para uma aplicação web.

Quando você está desenvolvendo localmente, você possivelmente está usando algo como Java, ASP, .NET, PHP ou qualquer outra coisa que rode em um servidor local. Se você estiver se comunicando com um banco de dados local ou realmente usando o servidor como uma API para comunicar-se com outro recurso, usaremos a mesma configuração.

Digite ‘dollar http’. Seu melhor amigo a partir de agora. O método $http é um belo wrapper do Angular para acessar dados do servidor, e de tão fácil você pode fazer isso de olhos fechados. Aqui temos um simples exemplo de uma requisição ‘GET’, que (você adivinhou) pega dados vindos do servidor. Sua sintaxe é muito parecida com jQuery por isso sua transição será bem suave:

O Angular então retorna algo chamado promise, que é uma maneira muito mais eficiente e legível de manusear os callbacks. Promises são encadeados nas funções em que são iniciados a partir da notação por ponto myPromise(). Como experado, nós recebemos respostas de erro ou sucesso.

Muito bom e legível. Aqui é onde nós fundimos a View com o servidor pela ligação a um Model ou atualizamos os dados do Model no DOM. Vamos assumir uma configuração e enviar um username ao DOM, via uma chamada Ajax.

Idealmente, nós devemos configurar primeiro um modelo para nosso JSON, que será transportado quando nós ligarmos nossos dados. Vamos deixá-lo simples, isso será como um ‘cara do back-end’ irá configurar como uma API irá alimentar sua aplicação, sendo por você esperado o seguinte:

Isso significa que iremos receber um Objeto retornado do servidor (com um apelido que chamaremos ‘dado’ [você verá que o dado é passado dentro dos nossos manuseadores promise]), e temos que entrar em dado.usuarioPropriedade. Dentro de dado.usuarioPropriedade, nós temos name e id. Acessá-los é fácil, nós precisamos de procurar por data.user.name que nós retornará ‘Todd Motto’. Agora vamos buscar isso!

O JavaScript (cheque as notações para saber o que está acontecendo aqui):

E agora no DOM, nós podemos fazer o seguinte:

Isso irá imprimir o username. Agora nós vamos ir além para entender “declarative data-binding” (ligação de dados declarativos) que é onde as coisas ficam realmente empolgantes.

Declarative Data-Binding (Ligação de Dados Declarativos)

A filosofia do Angular é criar HTML dinâmico que seja rico em funcionalidade e faça muitos trabalhos perfeitamente que você nunca experaria no lado do cliente da web. Isto é exatamente o que eles entregam. Vamos imaginar que nós fizemos uma requisição Ajax para pegar uma lista de emails e sua linha Assunto, dados foram enviados e nós queremos renderizá-los no DOM. Ai é onde os queixos caem diante o poder do Angular. Primeiro nós vamos precisar de configurar um Controlador para Emails:

Agora precisamos conectar isso dentro do nosso HTML. Aqui é onde nós vamos usar as ligações declarativas (declarative binding) para declarar o que a aplicação irá fazer para criar nosso primeiro pedaço de HTML dinâmico. Vamos usar a diretiva do Angular ng-repeat embutida, que vai iterar sobre os dados e renderizar uma saída sem absolutamente nenhum callback ou mudanã de estado, é tudo de graça:

Resultado: http://jsfiddle.net/toddmotto/TAVQc/light/

Eu também coloquei sorrateiramente um filtro de dados (data filter) para você poder ver como renderizar datas no padrão UTC.

Aprofunde na suite de diretivas ng-* do Angular para liberar todo o poder das ligações declarativas, pois lhe mostra como juntar os pontos do servidor do Model ao View e renderizar dados.

Funções de Escopo

Como continuação das ligações declarativas, funções de escopo são o próximo nível na criação de uma aplicação com alguma funcionalidade. Aqui temos uma função básica de deletar um de nossos dados no email:

Dica profissional:É importante pensar sobre deletar dados do Model. Você não está deletando elementos ou outra coisa real relacionada ao DOM, Angular é um framework MVC e vai manusear tudo isto para você com sua “two-way binding” (ligação de duas vias) e o mundo livre de callback, você somente precisa configurar seu código de forma inteligente para deixá-lo responder aos seus dados.

Ligar funções ao escopo também ocorre através das Diretivas ng-*, agora usaremos a Diretiva ng-click:

Esta é uma forma diferente para os manipuladores de click inline, por várias razões. Esse assunto será abordado em breve. Você vai ver que eu também estou passando o $index, e o Angular reconhece o item que você quer deletar (quanto código e quanta lógica salvas pra você!).

Resultado (delete alguns emails!): http://jsfiddle.net/toddmotto/BgZmt/light/

Métodos DOM Declarativos

Agora nós vamos entrar nos métodos DOM, eles são Diretivas e simulam funcionalidades no DOM que você tem normalmente que escrever mais códigos e lógicas para tal. Um grande exemplo disto pode ser um simples navegador que alterna (toggle). Usando ng-show e um simples ng-click configurados, nós podemos criar um perfeito “toggling nav”:

Aqui é onde entramos com MVVM, você irá notar que não um Controlador sendo introduzido aqui, nós entraremos nesta questão do MVVM em breve.

Resultado (vamos alternar!): http://jsfiddle.net/toddmotto/ZUyW5/light/

Expressões

Uma das minhas partes favoritas do Angular, a qual você usualmente usa JavaScript para fazer e escreve muito código repetitivo.

Você já fez isso?

Isso pode ser potencialmente um callback vindo de uma requisição GET, e você vai alterar o DOM baseado no estado do dado. Angular lhe dá isso gratuitamente também, e você será capaz de fazer isto inline sem escrever qualquer código JavaScript!

Isto irá atualizar a si mesmo dinamicamente sem callbacks como suas aplicações com polls/fetches de dados. Se não tiver dados, ele lhe dirá – se tiver dados, também. Temos muitos casos de uso para isso e o Angular manuseia todos automaticamente via ‘two-way binding’ (ligação de duas vias) magicamente.

Resultado : http://jsfiddle.net/eo_op/yPcwt/5/

Exibições Dinâmicas e Roteamento

A filosofia por trás das aplicações single-page (e também websites!). Você tem um header (cabeçalho), footer (rodapé), sidebar (barra lateral) e o conteúdo no meio magicamente injeta um novo conteúdo baseado na sua URL.

O Angular torna esta configuração leve de ser feita, o que chamamos de exibições dinâmicas. Exibições dinâmicas injetam Views específicas baseado no URL, através do $routeProvider. Uma simples configuração:

Você verá que ‘when’ (quando) a URL é ‘/’ (i.e. a raiz do site), você irá querer injetar o main.html. É uma boa ideia chamar sua View inicial main.html e não index.html pois você já tem uma página index.html na configuração da sua single page app. Adicionar mais Views baseadas na sua URL é muito simples:

Nós podemos então ter emails.html simplesmente carregado com nosso HTML que gerá nossa lista de email. Você cria uma aplicação muito sofisticada com pouco esfoço neste ponto.

Há muito mais sobre o serviço $routeProvider que é muito valioso de se conhecer, mas isto já irá lhe tirar da inércia. Coisas como interceptadores $http que irão disparar eventos quando uma chamada Ajax estiver em andamento, onde podemos mostrar alguns ‘spinners’ (símbolo de “carregando”) enquanto estamos carregando os novos dados.

Dados Estáticos Globais

O GMail manuseia muito destes dados iniciais escrevendo JSON dentro da página (click com o botão direito – Ver Código Fonte). Se você quiser colocar dados instantaneamentes na sua página, isto irá acelerar o tempo de renderizãção e o Angular vai iniciar rapidamente.

Quando desenvolvo nosso aplicativos, as tags Java são colocadas no DOM e quando renderizadas, o dado é mandado para o backend. [Eu tenho experiência zero com Java, então se você for perguntar isso, sim você pode usar qualquer linguagem no seu servidor]. Aqui vamos ver como escrever JSON na sua página e então passar isso para um Controlador para uso de ligação imediata:

Minha suposta tag Java vai então renderizar o dado enquanto a página analisa e o Angular vai renderizar seus emails instantâneamente. Somente alimente seus dados dentro de um Controlador:

Minificação

Vou falar um pouco sobre minificação de código Angular. Você provavelmente já experimentou um pocuo até este ponto e talvez passou seu código por um minificador – e talvez encontrou um erro!

Minificar seu código AngularJS é simples, você precisa de especificar seu conteúdo de injeção de dependências em um array antes da função:

Uma vez minificado:

Somente lembre-se de manter seus injetores na ordem que aparecem, ou provavelmente irá causar uma dor de cabeça para você e sua equipe.

Diferenças entre MVC e MVVM

Estamos fechando o gigantesco artigo sobre AngularJS, e vou sucintamente cobrir as diferenças do MVC/MVVM que o Angular tanto se orgulha:

MVC: fala com o Controlador, Mode-View-Controller

MVVM: encapsula ligações de dados declarativas que tecnicamente conversam entre si. Model-View-View-Model. O Modelo conversa com o View, e o View pode falar com o Model. A ‘two way data-binding’ do Angular permite que você os mantenha sincronizados sem que você precise fazer nada. Isto também lhe permite escrever lógica sem um Controlador!

Um rápido exemplo disto, você pode criar um ng-repeat sem um Controlador fornecendo dados:

Para um teste rápido tudo bem, porém eu sempre recomendo um Controlador quando as coisas se esclarecerem.

Resultado: http://jsfiddle.net/toddmotto/C9GHF/light/

HTML Web Components

Você vai provalmente ser apanhado nessa questão, mas o AngularJS permite que você crie elementos customizados:

Isso realmente leva a web para o futuro do HTML5. O HTML5 intrduziu os Web Components e o elemento, que o Angular usa hoje em dia. Web Components compreendem elementos customizáveis completamente com injeção dinâmica de JavaScript para população do View e isto é incrivelmente empolgante.

Comentários de Escopo

Eu penso que estes comentários são realmente uma bela adição ao nosso fluxo de trabalho, em vez de declarar pedaços de HTML com comentários deste tipo:

Quando introduzimos o Angular, comece a pensar sobre Views e Escopos, não o DOM! Escopos são de fato fechados, ou seja, a menos que você deliberadamente compartilhe os dados entre os controladores, seu dado está inacessível em outros lugares. Eu estabeleço minhas áreas de escopo e isso vem a ser uma real ajuda.

Debugando o AngularJS

Temos uma incrível extensão no Chrome que os garotos da Google recomendam para desenvolvimento e debugging (depuração) com o Angular, é chamada de Batarang e você pode pegá-la aqui

Code feliz =)

Leitura Adicional

Aprenda Como criar sua própria Diretiva a partir de um script customizado ou plugin.

facebooktwittergoogle_plusredditpinterestlinkedin

Artigo traduzido. Postado originalmente em JavaScript.is(Sexy) em 02/02/2013

rsz_closure

Closures são adoráveis e muito úteis: Eles permitem aos programadores programarem criativamente, expressivamente e concisamente. Eles são usados frequentemente no JavaScript e, não importa seu nível de habilidade no JavaScript, você sem dúvidas irá encontrá-los. Claro, closures podem parecer complexos e além do seu alcance, mas depois que você ler este artigo, os closures vão ser muito mais fáceis de se entender e mais atraentes para serem usados todo os dias quando você programar em JavaScript.

Este é um artigo curto ( e doce =] ) com os detalhes dos closures no JavaScript. Você deve estar familirializado com o Escopo de Variáveis JavaScript antes de começar essa leitura adicional, porque para se entender closures você deve entender o escopo de variáveis no JavaScript.

O que é um closure?

Um closure é uma função interior que tem acesso a variáveis de uma função exterior – cadeia de escopo. O closure tem três cadeias de escopo: ele tem acesso ao seu próprio escopo (variáveis definidas entre suas chaves), ele tem acesso as variáveis da função exterior e tem acesso as variáveis globais.

A função interior tem acesso não somente as variáveis da função exterior, mas também aos parâmetros dela. Note que a função interior não pode chamar o objeto arguments da função exterior, entretanto, pode chamar parâmetros da função externa diretamente.

Você cria um closure adicionando uma função dentro de outra função.

Um Exemplo Básico de Closures no JavaScript:

Closures são usados extensivamente no Node.js; eles são complicados no Node.js assíncrono, com arquitetura não bloqueante. Closures também são frequentemente usados no jQuery e em todo pedaço de código JavaScript que você lê.

Um Clássico exemplo de Closures no jQuery:

Regra dos Closures e Efeitos Colaterais

1. Closures tem acesso a variável das funções exteriores mesmo após o retorno da função exterior

Uma da mais importante e delicada característica dos closures é que a função interior continua tendo acesso as variáveis da função exterior mesmo após ela ter retornado. Sim, você leu corretamente. Quando funções no JavaScript executam, elas usam a mesma cadeia de escopo que estava em vigor quando foram criadas. Isso significa que mesmo depois da função exterior retornar, a função interior continua tendo acesso as variáveis da função exterior. Portanto, você pode chamar a função interior depois em seu programa. Este exemplo demonstra isso:

2. Closures armazenam referências para as variáveis da função exterior

Eles não armazenam o valor real. Closures ficam mais interessantes quando o valor da variável da função exterior muda antes que o closure seja chamado, e esta poderosa característica pode ser aproveitada de formas criativas, como este exemplo de variável privada primeiramente demonstrada por Douglas Crockford:

3. Closures que deram errado

Por causa dos closures terem acesso ao valor atualizado das variáveis das funções exteriores, eles podem também conduzir a erros quando a variável da função exterior muda com um loop for. Assim:

No exemplo anterior, quando a função anônima é chamada, o valor de i é 3 (a contagem do array e então seus incrementos). O número 3 foi adicionado ao uniqueID para criar 103 para TODOS os celebrityID. Então cada posição no array retornado obteve o id = 103, ao invés do valor pretendido 100, 101, 102.

A razão para isso acontecer foi porque, assim como nós discutimos no exemplo anterior, o closure (função anônima neste exemplo) teve acesso a variável da função exemplo por referência, não por valor. Então, igual ao exemplo anteriormente mostrado onde nós acessamos o valor atualizado da variável com o closure, neste exemplo, similarmente acessamos a variável i quando ela foi alterada, depois que a função exterior rodou o loop for inteiro e retornou o último valor, que foi 103.

Para consertar este efeito colateral (bug) nos closures, você pode usar uma Expressão de Função Imediatamente Invocada (IIFE – Immediately Invoked Function Expression), como no exemplo seguinte:

facebooktwittergoogle_plusredditpinterestlinkedin

Artigo traduzido. Postado originalmente em JavaScript.is(Sexy) em 31/01/2013

rsz_1hoist

Neste artigo, nós vamos aprender sobre escopo de variáveis e hoisting (hasteamento) no JavaScript e tudo sobre as idiosscincrasias (pecularidades) de ambos.

É imperativo que nós temos entendimento de como o escopo de variável e o hasteamento de variável funciona no JavaScript. Estes conceitos podem parecer simples, mas não são. Há algumas importantes sutilezas que nós devemos entender, se nós quisermos ser desenvolvedores JavaScript bem sucedidos.

Escopo de Variável

Um escopo de variável é o contexto em que a variável existe. Ele especifica onde e se você pode acessar uma variável.

Variáveis tem ou um escopo local ou um escopo global.

Variáveis Locais (Escopo Nível-Função [Function-Level])

Ao contrário da maioria das linguagens de programação, o JavaScript não tem um escopo em nível de bloco (escopo de variável envolvido por chaves); como alternativa, no JavaScript temos escopo por nível-função. Variáveis declaradas dentro de uma função são variáveis locais e são somente acessíveis dentro desta função ou por funções dentro da função. Veja meu post de Closures para saber mais em como acessar variáveis em funções exteriores a partir de funções interiores.

Demonstração de Escopo de Nível-Função

Sem Escopo Bloqueado por Nível

Se você não declarar suas variáveis locais, os problemas estarão próximos

Sempre declare suas variáveis locais antes de usá-las. Na verdade, você deve usar o JSHint para verificar seu código e checar erros de sintaxe e guias de estilo. Aqui está o problema em não declarar variáveis locais:

Variáveis locais têm prioridade sobre variáveis globais nas funções

Se você declarar uma variável global e uma variável local com o mesmo nome, a variável local terá prioridade quando você tentar usá-la dentro de uma função (escopo local):

Variáveis Globais

Todas as variáveis declaradas fora de uma função estão no escopo global. No navegador, que é onde estamos interessados como desenvolvedores front-end, o contexto global ou escopo é o objeto window (ou o documento HTML inteiro).

  • Qualquer variável declarada ou inicializada fora de uma função é uma variável global, e estará portanto disponível para toda a aplicação. Por exemplo:

É importante notar que todas as variáveis globais são anexadas no objeto window. Então, todas as variáveis globais que nós declaramos podem ser acessadas pelo object window como assim:

  • Se uma variável é inicializada (atribuída com um valor) sem primeiro ser declarada com a palavra chave var, ela é automaticamente adicionada ao contexto global sendo assim portanto uma variável global:

Demonstração de variáveis que estão no Escopo Global mesmo que pareça o contrário

Outro exemplo:

  • Variáveis setTimeout são executadas no Escopo Global

Note que todas as funções setTimeout são executadas no escopo global. Isso é um pouco complicado, considere isto:

  • Não polua o Escopo Global

Se você quiser ser um mestre JavaScript, o que certamente você quer ser (caso contrário você estaria assistindo ‘Honey Boo Boo’ agora), você tem que saber que é importante evitar a criação de muitas variáveis no escopo global, tal como isto:

Este é o código melhorado e a maneira correta de se evitar poluir o escopo global

Neste exemplo, a função fullName está no escopo global.


Hasteamento de Variáveis (Variable Hoisting)

Todas declarações de variáveis são hasteadas (levantadas e declaradas) no topo da função, se definida dentro da função, ou no topo do contexto global, se usada fora de uma função.

É importante saber que somente declarações de variáveis são hasteadas ao topo, não a inicialização de variáveis ou atribuições (quando para uma variável é atribuído um valor).

Exemplo de Hasteamento de Variável:

Declaração de Função Sobrescreve Declaração de Variável Quando Hasteada

Ambas declarações de funções e variáveis são hasteadas para o topo do escopo que as contém. Declaração de função tem prioridade sobre declaração de variável (mas não tem sobre atribuição de variável). Como foi dito acima, atribuição de variável não é hasteada, e nem atribuição de função. Como um lembrete, isto é uma atribuição de função: var myFunction = function () {}
Aqui temos um exemplo básico para demonstração:

É importante notar que as expressões de função, como o exemplo abaixo, não são hasteadas

No modo estrito, é um erro se você atribuir a uma variável um valor antes de declarar a variável. É uma ótima prática sempre declarar suas variáveis

facebooktwittergoogle_plusredditpinterestlinkedin

Grunt JS - Automação de Tarefas para o seu Workflow

Saudações! Neste artigo vou falar sobre uma ferramenta muito importante para tornar o ambiente de trabalho mais àgil e produtivo. Esta ferramenta se chama Grunt!

O que é o Grunt? Por que devo utilizá-lo? Como usá-lo? Irei responder estas e outras perguntas neste artigo.

Um pouco de História

Não podemos ingressar no mundo do Grunt sem antes falarmos sobre o processo de build.

O processo de build é uma prática que foi adotada há muito tempo na Engenharia de Softwares, sendo utilizada a favor das metodologias ágeis. É com este processo que automatizamos tarefas e garantimos um alto nível de qualidade em nossos projetos.

Alguns destes nomes podem lhe parecer familiar: Makefile, Rakefile, Maven e Ant. Todos eles lidam com o processo de build porém, não se enquadram no âmbito Front-end.

Atualmente, trabalho como Front-end Developer e não quero ter de criar um Makefile para ser executado no Shell, um Rakefile em Ruby ou trabalhar com Maven e Ant que utilizam sintaxe XML. O meu negócio é JavaScript!

Então, há dois anos aproximadamente, Ben Alman (conhecido também na comunidade como Cowboy) fez um grande favor a todos nós Desenvolvedores Front-end. Ele criou o Grunt.

O que é o Grunt?

O Grunt é uma ferramenta para build script. O importante é que você saiba que ele possibilita a automação de tarefas utlizando a linguagem JavaScript como base.

O Grunt depende também do Node e NPM para que seja executado na sua máquina. Para os que nunca ouviram falar nesses caras, eis uma breve explicação sobre eles:

Node: é uma plataforma focada na construção de aplicações server-side em JavaScript, construída a partir de uma máquina virtual do Google denominada V8.

NPM: é o “cinto de utilidades” do Node. Com o NPM (Node Package Manager) é possível instalar pacotes, gerenciar dependências e publicar projetos de código aberto para o Node através da linha de comando.

Por que devo utilizá-lo?

Simples. Para otimizar o seu Workflow!

Com o Grunt, você pode automatizar diversas tarefas rotineiras no desenvolvimento de um projeto com o mínimo de esforço. Quanto menos trabalho você tiver executando processos repetitivos como: minificação, compilação, testes unitários, validação de scripts (linting), deploy, e outras tarefas necessárias para garantir a qualidade dos seus projetos, melhor para o seu fluxo de trabalho. Outra vantagem? Você mantém o foco nos seus códigos e deixa o Grunt fazer toda a parte tediosa. Show de bola, não é?

Como faço para utilizar o Grunt?

O primeiro contato do desenvolverdor com o Grunt pode não ser agradável. Por se tratar de uma ferramenta que é executada com a linha de comando, muitos desenvolvedores já pensam que será assustador ou terá uma grande dor de cabeça.

Fique calmo! Vamos quebrar essa barreira e eu vou lhe mostrar que não é complicado manusear esse cara.

Vamos lá?

O primeiro passo é instalar o Node na sua máquina.

– Vá até o site do Node e faça o download do pacote/arquivo executável.
– Com o Node instalado, abra o seu terminal/powershell (caso não possua, faça o download do PowerShell para o Windows).
– Execute o comando node-v para verificar se o Node foi instalado corretamente na sua máquina.

Feito isso, vamos para o próximo passo.

O segundo passo é instalar o Grunt CLI.

– Abra o seu terminal/powershell.
– Execute o comando npm install -g grunt-cli para instalar o Grunt CLI globalmente (provavelmente seja necessário rodar como administrador no Windows ou utilizar o sudo nos sistemas Unix/Linux).

Importante: caso possua uma versão antiga do Grunt, recomenda-se que seja removida com o comando npm uninstall -g grunt antes de realizar uma nova instalação. É possível verificar se o Grunt está instalado na sua máquina com o comando grunt -v.

Certo Vitor, mas não era Grunt? Então, o que seria o Grunt CLI?

O Grunt CLI é uma Interface de linha de comando para o Grunt, e permite que você rode diferentes versões do Grunt na sua máquina. O Grunt não está sendo instalado de fato ainda. Isto será feito na pasta raiz do seu projeto.

Recapitulando:

Para instalar o Grunt CLI em nossa máquina, executamos os seguintes passos:

1. Instalação do Node: http://www.nodejs.org
2. Instalação do Grunt CLI: npm install -g grunt-cli (verifique se existe uma versão anterior do Grunt com o comando grunt -v).

Começando a brincar com o Grunt

Agora que você está familiarizado com o Grunt e a Interface de linha de comando (Grunt CLI) está instalada na sua máquina, vamos abordar os aspectos técnicos da ferramenta.

Todo projeto Grunt contém 2 importantes arquivos: package.json e Gruntfile.js. Ambos precisam estar no mesmo diretório.

O package.json é utilizado para armazenar os dados do seu projeto, incluíndo a listagem dos plugins responsáveis pela execução das suas tarefas. Já o Gruntfile.js é um arquivo JavaScript (ou CoffeeScript) responsável pela configuração, inicialização dos plugins e registro das suas tarefas.

Existem dois caminhos para se iniciar um projeto com o Grunt.

Projetos existentes

Para projetos com o Grunt já configurado, basta você navegar até a pasta onde está localizado o arquivo package.json e executar o comando npm install. Com isso, todas as suas dependências serão instaladas e você estará apto a rodar suas tarefas no Grunt.

Novos projetos

Para novos projetos, serão executados os seguintes passos:

1. Configuração do arquivo package.json
2. Instalação do Grunt e das dependências
3. Configuração do arquivo Gruntfile.js

Configuração do arquivo package.json

Essa é uma possível estrutura inicial de um arquivo package.json:

Onde temos:

  • name: o nome do seu projeto
  • version: versão semântica do projeto
  • description: uma breve descrição para o projeto
  • homepage: site do projeto
  • author: dados do autor

Nota: é possível utilizar o comando npm init para gerar uma estrutura inicial do arquivo package.json. Ao executar este comando, algumas perguntas serão feitas. Responda-as de acordo com as suas necessidades.

Instalação das dependências do Grunt

Para instalar as dependências, é preciso executar o comando npm install <nome da dependencia> --save-dev. Entretanto, a primeira dependência a ser instalada deve ser o Grunt. Executando o comando npm install grunt --save-dev você estará instalando (de fato) o Grunt localmente no seu projeto.

Você pode estar se perguntando qual a necessidade em se fazer isso. Simples. Toda vez que o seu projeto for manuseado por outro desenvolvedor, ou até mesmo por uma equipe diferente, a versão do grunt estará intacta. Isto vai evitar possíveis conflitos de versões do Grunt no seu projeto.

Depois que o Grunt for instalado como dependência no seu projeto, o package.json ficará assim:

Agora, o nosso arquivo package.json possui o objeto JSON devDependencies onde as dependências serão listadas. Com o Grunt instalado localmente no seu projeto, basta instalar os plugins necessários.

Na segunda parte deste artigo, colocaremos em prática a instalação e configuração de alguns plugins. Vamos em frente!

Configuracão do arquivo Gruntfile.js

O arquivo Gruntfile.js é envolvido por uma função global e possui 3 métodos:

– grunt.initConfig(): para a configuração das tarefas.
– grunt.loadNpmTasks(): para a inicialização das tarefas.
– grunt.registerTask(): para o registro das tarefas.

Confira:

E na prática, como fica?

Neste primeiro momento procurei passar os conceitos do Grunt e uma breve introdução de como se trabalhar com esta incrível ferramenta. A prática ficará para um próximo momento, onde vamos iniciar um projeto com o Grunt a fim de fixar os conhecimentos adquiridos aqui. Enquanto isso, aproveite para visitar o site do Grunt e ler a sua documentação.

É isso!

Como pode ver, o Grunt é uma ferramenta muito poderosa e que aumenta a produtividade em nosso fluxo de trabalho. Espero que o Grunt seja útil para o seu Workflow, assim como tem sido para o meu. Até a próxima!

Fonte: http://goo.gl/h3pO4z

facebooktwittergoogle_plusredditpinterestlinkedin

Artigo traduzido. Postado originalmente em JavaScript.is(Sexy) em 27/01/2013

obj

O núcleo mais utilizado e mais básico do JavaScript é o Object. O JavaScript tem um tipo complexo de dado, o tipo Object, e tem cinco tipos de dados simples: Number, String, Boolean, Undefined e Null. Note que estes tipos simples (primitivos) de dados são imutáveis, eles não podem ser alterados, enquanto os objetos podem.

O que é um Objeto

Um objeto é uma lista não ordenada de tipos primitivos de dados (e as vezes uma referência a outros tipos de dados) que são armazenados em pares nome-valor. Cada item na lista é chamado ‘propriedade’ (funcções são chamadas de ‘métodos’) e cada nome de propriedade deve ser único e pode ser uma string ou um número.

Aqui um simples objeto:

Reiterando: Pense que um objeto é uma lista que contém itens e que cada item (uma propriedade) na lista é armazenada por um par nome-valor. Os nomes das propriedades no exemplo acima são primeiroNome e autorFavorito, e os valores para cada um “Richard” e “Conrad”.

O nome das propriedades podem ser uma string ou um número, mas se for um número, ele deve ser acessado com o uso de colchetes. Veja no exemplo abaixo sobre esta notação, onde temos outro exemplo de objetos com números sendo o nome da propriedade.

Como um desenvolvedor JavaScript você frequentemente irá usar os tipos de dados Object, na maioria das vezes para armazenar dados e para criar seus próprios métodos e funções.

Tipos de Dados por Referência e Tipos Primitivos de Dados

Uma das principais diferenças entre os tipos de dados por referência e os tipos primitivos de dados é que os os dados por referência não são armazenados diretamente na variável como um valor primitivo é. Por exemplo:

É interessante notarmos que mesmo que pessoa agora tenha como valor “Bryant”, a variável outraPessoa continua retendo o antigo valor que pessoa tinha.

Compare o dado primitivo salvo-como-valor demonstrado acima, com o salvo-como-referência por objetos:

Neste exemplo, nós copiamos o objeto pessoa para outraPessoa, mas por causa do valor em pessoa estar armazenado como uma referência e não como um valor atual, quando nós mudamos a propriedade pessoa.name para “Bryant” a variável outraPessoa refletiu a mudança pois nunca armazenou o uma cópia do valor atual das propriedades de pessoa, somente uma referência.

Propriedades de Dados têm atributos

Cada propriedade dos dados (propriedades dos objetos que armazenam dados) não tem somente os pares nome-valor, mas também 3 tributos (os 3 atributos são definidos como true por padrão):

  • Atributo configurável: especifica se a propriedade pode ser deletada ou mudada.
  • Enumerável: especifica se a propriedade pode ser retornada em um loop for/in.
  • Editável: especifica se a propriedade pode ser alterada.

Criando Objetos

Estes são os dois meios comuns de criar objetos:

1. Objetos Literais

O mais comum e, de fato, mais fácil modo de criar objetos é com através dos objetos literais como descrito aqui:

2. Objeto Construtor

O segundo meio mais comum de criar objetos é com o construtor “Object”. Um construtor é uma função usada para inicializar novos objetos, e você usa a nova palavra-chave para chamar o construtor.

Mesmo você podendo usar algumas palavras reservadas como “for” para nomear propriedades em seus objetos, é totalmente aconselhável que você NÃO faça isso.

Objetos podem conter qualquer outro tipo de dados, incluindo Numbers, Arrays e também outros objetos.

Padrões Práticos para Criação de Objetos

Para simples objetos que podem ser usados somente uma vez na sua aplicação para guardar dados, os dois métodos apresentados acima podem ser suficientes para a criação de objetos.

Imagine que você tenha uma aplicação que mostre frutas e os detalhes sobre cada uma delas. Todas as frutas na sua aplicação tem estas propriedades: cor, forma, doçura, custo e uma função mostrarNome (mostrarNome). Isso seria muito tedioso e improdutivo de escrever todo o tempo que você quisesse criar um novo objeto fruta.

Se você tiver 10 frutas, você vai ter que adicionar o mesmo código 10 vezes. E o que acontece se você tiver que mudar o código da função nativaDe? Você terá que fazer a alteração em 10 locais diferentes. Agora extrapolando isto para a adição de objetos para membros de um website rapidamente você percebe que a maneira que nós criamos os objetos de longe não é a ideal para se criar instâncias, especialmente quando estamos desenvolvendo grandes aplicações.

Para resolver este problema de repetição, os engenheiros de software inventaram padrões (soluções para problemas repetitivos e comuns) para o desenvolvimento de aplicações mais eficientes e simplificadas.

Aqui temos 2 padrões comuns para criação de objetos. Se você terminou o curso “Como Aprender JavaScript Corretamente”, você viu nas lições em Codecademy que utilizavam este primeiro padrão frequentemente:

1. Padrão Construtor para Criação de Objetos

Com este padrão, é muito fácil de criar vários tipos de frutas. Assim:

Se você tiver que alterar a função mostrarNome, você somente precisa fazer isso em um local. O padrão encapsula todas as funcionalidades e características das frutas apenas fazendo uma simples função Fruta com herança.

Notas:

  • Uma propriedade herdada é definida na propriedade prototype do objeto. Por exemplo: algumObjeto.prototype.primeiroNome = “John”;
  • Uma propriedade própria é definida diretamente no objeto, por exemplo:

  • Para acessar uma propriedade de um objeto, nós podemos usar meuObjeto.nomePropriedade, por exemplo:

  • Para invocar um método de um objeto, nós usamos meuObjeto.nomeDoMetodo(), por exemplo:

2. Padrão Prototípico para Criação de Objetos

Antes de discutirmos sobre o Padrão Prototípico, você entender sobre protótipos no JavaScript. Se você não conhece, leia este post JavaScript Prototype in Plain, Detailed Language

E assim é como nós chamamos o construtor Fruta() neste padrão prototípico:

Leituras Adicionais

Para uma completa discussão sobre estes dois padrões e uma explicação minunciosa de como cada um funciona e as desvantagens de cada um, leia o capítulo 6 de Professional JavaScript for Web Developers. Você também irá aprender qual padrão Zakas recomenda como o melhor para se usar. (Dica: não é nenhum dos dois acima).

Como Acessar Propriedades em um Objeto

Os dois caminhos primários para acessar as propriedades de um objeto são com a notação com ponto e com a notação com colchete.

1. Notação com Ponto

2. Notação com Colchete

Caso você acesse uma propriedade de um objeto que não exista o resultado retornado será undefined.

Propriedades Próprias e Herdadas

Objetos tem propriedades herdadas e propriedades próprias. As próprias foram definidas no próprio objeto, enquanto as propriedades herdadas foram herdadas do objeto protótipo do construtor (outro objeto).

Para saber se uma propriedade existe em um objeto (ou como herança ou como própria), você usa o operador in:

hasOwnProperty

Para saber se um objeto possui uma propriedade em específico como propriedade própria, você pode usar o método hasOwnProperty. Este método é muito útil pois de tempos em tempos você precisa enumerar um objeto e você quer somente as propriedades próprias, e não as herdadas.

Acessando e Enumerando Propriedades nos Objetos

Para acessar propriedades enumeráveis (próprias e herdadas) nos objetos, você deve usar o loop for/in ou um loop for geral.

Acessando Propriedades Herdadas

Propriedades herdadas de Object.prototype não são enumeráveis, então o loop for/in não as mostra. Entretanto, propriedades herdadas que são enumeráveis são reveladas na iteração do loop for/in. Por exemplo:

No último exemplo, note que a propriedade nivelEnsino que definimos na função EnsinoSuperior é listada nas propriedades do objeto escola, mesmo nivelEnsino sendo uma propriedade herdada.

Atributo Prototype dos Objetos e Propriedade Prototype

O atributo prototype e a propriedade prototype de um objeto são conceitos criticamente importantes de se entender no JavaScript. Leia meu post JavaScript Prototype in Plain, Detailed Language, para mais informações.

Deletando Propriedades de um Objeto

Para deletar uma propriedade de um objeto, usamos o operador delete. Você não pode deletar propriedades que são herdadas, nem propriedades cujo os atributos estão definidos para configuração. Você deve deletar as propriedades herdadas no objeto protótipo (onde as propriedades foram definidas). Você também não pode deletar propriedades do objeto global, as quais foram declaradas sem a palavra-chave var.

O operador delete retorna true se a remoção acontecer com sucesso, e, surpreendentemente, ele também retorna true se a propriedade a ser deletada não existe ou se a propriedade não pode ser deletada.

Estes exemplos ilustram isso:

Serializar e Desserializar Objetos

Para transferir seus objetos via HTTP ou convertê-los para uma string, você precisa de serializá-los (converter para string); você pode usar a função JSON.stringify para serializar seus objetos. Note que quando usado antes da ECMAScript 5, você deve usar a popular biblioteca json2 (de Douglas Crockford) para obter a função JSON.stringify. Ela é padronizada/nativa na ECMAScript 5.

Para desserializar seu objeto (convertê-lo para um objeto a partir de uma string), você deve usar a função JSON.parse da mesma biblioteca json2. Esta função também é nativa na ECMAScript 5.

Exemplos de JSON.stringify:

Para uma cobertura mais detalhada de Objetos JavaScript, incluindo as adições na ECMAScript 5 para tratar objetos, leia o capítulo 6 de O Guia Definitivo JavaScript 6ª edição.

Traduzido por: Eric Oliveira

Nota do tradutor: Espero que este artigo lhe seja tão útil quanto foi para mim! Caso tenha sugestões de outros para tradução, deixe nos comentários que terei o maior prazer em ajudar! Um forte abraço e bons estudos!

facebooktwittergoogle_plusredditpinterestlinkedin