JavaScript Abstraction
-
Upload
-milan-adamovsky- -
Category
Technology
-
view
480 -
download
3
description
Transcript of JavaScript Abstraction
![Page 1: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/1.jpg)
JavaScriptAbstraction in Implementation
!by Milan Adamovsky
http://milan.adamovsky.com ◆ http://www.hardcorejs.com
![Page 2: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/2.jpg)
Preface
• Based on personal observations
• Spanning over 15 companies
• Small companies to mostly enterprise
• Not based on comprehensive research
• Full life cycle of web development
![Page 3: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/3.jpg)
Quick Exercise
![Page 4: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/4.jpg)
Analyze<html> <head> <title> This is the title of the page </title> </head> <body> <p id="main_content"> This is my content </p> <ul> <li class="first"> One <li> Two <ol> <li class="first"> A </ol> <li> </ul> </body></html>
![Page 5: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/5.jpg)
Analysis
• A document
• A tree of hierarchal nodes off of root node
• Two children nodes off of root node
• Second child node has two children nodes
• Two children nodes are siblings
![Page 6: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/6.jpg)
Overview
• Ultimate goal is to write less code
• Increase reusability
• Change way of thinking
• Change way of coding
• Anticipate future code evolution
![Page 7: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/7.jpg)
Quick Example
![Page 8: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/8.jpg)
Beforefunction resolveFirstName(person) { if (person.firstName) return person.firstName; else return "First name could not be found!";}!function findAge(person) { return person.age;}!function printOutName(person) { if (cookie === "senior") { findAge() + 20; resolveAddress(); } return person.lastName || "No last name was found on record!";}
![Page 9: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/9.jpg)
Afterfunction errorMessage(descriptor) { return ({ age : "Age could not be determined", firstName : "First name could not be found!", lastName : "No last name was found on record!" })[descriptor];}!function resolveDescriptor(descriptor) { return typeof this[descriptor] !== "undefined" ? this[descriptor] : errorMessage(descriptor);}!function resolveSeniority() { if (cookie === "senior") { findAge() + 20; resolveAddress(); }}
![Page 10: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/10.jpg)
Paradigms
![Page 11: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/11.jpg)
Overloading
• One function serves multiple purposes
• Argument signature determines function
• Must differ by arity or data types
• Same function name
• JavaScript can only simulate overloading
![Page 12: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/12.jpg)
Examplefunction addMethod(object, name, fn){ // addMethod - By John Resig (MIT Licensed) var old = object[ name ]; object[ name ] = function(){ if ( fn.length == arguments.length ) return fn.apply( this, arguments ); else if ( typeof old == 'function' ) return old.apply( this, arguments ); };}function Users(){ addMethod(this, "find", function(){ // Find all users... }); addMethod(this, "find", function(name){ // Find a user by name }); addMethod(this, "find", function(first, last){ // Find a user by first and last name });}
![Page 13: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/13.jpg)
Usagevar users = new Users();!users.find(); // Finds all!users.find("John"); // Finds users by name!users.find("John", "Resig"); // Finds users by first and last name!users.find("John", "E", "Resig"); // Does nothing
![Page 14: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/14.jpg)
Events
• Usually we couple an event to a function
• Sometimes many functions to one event
• We know what happens on an event
• We should not care what happens
• Decouple handlers from events
![Page 15: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/15.jpg)
Click
function () { alert(‘hello world!’); }
Coupled Binding
![Page 16: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/16.jpg)
Decoupled Binding
Click
function () { alert(‘hello world!’); }
Greet
Load
![Page 17: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/17.jpg)
Decoupled Binding
function () { alert(‘hello world!’); }
Greet
function
function
![Page 18: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/18.jpg)
OOP
• Object oriented programming
• Base classes are usually most abstract
• Polymorphism
• Duck typing
• Composition
![Page 19: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/19.jpg)
function sayHello() { alert(‘hello world!’); }
Procedural
function joe() { sayHello(); }
joe(); jane();function jane() { sayHello(); }
![Page 20: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/20.jpg)
function sayHello() { alert(‘hello world!’); }
Object Oriented
joe.hi(); jane.hi();
joe = new Person();
jane = new Person();
function Person() { this.hi = sayHello; }
![Page 21: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/21.jpg)
Examplefunction Person(name) { this.hi = sayHello; this.name = name; function sayHello() { console.log('hello world from ' + this.name); }}!function init(names) { var people = []; for (var i = 0, count = names.length; i < count; i++) { people.push(new Person(names[i])); } return people;}function greet(people) { for (var i = 0, count = people.length; i < count; i++) { people[i].hi(); }}greet(init(["Joe", "Jane"]));
![Page 22: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/22.jpg)
Examplevar Rifle = function () { this.reload = function () {}; this.fire = function () { /* ... */ };},!Cannon = function () { this.reload = function () {}; this.fire = function () {};};!var Soldier = function (gun) { this.currentGun = gun; this.inventory = { guns : [ gun ] }; this.attack = function () { this.currentGun.fire(); };};!var Tank = function (gun) { this.currentGun = gun; this.inventory = { guns : [ gun ] }; this.attack = function () { this.currentGun.fire(); };};!var soldier = new Soldier( new Rifle() ), tank = new Tank( new Cannon() );
![Page 23: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/23.jpg)
Examplevar Rifle = function () { this.reload = function () {}; this.fire = function () { /* ... */ };},!Cannon = function () { this.reload = function () {}; this.fire = function () {};};!var Combatant = function (gun) { this.currentGun = gun; this.inventory = { guns : [ gun ] }; this.attack = function () { this.currentGun.fire(); };};!var soldier = new Combatant( new Rifle() ), tank = new Combatant( new Cannon() );
![Page 24: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/24.jpg)
MVC
• Abstraction engrained in architecture
• Separation of concerns (SoC)
• Decouple model, view, controller
• Each component replaceable
• Any of these can be further abstracted
![Page 25: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/25.jpg)
Traditional
HTML
CSS
JS
![Page 26: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/26.jpg)
MVC
HTML
JS
CSS
Data
![Page 27: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/27.jpg)
Examplefunction controller(model, view) { var items = “";! for (var i = 0, count = model.items.length; i < count; i++) { items += view.item.replace("{{item}}", model.items[i]); }! return view.list.replace("{{items}}", items);}!var view = { item : "<li>{{item}}</li>", list : "<ul>{{items}}</ul>"};!var model = { items : [1, 2, 3]};!console.log(controller(model, view));
![Page 28: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/28.jpg)
RWD / AWD
• Responsive responds to screen widths
• Adaptive adapts to devices
• Use mobile-first approach in all code
• Segment code to accommodate growth
• Use lazy loaders and module patterns
![Page 29: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/29.jpg)
Coding
![Page 30: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/30.jpg)
Thought Process
• Do not care for specifics
• Do not care who calls what
• Assume anyone can call anything
• Assume anything can contain anything
• Think interfaces not internals
![Page 31: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/31.jpg)
APIs
• Make them intuitive
• Do not rely on documentation
• Provide switches for easy customization
• Prioritize flexibility and agility of code
• Design functions to handle one thing
![Page 32: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/32.jpg)
Nomenclature
• Generalize identifiers
• Don’t over-generalize, stay within context
• Reverse name groupings
• Group related variables in objects
![Page 33: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/33.jpg)
Beforefunction buildPage() { var facebookIcon = "http://www.facebook.com/icon.png"; while (someConditionIsTrue()){ doSomeWork(); } var i = resolveTwitterIcon(); }!var PinterestSmallLogo = pinterest();!buildPage();
![Page 34: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/34.jpg)
Improvingfunction buildPage() { var iconFacebook = "http://www.facebook.com/icon.png"; while (someConditionIsTrue()){ doSomeWork(); } var iconTwitter = resolveTwitterIcon(); }!var iconPinterest = pinterest();!buildPage();
![Page 35: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/35.jpg)
Afterfunction buildPage(icons) { icons.facebook = "http://www.facebook.com/icon.png"; while (someConditionIsTrue()){ doSomeWork(); } icons.twitter = resolveTwitterIcon(); }!var icons = { facebook : "", pinterest : pinterest(), twitter : ""};!buildPage(icons);
![Page 36: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/36.jpg)
Habit Forming
• Adhere to strict coding style
• Remove comments
• Progressively generalize identifiers
• Identify similar patterns to normalize
• Code in anticipation for change
![Page 37: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/37.jpg)
Generalize
• This will do something
• When something happens
• It will take some parameters
• Parameters will map to some object
• The outcome will be specific to context
![Page 38: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/38.jpg)
Examplefunction initModules() { for (module in app.modules) { if (app.modules[module].init && app.modules[module].checked()) { if (app.modules[module].init.call(this, arguments)) { initialized++; } } } }function initModules() { var module; for (moduleName in app.modules) { module = app.modules[moduleName]; if (module.init && module.checked()) { if (module.init.call(this, arguments)) { initialized++; } } } }
![Page 39: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/39.jpg)
Considerations
• Balance performance
• Balance maintainability
• Strive for quality
• Balance code base size
• Balance complexity
![Page 40: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/40.jpg)
Exercise
0
1 2 3
4 5 6
7 8 9
+ 0 *
Update on button click
White border on click
Gray background
![Page 41: JavaScript Abstraction](https://reader034.fdocuments.in/reader034/viewer/2022051313/54829402b07959330c8b4846/html5/thumbnails/41.jpg)
Connect
• Thank you for your time
• Connect with me on LinkedIn
• Join the Hardcore JavaScript community
• Read my blog
• Contact me via e-mail