31
Um framework para Facilitar sua vida

ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Embed Size (px)

DESCRIPTION

Angularjs é um framework javascript construido e mantido pelo grupo de engenheiros do Google, ele usa o HTML como uma “template engine”, tudo isso no intuito de fornecer uma solução completa para o cliente-side de sua aplicação. Além disso tem total compatibilidade com as bibliotecas javascript mais utilizadas, como jQuery. é um novo conceito para desenvolvimento de web apps client-site.

Citation preview

Page 1: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Um framework para

Facilitar sua vida

Page 2: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Quem sou eu?

Participação ativa em

comunidades;

Colaborador em

projetos open source como

Codeigniter e Grocery CRUD;

Músico nas horas vagas;

Page 3: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Era uma vez...

Marco inicial: 2009

Primeiro produto: Double Click

Youtube for PS3 foi construído com AngularJS

Page 4: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Single Page Application – SPA

Menos Server-side;

Mais Client-side;

Frameworks Javascript;

Mais poder para o Client-side!

Page 5: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Porque usar?

“Angular é o HTML teria sido se tivesse

sido projetado para aplicações.”

http://docs.angularjs.org/guide/overview

Page 6: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Model View...Whatever?!?!

MVC

MVVM

MV*

Page 7: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Conceitos

Programação declarativa x Programação imperativa:

HTML como template para o Javascript

Page 8: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Conceitos

Abstração de etapas comodata binding e injeção dedependênciade forma mais simples;

Page 9: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Conceitos

Motor de templates: html = xml

Page 10: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

$scope: onde a mágicaacontece

Fluxo de uma aplicação com angularjs

Page 11: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Sim, Two-Way Data Binding!

Three-way?

Calma, daqui a pouco =)

Page 12: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Porque usar?

Melhorias na produtividade e manutenção do software;

Escreva (bem) menos, faça mais!

Diretivas = futuro!(modularidade, isolamos/abstraímos a complexidade)

Flexibilidade: fácil integração com bibliotecas externas

Page 13: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

+

=Porque não?

Quer saber mais?

http://developer.chrome.com/trunk/apps/angular_framework.

html

Page 14: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Porque usar?

Grunt, Yeoman,...

Generator-angular:https://github.com/yeoman/generator-angular

Page 15: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Porque usar?

Karma – Test Runner For Javascript

Page 16: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Porque usar?

Page 17: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Angularjs e Segurança= $http

* Json vulnerável

[‘angularjs’, ‘framework’, ‘awesome’]

* Json seguro

)]}’,[‘angularjs’, ‘framework’, ‘awesome’]

Quer saber mais? http://docs.angularjs.org/api/ng.$http

Page 18: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Mean? B-Mean? Three-way data bind?

B

M

E

A

N

ongoDB

xpress

ngularJS

odejs

reeze A

Firebase

ngularJS

Page 19: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Comparativos

X

NÃOCriar webapps é muito mais que manipulação do

DOM

Page 20: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Comparativos

X

jQuery(123 linhas):https://github.com/vedovelli/crud-jquery/blob/master/js/custom.js

AngularJS(56 linhas ):https://github.com/vedovelli/crud-

angular/blob/master/js/custom.js

Page 21: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Comparativos

X

Backbone/Emberjs:http://jsfiddle.net/jashkenas/CGSd5/

AngularJS:http://jsfiddle.net/mhevery/vYknU/23/

Page 22: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Comparativos

X

http://dybskiy.com/js-mvc-angular-vs-ember/

http://beust.com/weblog/2012/12/29/migrating-from-ember-js-to-angularjs/

Page 23: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Mais comparativos?

http://todomvc.com/

Page 24: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Angularjs, Backbonejs, Canjs ou Emberjs?

Comparativo entre os 4 frameworks javascript mais conceituados da atualidade (nem tão imparcial assim)

http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/?utm_source=javascriptweekly&utm_medium=email

Page 25: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Two-way bindings

Comparativo de two-way bindings utilizados nos Frameworks Angular, Ember e Knockout

http://projects.mariusgundersen.net/JSconf2013/

Page 26: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Aí você se pergunta:

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

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

“ ”

Page 27: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Casede sucesso

http://www.localytics.com/blog/2013/angularjs-at-localytics/

Page 28: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Game bombermine

http://bombermine.com/#/

Page 29: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
Page 30: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

Quer saber mais?

Angularjs: http://angularjs.orgBlog Angularjs: http://blog.angularjs.org/

Built with Angular: http://builtwith.angularjs.org/

Bombermine: http://bombermine.com/#/

Egghead.io: http://egghead.io/Advanced Design Patterns and Best Practices:

http://trochette.github.io/Angular-Design-Patterns-Best-

Practices/

ER.T.F.M!

Page 31: ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

@WILLMENDESNETO

HTTPS://WWW.FACEBOOK.COM/WILSONMENDESNETO

HTTP://ABOUT.ME/WILLMENDESNETO