Começando o desenvolvimento de WebApps com

+WilsonMendes / @willmendesneto

Google Developer Expert AngularJS

AngularJS

Como? Quem? Porque?

Era uma vez...

Marco inicial: 2009 

 

Primeiro produto: Double Click

 

Youtube for PS3 foi construído com AngularJS

Single Page Application

Menos Server-side

 

Mais Client-side

 

Framework Javascript

Mais poder para o Client-side

Single Page Application

Diminuir o tempo de carregamento do app utilizando o conceito de página única

 

Aplicações ricas e com várias interações no front-end

Porque usar?

"Angular é o que o HTML teria sido se tivesse sido projetado para aplicações"

Model
View
Whatever

Conceitos

Programação: imperativa x declarativa

        <h2>Twitter search</h2>
        <form >
          <input type="text" ng-model="vm.searchTerm" />
          <input type="button" ng-click="vm.search()" value="Search" />
        </form>
        
        <table>
          <thead>
            <tr>
              <th>Tweet</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="tweet in vm.tweets.results">
              <td>{{ tweet.tweet }}</td>
            </tr>
          </tbody>
        </table>

Conceitos

Template: HTML = XML

    <h1>About</h1>
    <p>The element lorem doesn't exist in HTML by default. Claps for Angular!</p>
    <lorem></lorem>
    (function() {
      'use strict';
    
      function navbar() {
        var directive = {
          restrict: 'E',
          template: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, '
        };
    
        return directive;
      }
    
      angular.module('angularjsCourseApp')
        .directive('lorem', navbar);
    
    }());

Conceitos

Abstração de etapas como data binding e injeção de dependência de forma mais simples

Controller

Factory

Service

Provider

Directive

Module

Produtividade

Manutenibilidade

Diretivas = futuro

Modularidade

Flexibilidade

Mean? B-Mean

Breeze

 

MongoDB

 

Express

 

AngularJS

 

NodeJS

AngularJS

 

Firebase

Com tudo isso que o AngularJS me oferece ele deve ser muito pesado...

AngularJS:

82 kb

Ember.js:

230 kb =

64 kb of ember.js + 74 kb of handlebars.js + 92 kb of jQuery

http://raphaelsaunier.com/talks/jsromandie-angular-ember/#/13/2​

Primeiros passos

Conhecendo as ferramentas de trabalho

NodeJS

 

Javascript rodando no back-end

 

Engine V8

 

NPM para gerenciar pacotes e package.json com as informações

Git

 

Sistema de versionamento distribuído

 

Linus Torvalds

 

* Atualmente o mais utilizado

Editor de texto

 

Ferramenta certa para o trabalho certo

 

Adapte ao seu workflow

Chrome Devtools

Fluxo
de uma
Aplicação

index.html

Usuário faz requisição da página via browser

app.js

Verifica a rota

 

Faz a requisição do controller e view

MainController

Controla a página carregada pelo navegador

view

Compilada pelo Angular

Usada como template

Utiliza eventos/bindings 

Turbinando o workflow

Javascript sempre vai te ajudar

Grunt

 

Automatizador de tarefas

 

Todas as tarefas do projeto estão no arquivo Gruntfile.js

Bower

 

Gerenciador de pacotes front-end

 

Gera um arquivo bower.json com as informações dos componentes utilizados no projeto

Yeoman Generator

 

Scaffolding para o projeto

 

Totalmente configurável

Iniciando as atividades

Começando a meter a mão na massa

#codetime

#obrigado

Wilson Mendes

@willmendesneto

Made with Slides.com