JavaScript Fundamentals with Angular and Lodash

The purpose of this presentation is also largely to explain some of the fun parts of JavaScript (dynamic function invocation with reflection, dynamic arguments, etc). I don't necessarily encourage putting complex logic throughout your templates with lodash, though there may be times it is appropriate.

Lets talk about lodash and how it can easily be married to Angular. Using a six line filter, I will expose the power of lodash directly within angular templates. This will be an introduction to lodash, angular templates, and we'll talk about scope and reflection within JavaScript.

Transcript

1. JavaScript Fundamentals JavaScript Fundamentals with Angular and Lodash with Angular and Lodash Bret Little - @little_bret blittle.github.io/blog/ http://slides.com/bretlittle/js-fundamentals-angular-lodash
2. JavaScript scope is not $scope JavaScript scope is not $scope
3. Just because you can, doesn't mean you should Caution! Caution!
4. <div class='active-users' ng-repeat='user in users | lodash:"filter":{active: true}'> {{ user.name }} </div> var users = [ { 'name': 'barney', 'age': 36, 'active': true }, { 'name': 'fred', 'age': 40, 'active': false } ] _.filter(users, { 'active': true }) // returns [{ 'name': 'barney', 'age': 36, 'active': true }]
5. <div class='selected-user'> {{ users | lodash:'findWhere':{active: true, age: 36} | lodash:'result':'name' }} </div> var users = [ { 'name': 'barney', 'age': 36, 'active': true }, { 'name': 'fred', 'age': 40, 'active': false } ] _.result( _.findWhere(users, { 'active': true, 'age': 36 }), 'name' ) // returns 'barney'
6. <div ng-repeat="i in 10 | lodash:'range'"> {{ $index }} </div> _.range(10); // → [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
7. <span>{{name | lodash:'capitalize'}}</span> $scope.name = 'alfred'; <span>Alfred</span>
8. <span class='{{dynamicClassName | lodash:'kebabCase'}}'> Hello </span> $scope.dynamicClass = 'someDyanmicClassName'; <span class='some-dyanmic-class-name'>Hello</span>
9. <span> {{value | lodash:'padLeft':10:0}} </span> $scope.value = 123; <span>0000000123</span>
10. <span> {{longVal | lodash:'trunc':28}} </span> $scope.longVal = 'Crocodiles have the most acidic stomach of any vertebrate. They can easily digest bones, hooves and horns.'; <span>Crocodiles have the most ...</span>
11. <div ng-repeat='user in users | lodash :"slice":(page * amountPerPage) :((page + 1) * amountPerPage)' > {{user.name}} </div> <button ng-click='page = page - 1'>Previous</button> <button ng-click='page = page + 1'>Next</button> http:/ /output.jsbin.com/zesuhu http:/ /output.jsbin.com/zesuhu
12. angular.module('myApp') .filter('lodash', function() { return function(input, method) { var args = [input].concat( Array.prototype.slice.call(arguments, 2) ); return _[method].apply(_, args); } });
13. JavaScript Fundamentals JavaScript Fundamentals Higher-order Functions Higher-order Functions Closures Closures Scope & Context Scope & Context Dynamic function invocation Dynamic function invocation Arguments Arguments JavaScript 2015 JavaScript 2015
14. JavaScript does not have block scope; JavaScript does not have block scope; it has lexical scope. it has lexical scope. var something = 1; { var something = 2; } console.log(something); -> 2
15. var something = 1; function run() { var something = 2; console.log(something); } run(); console.log(something); -> 2 -> 1
16. var something = 1; function run() { if (!something) { var something = 2; } console.log(something); } run(); -> 2 JavaScript Variable Hoisting JavaScript Variable Hoisting
17. angular.module('myApp') .filter('lodash', function() { return function(input, method) { var args = [input].concat( Array.prototype.slice.call(arguments, 2) ); return _[method].apply(_, args); } });
18. Higher-order Functions Higher-order Functions "Functions that operate on other "Functions that operate on other functions, either by taking them as functions, either by taking them as arguments or by returning them" arguments or by returning them" http:/ /eloquentjavascript.net/05_higher_order.html http:/ /eloquentjavascript.net/05_higher_order.html
19. function greaterThan(n) { return function(m) { return m > n; }; } var greaterThan10 = greaterThan(10); console.log(greaterThan10(11)); // -> true Higher-order Functions Higher-order Functions note note n n is still available within is still available within the returned function the returned function
20. Closures Closures "A closure is a special kind of object that "A closure is a special kind of object that combines two things: a function, and combines two things: a function, and the environment in which that function the environment in which that function was created." was created." https:/ /developer.mozilla.org/en-US/docs/Web/JavaScript/Closures https:/ /developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
21. function makeFunc() { var name = "Pangolin"; function displayName() { debugger; alert(name); } return displayName; }; var myFunc = makeFunc(); myFunc(); Closures Closures
22. var counter = (function() { var privateCounter = 0; function changeBy(val) { privateCounter += val; } return { increment: function() { changeBy(1); }, decrement: function() { changeBy(-1); }, value: function() { return privateCounter; } }; })(); console.log(counter.value()); // logs 0 counter.increment(); console.log(counter.value()); // logs 1 Practical Closures Practical Closures
23. angular.module('myApp') .filter('lodash', function(someService) { return function(input, method) { var args = [input].concat( Array.prototype.slice.call(arguments, 2) ); return _[method].apply(_, args); } });
24. angular.module('myApp') .filter('lodash', function() { return function(input, method) { var args = [input].concat( Array.prototype.slice.call(arguments, 2) ); return _[method].apply(_, args); } });
25. function sayHello() { for (var i = 0, iLength = arguments.length; i < iLength; i++) { console.log('Hello', arguments[i]); } } sayHello('Chester Nimitz', 'Raymond Spruance'); Dynamic Arguments Dynamic Arguments -> Hello Chester Nimitz -> Hello Raymond Spruance
26. angular.module('myApp') .filter('lodash', function() { return function(input, method) { var args = [input].concat( Array.prototype.slice.call(arguments, 2) ); return _[method].apply(_, args); } });
27. angular.module('myApp') .filter('lodash', function() { return function(input, method) { var args = [input].concat( Array.prototype.slice.call(arguments, 2) ); return _[method].apply(_, args); } });
28. JavaScript Context JavaScript Context The environment in which a function The environment in which a function executes. executes. the the this this keyword keyword Context is most often determined by Context is most often determined by how a function is invoked how a function is invoked
29. Function Statement Context Function Statement Context function billMe() { console.log(this); function sendPayment() { console.log(this); } sendPayment(); } billMe(); The context for for The context for for function statement is function statement is the global object the global object
30. Object Context Object Context var obj = { foo: function(){ return this; } }; obj.foo(); obj.foo() === obj; // true
31. Constructor Context Constructor Context function Legate(rank) { this.rank = rank; } var legate = new Legate(100); console.log(legate.rank);
32. Dynamic Function Context Dynamic Function Context function add(c, d){ return this.a + this.b + c + d; } var o = {a:1, b:3}; add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
33. Function.prototype.bind Function.prototype.bind var myWidget = { type: 'myAwesomeWidget', clickCallback: function() { console.log(this.type); } } document.getElementById('submit').addEventListener( 'click', myWidget.clickCallback.bind(myWidget) );
34. jQuery jQuery $( "li" ).each(function myIterator(index) { $( this ).text(); }); jQuery controls the context of the callback jQuery controls the context of the callback and and this this becomes each becomes each li li element element
35. Angular Angular angular.module('app') .controller('Customers', function() { var vm = this; vm.title = 'Customers'; }); Angular controls the context of the controller. Angular controls the context of the controller. With With controllerAs controllerAs the context the context becomes becomes bound to the template. bound to the template.
36. angular.module('myApp') .filter('lodash', function() { return function(input, method) { var args = [input].concat( Array.prototype.slice.call(arguments, 2) ); return _[method].apply(_, args); } });
37. import _ from 'lodash'; import angular from 'angular'; angular.module('app') .filter('lodash', function() { return (input, method, ...args) => ( _[method].apply(_, [input, ...args]) ) });
38. 1. http://ryanmorr.com/understanding-scope-and-context-in-javascript/ 2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this 3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures 4. http://eloquentjavascript.net 5. JS 2015-2016 - https://babeljs.io/ 6. Axel Rauschmayer - http://www.2ality.com/ Resources Resources