Upload
narek-mamikonyan
View
2.642
Download
2
Embed Size (px)
DESCRIPTION
AngularJS Best Practices - Templates -Directives -Businesses logic -$scope -Performance optimization tips AngularJS 1.3
Citation preview
Superheroic JavaScript MVW Framework
Table of contents
•Short about AngularJS
•AngularJS Best practices
•AngularJS 1.3
•AngularJS 2.0
• Modularity
• Dependency injection
• Two – way binding
• Directives
• Filters
• Templating
• Services
• Testing ready
…. Etc.
Why angular is
powerful
Best Practices
Directory structure
When angular still loading
• Use ng-bind only for index.html or ng-cloak
• For rest use {{ }}
• When you need to set the src of an image dynamically
use ng-src instead of src with {{ }} template.
• When you need to set the href of an anchor tag
dynamically use ng-href instead of href with {{ }} template.
• Instead of using scope variable as string and using it with style
attribute with {{ }}, use the directive ng-style with object-like
parameters and scope variables as values:
• Use $templateCache to decrease XHR calls (Optimization tips)
Use
Templates
Now we have powerful templates
• Name your directives with lowerCamelCase.
• Use the dash-delimited format e.g ng-bind
• Use prefixed names e.g my-customer
• Reserved prefixes ng & ui
• Clean up scope.$on('$destroy', ...)
• use controller when you want to expose an API to other
directives. Otherwise use link.
Directive
Business logic
• Controllers
oShould not do DOM manipulations
oShould have view behavior
• Services
o Should not contain large DOM manipulations
o Have logic independent of view
o For session-level cache you can
use $cacheFactory. (Optimization tips)
• Scope is read-only in view
- Scope must refer to the model not to be a
model (model is javascript object)
• Scope is write-only in controller
• $rootScope Unsubscribing watchers manually
Demo with model
Demo without model
$scope
• Use promises ($q) instead of callbacks.
• Use $resource or RestAngular instead of $http when
working in REST API
• Use angular’s provided services instead of native ,
$timeout,$interval,$window, $document
• AngularJS reserved prefix $, don’t use it when defining a
variables
• In DI order should be angular’s at first, then customs
• Prefer the usage of controllers instead of ng-init
General
Cool, What about performance ?
Optimizing angular
• Guaranteed watchers count is 2.000, link to count
watchers
• Limit DOM filters (Angular 1.2.x)
• Each filter runs twice per $digest cycle
• Use $filter provider - $filter('filter')(array, expression, comparator);
• For content what should be rendered only once use
bindonce (Angular 1.2.x) or {{::myVar}} (Angular 1.3.x)
• $timeout & $interval functions has third argument which
will skip $digest loop
• Don’t write crazy things in $watch callback it will kill your app
• $watch has two comparison modes• referential (default) - quick, shallow comparison
• deep - slow, recurses through objects for a deep comparison; also makes a deep copy of the watched value each time it changes
• $watchCollection function is a sort-of mid-ground between the two $watch() configurations • referential (default) - quick, shallow comparison lika default $watch
• goes one-level deep and performs an additional, shallow reference check of the top level items in the collection
• Avoid deep $watch whenever possible, instead use $watchCollection
Optimizing angular
• ng-repeat - track by $index
• By default, ng-repeat creates a dom node for each item and
destroys that dom node when the item is removed.
• With track by $index, it will reuse dom nodes.
• Very Bad Practice: $$postDigest
• $$ means private to Angular, so be aware that the interface is not
stable
• Fires a callback after the current $digest cycle completes
• $timeout or $evalAsync ?
Optimizing angular
Angular 1.3
Angular 1.3
• Performance (3-4x faster)
• DOM manipulation
• Dirty checking
• Memory usage
• Animations
• Forms
• Flexible validation
• Debouncing
• Error reporting
• Other
• $watchGroup
• templateNamespace
Performance
Performance
Performance
• $httpProvider.useApplyAsync(true);
• one-time binding
form - ngModel
• ngModel.$validators
• $parsers + $formatters
• ngModel.$asyncValidators
• ngModel.ngModelOptions
form - ngModel.$validators
form - ngModel.$validators
form - ngModel.$asyncValidators
form - ngModel.ngModelOptions.debounce
form - ngModel.ngModelOptions-getter/settter
form - ngModel.ngModelOptions.updateOn
form - ngMessages
form - ngMessages
form - ngMessages
form - ngMessages
Other - composable SVG
Other - allOrNothing
Other - $watchGroup
Other - strictDI
ng-europe 2014
video | follow-up post
Angular 2.0
Angular 2.0
controllers
DDO
$scope
angular.module
jqLite
generic binding syntax
benchpress
WTF instrumentation
DI query mechanism
ng-europe 2014
video | follow-up post
References
AngularJS blog post
AngularJS style guide
ng-europe
Ben Nadel’s blog
Todd Motto’s blog
ng-newsletter
angular-test-patterns
Q&A