top 10 mistakes angularjs developers make

29
Top 10 Mistakes AngularJS Developers Make Mark Meyer @nuclearghost

Upload: mark-meyer

Post on 10-Jul-2015

1.584 views

Category:

Software


0 download

DESCRIPTION

Presentation going more in depth on mistakes AngularJS developers make. Builds up upon this article

TRANSCRIPT

Page 1: Top 10 Mistakes AngularJS Developers Make

Top 10 Mistakes AngularJS

Developers MakeMark Meyer

@nuclearghost

Page 2: Top 10 Mistakes AngularJS Developers Make

About MeSoftware Engineer at

Sharethrough

Developing on AngularJS since

1.1.5 (triangle-squarification)

Built ~40k line AngularJS app

and many much smaller

AngularJS apps

Page 3: Top 10 Mistakes AngularJS Developers Make

What’s the

point?AngularJS === Awesome

Easy to Start

Learning Curve Eventually

Ramps up

My Experiences from

building a large application

Page 4: Top 10 Mistakes AngularJS Developers Make

The Mistakes

1. MVC Directory Structure

2. Modules

3.

4.

5.

6. Batarang

7. Too Many Watchers

8. Scoping $scope’s

9. Manual Testing

10. Using jQueryServices v Factory

Dependency Injection

Controllers Bloat

Page 5: Top 10 Mistakes AngularJS Developers Make

Dependency Injection

Great Design Pattern for Testing and Parallelizing Development

Not the prettiest in AngularJS

var app = angular.module('app',[]);

app.controller('MainCtrl', function($scope, $timeout){

$timeout(function(){

console.log($scope);

}, 1000);

});

Page 6: Top 10 Mistakes AngularJS Developers Make

Array Style

+ Safe for minification

- Extra in-line code

app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout){

$timeout(function(){

console.log($scope);

}, 1000);

}]);

Page 7: Top 10 Mistakes AngularJS Developers Make

$inject

Property attached to controller functions

Not as convenient for in-lining

Potentially cleaner without duplicate names at declaration

var MainCtrl = function($scope, $timeout){

$timeout(function(){

console.log($scope);

}, 1000);

};

MainCtrl.$inject = ['$scope', ‘$timeout']; //or MainCtrl[‘$inject’]

app.controller('MainCtrl', MainCtrl);

Page 8: Top 10 Mistakes AngularJS Developers Make

ng-annotate

Automatically add array style notations

Integrate into build process before minification

Can be easily integrated with Grunt, Gulp, Browserify, Rails Assets

Pipeline, and more

https://github.com/olov/ng-annotate

Page 9: Top 10 Mistakes AngularJS Developers Make

Controller Bloat

Limit Controllers to bartering

between view and data model

Data model should live in

provider (service, factory, etc.)

Controllers should have view-

model for data binding

Page 10: Top 10 Mistakes AngularJS Developers Make

Controller Bloat Example

deadbolt by Ed Carter

Chrome extension for hashing

passphrase to secure password

Very clean, readable code

Controllers get a little lengthy handling all

the user events

https://github.com/bittenbytailfly/deadbolt-

password-generator-chrome-

extension/blob/master/extension/js/control

lers.js

Page 11: Top 10 Mistakes AngularJS Developers Make

Service v Factory

Provider, Factory, Service, Value, Constant

All based on Provider

All singletons

Definitely over complicated

Read the docs: https://docs.angularjs.org/guide/providers

Page 12: Top 10 Mistakes AngularJS Developers Make

Value

Often used for storing primitives, e.g. key string values

var myApp = angular.module('myApp', []);

myApp.value('clientId', 'a12345654321x');

myApp.controller('DemoController', ['clientId', function DemoController(clientId) {

this.clientId = clientId;

}]);

Page 13: Top 10 Mistakes AngularJS Developers Make

Constant

Values available at config time and run time

Every AngularJS app has config phase, then run phase

myApp.constant('planetName', 'Greasy Giant');

Page 14: Top 10 Mistakes AngularJS Developers Make

Service

Returns new’d instance of object returned in service

Cannot create primitives

app.service('helloWorldService', function(){

this.hello = function() {

return "Hello World";

};

});

Note: Yes, we have called one of our service recipes 'Service'. We regret this and know that we'll be somehow punished for our misdeed. It's like we named one of our offspring 'Child'. Boy, that would mess with the teachers.

Page 15: Top 10 Mistakes AngularJS Developers Make

FactoryCan have dependencies

Can return primitives or functions

myApp.factory('apiToken', ['clientId', function apiTokenFactory(clientId) {

var encrypt = function(data1, data2) {

// NSA-proof encryption algorithm:

return (data1 + ':' + data2).toUpperCase();

};

var secret = window.localStorage.getItem('myApp.secret');

var apiToken = encrypt(clientId, secret);

return apiToken;

}]);

Page 16: Top 10 Mistakes AngularJS Developers Make

Provider

Closest to the metal

Must implement $get method

Available during config phase

Page 17: Top 10 Mistakes AngularJS Developers Make

Provider ExamplemyApp.provider('unicornLauncher', function UnicornLauncherProvider() {

var useTinfoilShielding = false;

this.useTinfoilShielding = function(value) {

useTinfoilShielding = !!value;

};

this.$get = ["apiToken", function unicornLauncherFactory(apiToken) {

return new UnicornLauncher(apiToken, useTinfoilShielding);

}];

});

myApp.config(["unicornLauncherProvider", function(unicornLauncherProvider) {

unicornLauncherProvider.useTinfoilShielding(true);

}]);

Page 18: Top 10 Mistakes AngularJS Developers Make

Provider Family Conclusion

Page 19: Top 10 Mistakes AngularJS Developers Make

The Mistakes

1. MVC Directory Structure

2. Modules

3.

4.

5.

6. Batarang

7. Too Many Watchers

8. Scoping $scope’s

9. Manual Testing

10. Using jQueryServices v Factory

Dependency Injection

Controllers Bloat

Page 20: Top 10 Mistakes AngularJS Developers Make

11. Memory Leaks

Controllers and Directives should subscribe to: $scope.$on('$destroy', …)

Remove handlers

Clean up resources which won’t be garbage collected automatically

Page 21: Top 10 Mistakes AngularJS Developers Make

MVC Directory Structuretemplates/

_login.html

_feed.html

app/

app.js

controllers/

LoginController.js

FeedController.js

directives/

FeedEntryDirective.js

services/

LoginService.js

FeedService.js

filters/

CapatalizeFilter.js

app/

app.js

Feed/

_feed.html

FeedController.js

FeedEntryDirective.js

FeedService.js

Login/

_login.html

LoginController.js

LoginService.js

Shared/

CapatalizeFilter.js

Page 22: Top 10 Mistakes AngularJS Developers Make

Modules

Group code into bundles which are independent

Directory structure should follow module design

Configure routes per module

Each module manages its own dependencies

Page 23: Top 10 Mistakes AngularJS Developers Make

Batarang

Still under active-isn development

Check out ng-inspector: http://ng-inspector.org/

Page 24: Top 10 Mistakes AngularJS Developers Make

Watchers

If something doesn’t change, don’t watch it

Bindonce directive is your friend

https://github.com/Pasvaz/bindonce

Page 25: Top 10 Mistakes AngularJS Developers Make

Scoping $scopes

Learn prototypical inheritance in javascript

http://www.airpair.com/javascript/workshops/javascript-prototypal-

inheritance

Don’t stress too much

2.0 is coming

Page 26: Top 10 Mistakes AngularJS Developers Make

Testing

Come back tomorrow

http://www.airpair.com/angularjs/

workshops/unit-testing-angularjs

Page 27: Top 10 Mistakes AngularJS Developers Make

Further Reading

Angular Best Practices: https://github.com/angular/angular.js/wiki/Best-

Practices

Officical App Structure Recommendation:

https://docs.google.com/document/d/1XXMvReO8-

Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub

Page 28: Top 10 Mistakes AngularJS Developers Make

Angular 2.0 is coming!

Major changes in the pipeline

Goodbye Controllers, $scope, angular.module, jqLite

Rob Eisenberg goes in depth: http://eisenbergeffect.bluespire.com/all-

about-angular-2-0/

Igor Minar and Tobias Bosch overview:

https://docs.google.com/presentation/d/1XQP0_NTzCUcFweauLlkZpbbh

NVYbYy156oD--KLmXsk/edit#slide=id.g498335282_0112

Page 29: Top 10 Mistakes AngularJS Developers Make

Wrap Up

Reach me on twitter: @nuclearghost

Want individualized help?: http://airpair.me/NuclearGhost

Thanks for your time!