angularjs: a framework to make your life easier

31
A framework to Easier Make your life

Upload: wilson-mendes

Post on 18-Dec-2014

243 views

Category:

Technology


1 download

DESCRIPTION

AngularJS is a javascript framework built and maintained by Google engineers Group, it uses HTML as a "template engine", all this in order to provide a complete solution for the client-side of your application. Also has full compatibility with the most used javascript libraries such as jQuery. It's a new concept for developing web apps client-site.

TRANSCRIPT

Page 1: AngularJS: A framework to make your life easier

A framework to

Easier Make your life

Page 2: AngularJS: A framework to make your life easier

When am I?

Active participation in Communities and

open source projects;

Collaborate with angular

modules;

Musician in free time;

Page 3: AngularJS: A framework to make your life easier

Once upon a time...

Begins: 2009, march First product: Double Click Youtube for PS3 was created using AngularJS

Page 4: AngularJS: A framework to make your life easier

Single Page Application – SPA

Less Server-side; More Client-side; Frameworks Javascript; More power for Client-side!

Page 5: AngularJS: A framework to make your life easier

Why to use?

“Angular is what HTML would have been

had if designed from applications.” http://docs.angularjs.org/guide/overview

Page 6: AngularJS: A framework to make your life easier

Model View...Whatever?!?!

MVC

MVVM

MV*

Page 7: AngularJS: A framework to make your life easier

Concepts

Declarative programming x Imperative programming: HTML as template for Javascript

Page 8: AngularJS: A framework to make your life easier

Concepts

Data binding and dependency injection abstraction;

Page 9: AngularJS: A framework to make your life easier

Concepts

Template engine: html = xml

Page 10: AngularJS: A framework to make your life easier

$scope: when the magic happens

Angularjs application flow

Page 11: AngularJS: A framework to make your life easier

Yes, Two-Way Data Binding!

Three-way? Calm, will see soon =)

Page 12: AngularJS: A framework to make your life easier

Why to use?

Productive improvements and software maintenance;

Write (much) less, do more!

Directives = future! (modularity, isolate/complexity abstracted)

Flexibility: easy integration with external libraries

Page 13: AngularJS: A framework to make your life easier

+ =

Why not?

Want to know more?

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

html

Page 14: AngularJS: A framework to make your life easier

Why to use?

Grunt, Yeoman,...

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

Page 15: AngularJS: A framework to make your life easier

Why to use?

Karma – Test Runner For Javascript

Page 16: AngularJS: A framework to make your life easier

Why to use?

Page 18: AngularJS: A framework to make your life easier

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

B

M

E

A

N

ongoDB

xpress

ngularJS

odejs

reeze A

F irebase

ngularJS

Page 19: AngularJS: A framework to make your life easier

Comparatives

X

NO

Webapps creation is much more than DOM manupulation

Page 20: AngularJS: A framework to make your life easier

Comparatives

X

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

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

angular/blob/master/js/custom.js

Page 21: AngularJS: A framework to make your life easier

Comparatives

X

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

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

Page 22: AngularJS: A framework to make your life easier

Comparatives

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: A framework to make your life easier

More comparatives?

http://todomvc.com/

Page 24: AngularJS: A framework to make your life easier

Angularjs, Backbonejs, Canjs ou Emberjs?

Comparative between 4 frameworks javascript most Concepteds actually (not so impartial...)

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

Page 25: AngularJS: A framework to make your life easier

Two-way bindings

Comparative of two-way bindings useds in Angular, Ember e Knockout

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

Page 27: AngularJS: A framework to make your life easier

Success Cases

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

Page 29: AngularJS: A framework to make your life easier
Page 30: AngularJS: A framework to make your life easier

Want to know more?

Angularjs: http://angularjs.org Blog 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/

AND R.T.F.M!

Page 31: AngularJS: A framework to make your life easier

@WILLMENDESNETO

HTTPS://WWW.FACEBOOK.COM/WILSONMENDESNETO

HTTP://ABOUT.ME/WILLMENDESNETO