Creativity vs Best
Practices
Supun Dissanayake
Overview
 Creativity Vs. Best Practices
 More on Best Practices
 Anti-Patterns (or bad Practices)
 Good practices on code Modifiability
 SOLID Principles
 How JavaScript differes from Java/C#
Creativity Vs. Best Practices
1. Fun!.
2. May be unnecessary.
3. May yield the best.
4. May be associated with a
higher risk.
1.
2.
3.
4.
What Makes a Best Practice?
 Practicable
 Is the practice realistic and feasible in your situation?
 Generally Accepted/Widely Used
 Is the practice commonly used, understood, and documented?
 Valuable
 Is the practice expected to solve problems, improve delivery,
increase quality, or mend relationships?
 Archetypical
 Is there a clear model with examples to follow?
What do Best Practices Aim to Improve?
 Quality
 Delivery
 Improved productivity and efficiency and the ability to meet
deadlines and milestones.
 i.e. Unit testing, IDEs, Code Generators
 Relationships
 Facilitates good interaction between teams and individuals.
Software Anti-Patterns
 Silver Bullet
 Bleeding Edge
 Peter Principle
 Swiss Army Knife
Social Anti-Patterns
 Criminal
 Terrorist
 Pervert
 Drug Addict
Anti-Patterns (Bad practices)
Burnout
 The cynicism, depression, and lethargy of burnout can occur when you're not in control of
how you carry out your job (Psychology Today)
•
•
•
•
Removing Mental Blocks
 If you can’t solve the problem, change the problem to one you can
solve.
 If the new problem is “close enough” to what is needed, then
closure is reached.
 If it is not close enough, the solution to the revised problem may
suggest new venues for attacking the original
Analogy Searching
 Examine other fields and disciplines unrelated to the target problem for approaches and ideas
that are analogous to the problem.
 Formulate a solution strategy based upon that analogy.
 A common “unrelated domain” that has yielded a variety of solutions is nature, especially the
biological sciences.
 ● E.g., Neural Networks, Genetic Algorithms
Brainstorming
 Technique of rapidly generating a wide set of ideas and thoughts
pertaining to a design problem
 without (initially) devoting effort to assessing the feasibility.
 Brainstorming can be done by an individual or, more commonly, by a
group.
 Problem: A brainstorming session can generate a large number of
ideas… all of which might be low-quality.
 The chief value of brainstorming is in identifying categories of
possible designs, not any specific design solution suggested during a
session.
 After brainstorm the design process may proceed to the
Transformation and Convergence steps.
Literature Searching
 Examining published information to identify material that can be used to guide or inspire designers
 Many historically useful ways of searching “literature” are available
 Digital library collections make searching extraordinarily
 Faster and more effective
● IEEE Xplore
● ACM Digital Library
● Google Scholar
 The availability of free and open-source software adds
 Special value to this technique.
Some Other Principles
 KISS – Keep it Simple Stupid
 DRY – Don’t Repeat Yourself
 YAGNI – You Ain’t gonna need it.
 Worse is Better
Quality attributes of software
Functionality
Performance
Security
Availability
Modifiability
Usability
Scalability
Trading off quality attributes
 You can achieve all the quality attributes at a time
 Quality attributes have to be prioritized accordingly.
 Therefore you have to give up certain quality
attributes.
Performance Security
Maintainability Reliability
Current Cost Future Cost
Modifiability
 Some of the tactics in more abstract level.
 Maintain coherence
 Anticipate expected changes
 Generalize the module
 Limit possible options
 Register modules at runtime (plugins/extensions)
 Use Configuration Files
 Use Polymorphism
SOLID Principles
SOLID are five basic principles which help to create good software architecture for object oriented
design. SOLID is an acronym where:
 SRP - Single Responsibility Principle
 OCP – Open Close Principle
 LSP – Liscov Substitution Principle
 ISP – Interface Segregation Principle
 DIP – Dependency Inversion Principle
(S)ingle Responsibility Principle
 There should never be more than one responsibility for a
class.
 When a class has multiple responsibilities, the likelihood
that it will need to be changed increases.
 Risk of increasing bugs grow each time a class is modified.
 By concentrating on a single responsibility, this risk is
limited.
(O)pen Close Principle
 Software entities (classes, modules, functions, etc.) should be
open for extension but closed for modification
 The "closed" part of the rule states that once a module has
been developed and tested, the code should only be adjusted
to correct bugs.
 The "open" part says that you should be able to extend existing
code in order to introduce new functionality.
(L)iscov Substitution Principle
 Functions that use pointers or references to base
classes must be able to use objects of derived classes
without knowing it.
 code that uses a base class must be able to substitute
a subclass without knowing it
(I)nterface Segregation Principle
 Clients should not be forced to depend upon interfaces that they
do not use
 Often when you create a class with a large number of methods
and properties, the class is used by other types that only require
access to one or two members. The classes are more tightly
coupled as the number of members they are aware of grows
(D)ependency Inversion Principle
 High level modules should not depend upon low level
modules. Both should depend upon abstractions.
 Abstractions should not depend upon details. Details should
depend upon abstractions.
JavaScript Features & Best Practices
 Basic Stuff
 Dynamic language features of JavaScript
 Prototype based inheritance
 Closures
 Java is a dynamic language as opposed to static languages such as
C#/Java
Data Types in JavaScript
 String
 Number
 Boolean
 Object
 Array
 Note that there’s no Class type in JavaScript!!!.
Object Literals
var empty_object = {};
var employee = {
first-name: “Supun",
last-name: “Dissanayake“,
sayHello: function(){
document.write (“hello”);
}
};
function employee (firstName, lastName){
this.firstName = firstName;
This.lastName = lastName;
function sayHello(){
document.write (“hello”);
}
}
Constructor Arguments
Constructor
Dynamic nature of JavaScript
var person = {
firstName: “Supun”,
lastName:”Dissanayake”
};
person.id = “120”; //YOU CAN ADD MEMBERS AT RUNTIME
person[“id”] = “300”; //YOU CAN MODIFY A MEMBER WITH A STRING
console.log (person[“id”]); // YOU CAN RETRIEVE A MEMBER WITH A STRING
delete person.id; // YOU CAN DELETE MEMEBERS AT RUNTIME
var text = “”;
for (x in person) { //YOU CAN ALSO ITEREATE MEMBERS IN AN OBJECT
text += person[x];
}
(Prototype Based) Inheritance
 Every object is linked to a prototype object from which it can inherit properties.
 You can inherit functions, attributes, and objects with prototypes.
 In C#/Java you inherit classes in JavaScript you inherit by cloning objects.
var person = {
firstName: “Supun”,
lastName:”Dissanayake”
};
person.Id = “120”;
person.prototype.employeeId = “100”;
console.log(person.Id); – WORKS!!!
console.log (person.employeeId); - WONT WORK!!!
var employee = new person();
console.log (employee.employeeId); - Works!!!
Closures
var person = function (fName) {
var creditCardNumber = “123”;
var firstName = fName;
return {
getName: function () {
return firstName;
}
};
};
var supun = new person(“Supun”);
console.log(supun.getName()); //WORKS!!!
console.log(supun.creditCardNumber); //DOESN’T WORK!!!
 Enables you to hide members inside an object (define private members in JavaScript)
Cascades
getElement('myBoxDiv').move(350, 150)
.width(100)
.height(100)
.appendText("Please stand by");
var element =getElement('myBoxDiv');
element.move(350, 150);
element.width(100);
element.height(100);
element.appendText("Please stand by");
function element(name){
function move(top,left){
//your logic goes here
return this;
}
function width(width){
return this;
}
}
With Cascades
Without Cascades
How to Implement
 Enables you to write more organized code by reducing the number of lines.
Questions?

Creativity vs Best Practices

  • 1.
  • 2.
    Overview  Creativity Vs.Best Practices  More on Best Practices  Anti-Patterns (or bad Practices)  Good practices on code Modifiability  SOLID Principles  How JavaScript differes from Java/C#
  • 3.
    Creativity Vs. BestPractices 1. Fun!. 2. May be unnecessary. 3. May yield the best. 4. May be associated with a higher risk. 1. 2. 3. 4.
  • 4.
    What Makes aBest Practice?  Practicable  Is the practice realistic and feasible in your situation?  Generally Accepted/Widely Used  Is the practice commonly used, understood, and documented?  Valuable  Is the practice expected to solve problems, improve delivery, increase quality, or mend relationships?  Archetypical  Is there a clear model with examples to follow?
  • 5.
    What do BestPractices Aim to Improve?  Quality  Delivery  Improved productivity and efficiency and the ability to meet deadlines and milestones.  i.e. Unit testing, IDEs, Code Generators  Relationships  Facilitates good interaction between teams and individuals.
  • 6.
    Software Anti-Patterns  SilverBullet  Bleeding Edge  Peter Principle  Swiss Army Knife Social Anti-Patterns  Criminal  Terrorist  Pervert  Drug Addict Anti-Patterns (Bad practices)
  • 7.
    Burnout  The cynicism,depression, and lethargy of burnout can occur when you're not in control of how you carry out your job (Psychology Today) • • • •
  • 8.
    Removing Mental Blocks If you can’t solve the problem, change the problem to one you can solve.  If the new problem is “close enough” to what is needed, then closure is reached.  If it is not close enough, the solution to the revised problem may suggest new venues for attacking the original
  • 9.
    Analogy Searching  Examineother fields and disciplines unrelated to the target problem for approaches and ideas that are analogous to the problem.  Formulate a solution strategy based upon that analogy.  A common “unrelated domain” that has yielded a variety of solutions is nature, especially the biological sciences.  ● E.g., Neural Networks, Genetic Algorithms
  • 10.
    Brainstorming  Technique ofrapidly generating a wide set of ideas and thoughts pertaining to a design problem  without (initially) devoting effort to assessing the feasibility.  Brainstorming can be done by an individual or, more commonly, by a group.  Problem: A brainstorming session can generate a large number of ideas… all of which might be low-quality.  The chief value of brainstorming is in identifying categories of possible designs, not any specific design solution suggested during a session.  After brainstorm the design process may proceed to the Transformation and Convergence steps.
  • 11.
    Literature Searching  Examiningpublished information to identify material that can be used to guide or inspire designers  Many historically useful ways of searching “literature” are available  Digital library collections make searching extraordinarily  Faster and more effective ● IEEE Xplore ● ACM Digital Library ● Google Scholar  The availability of free and open-source software adds  Special value to this technique.
  • 12.
    Some Other Principles KISS – Keep it Simple Stupid  DRY – Don’t Repeat Yourself  YAGNI – You Ain’t gonna need it.  Worse is Better
  • 13.
    Quality attributes ofsoftware Functionality Performance Security Availability Modifiability Usability Scalability
  • 14.
    Trading off qualityattributes  You can achieve all the quality attributes at a time  Quality attributes have to be prioritized accordingly.  Therefore you have to give up certain quality attributes. Performance Security Maintainability Reliability Current Cost Future Cost
  • 15.
    Modifiability  Some ofthe tactics in more abstract level.  Maintain coherence  Anticipate expected changes  Generalize the module  Limit possible options  Register modules at runtime (plugins/extensions)  Use Configuration Files  Use Polymorphism
  • 16.
    SOLID Principles SOLID arefive basic principles which help to create good software architecture for object oriented design. SOLID is an acronym where:  SRP - Single Responsibility Principle  OCP – Open Close Principle  LSP – Liscov Substitution Principle  ISP – Interface Segregation Principle  DIP – Dependency Inversion Principle
  • 17.
    (S)ingle Responsibility Principle There should never be more than one responsibility for a class.  When a class has multiple responsibilities, the likelihood that it will need to be changed increases.  Risk of increasing bugs grow each time a class is modified.  By concentrating on a single responsibility, this risk is limited.
  • 18.
    (O)pen Close Principle Software entities (classes, modules, functions, etc.) should be open for extension but closed for modification  The "closed" part of the rule states that once a module has been developed and tested, the code should only be adjusted to correct bugs.  The "open" part says that you should be able to extend existing code in order to introduce new functionality.
  • 19.
    (L)iscov Substitution Principle Functions that use pointers or references to base classes must be able to use objects of derived classes without knowing it.  code that uses a base class must be able to substitute a subclass without knowing it
  • 20.
    (I)nterface Segregation Principle Clients should not be forced to depend upon interfaces that they do not use  Often when you create a class with a large number of methods and properties, the class is used by other types that only require access to one or two members. The classes are more tightly coupled as the number of members they are aware of grows
  • 21.
    (D)ependency Inversion Principle High level modules should not depend upon low level modules. Both should depend upon abstractions.  Abstractions should not depend upon details. Details should depend upon abstractions.
  • 22.
    JavaScript Features &Best Practices  Basic Stuff  Dynamic language features of JavaScript  Prototype based inheritance  Closures  Java is a dynamic language as opposed to static languages such as C#/Java
  • 23.
    Data Types inJavaScript  String  Number  Boolean  Object  Array  Note that there’s no Class type in JavaScript!!!.
  • 24.
    Object Literals var empty_object= {}; var employee = { first-name: “Supun", last-name: “Dissanayake“, sayHello: function(){ document.write (“hello”); } }; function employee (firstName, lastName){ this.firstName = firstName; This.lastName = lastName; function sayHello(){ document.write (“hello”); } } Constructor Arguments Constructor
  • 25.
    Dynamic nature ofJavaScript var person = { firstName: “Supun”, lastName:”Dissanayake” }; person.id = “120”; //YOU CAN ADD MEMBERS AT RUNTIME person[“id”] = “300”; //YOU CAN MODIFY A MEMBER WITH A STRING console.log (person[“id”]); // YOU CAN RETRIEVE A MEMBER WITH A STRING delete person.id; // YOU CAN DELETE MEMEBERS AT RUNTIME var text = “”; for (x in person) { //YOU CAN ALSO ITEREATE MEMBERS IN AN OBJECT text += person[x]; }
  • 26.
    (Prototype Based) Inheritance Every object is linked to a prototype object from which it can inherit properties.  You can inherit functions, attributes, and objects with prototypes.  In C#/Java you inherit classes in JavaScript you inherit by cloning objects. var person = { firstName: “Supun”, lastName:”Dissanayake” }; person.Id = “120”; person.prototype.employeeId = “100”; console.log(person.Id); – WORKS!!! console.log (person.employeeId); - WONT WORK!!! var employee = new person(); console.log (employee.employeeId); - Works!!!
  • 27.
    Closures var person =function (fName) { var creditCardNumber = “123”; var firstName = fName; return { getName: function () { return firstName; } }; }; var supun = new person(“Supun”); console.log(supun.getName()); //WORKS!!! console.log(supun.creditCardNumber); //DOESN’T WORK!!!  Enables you to hide members inside an object (define private members in JavaScript)
  • 28.
    Cascades getElement('myBoxDiv').move(350, 150) .width(100) .height(100) .appendText("Please standby"); var element =getElement('myBoxDiv'); element.move(350, 150); element.width(100); element.height(100); element.appendText("Please stand by"); function element(name){ function move(top,left){ //your logic goes here return this; } function width(width){ return this; } } With Cascades Without Cascades How to Implement  Enables you to write more organized code by reducing the number of lines.
  • 29.