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
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
Começando o desenvolvimento de WebApps com
By willmendesneto
