Pixfirst

pixfirst

Many are wondering whether Golang is a language that can apply the Object Oriented Programming paradigm. Let's discuss this here. First of all, we have to know what is meant by Object-Oriented Programming, after that we will try to answer the question of whether GO can implement Object-Oriented Programming. Object-Oriented Programming (OOP) By definition Object Oriented Programming means that this paradigm focuses on objects, objects in a language are made of classes or entities. So by definition, Object-Oriented Programming means an object-focused paradigm.¹ Conceptually, the Object-Oriented Programming paradigm has four main concepts, namely abstraction, encapsulation, inheritance, and polymorphism.² Can GO implement Object-Oriented Programming? Can GO create objects from classes or entities? Let's try to prove it // class or entity or struct
type Person struct {
	// attributes
	FirstName string
	LastName  string
}

// method
func (p *Person) fullname() string {
	return p.FirstName + " " + p.LastName
}

func main() {
	john := Person{
		FirstName: "John",
		LastName:  "Travolta",
	}

	fmt.Println(john.fullname()) // John Travolta

} The answer is yes, in GO we can create an Object from a class/entity, a class in GO is also called a lightweight struct.³
By definition, GO can apply the Object-Oriented Programming paradigm. What about the main concept of Object-Oriented Programming? This question has caused a lot of debate on "which GO language can implement Object-Oriented Programming or not". Let's discuss the concepts one by one. Abstraction Abstraction is a concept that allows us to hide complexity in the implementation, and only provide information that the user needs or uses. For example, we will create two employee abstractions that will be used by the payroll department and employee managers. The payroll section requires the name and amount of the salary, so the employee abstraction in the payroll package contains only the function which returns how much salary to use. we hide the difficulty of calculating salaries, calculating bonuses, and . GetName CalculateSalary how performance affects bonuses is not required by payroll package payroll

// employee abstraction on finance
type EmployeeOnPayroll interface {
	GetName() string
	CalculateSalary() float64
}

func Work(employees ...EmployeeOnPayroll) {
	for _, employee := range employees {
		fmt.Println(employee.GetName(), "salary is", employee.CalculateSalary())
	}
} Likewise, the manager only needs a function to assess performance, so the employee abstraction on the manager's side only contains the function, . SetPerformance no other functions such as CalculateSalary are needed package manager

// employee abstraction on manager 
type EmployeeOnManager interface {
	SetPerformance(performance employee.Performance)
}

func Work(employees ...EmployeeOnManager) {
	for i, employee := range employees {
		employee.SetPerformance(employee.Performance(i % 3))
	}
} In our package, the implementation, and all the hassle of calculating salaries and bonuses are . employee hidden from other packages package employee

// performance constant
type Performance int32
const (
	Bad Performance = iota
	Good
	Great
)

type Employee struct {
	// attributes
	Name        string
	BasicSalary float64
	performance Performance
}

// employee method
func (e *Employee) GetName() string {
	return e.Name
}

func (e *Employee) SetPerformance(performance Performance) {
	e.performance = performance
}

func (e *Employee) CalculateSalary() float64 {
	salary := e.BasicSalary
	salary += e.calculateBonus()
	/*
		Do more calculation
	*/
	return salary
}

func (e *Employee) calculateBonus() float64 {
	switch e.performance {
	case Great:
		return e.BasicSalary
	case Good:
		return e.BasicSalary / 2
	default:
		return 0
	}
} In the main package, we can see how the abstraction we have created works. package main

/*
imports ...
*/

func main() {
	john := &employee.Employee{Name: "John", BasicSalary: 3000}
	jane := &employee.Employee{Name: "Jane", BasicSalary: 2000}
	bane := &employee.Employee{Name: "Bane", BasicSalary: 1500}
	manager.Work(john, jane, bane)
	payroll.Work(john, jane, bane)
	/*
	  John salary is 3000
	  Jane salary is 3000
	  Bane salary is 3000
	*/
} Even though John, Jane, and Bane have different base salaries but because of the performance bonus, in the end, they get the same salary. Encapsulation Encapsulation is the concept of how we can protect data or functions on an entity, thus avoiding the wrong use or unwanted data changes. Applying Encapsulation to Golang is quite easy, the use of lowercase in the first letter of naming attributes and methods indicates that the methods and attributes are private (cannot be accessed from outside the package).
For example, we can see the attribute (line 15) and the method (line 36) in the employee package. performance calculateBonus package employee

// performance constant
type Performance int32
const (
	Bad Performance = iota
	Good
	Great
)

type Employee struct {
	// attributes
	Name        string
	BasicSalary float64
	performance Performance // performance is private attribute
}

// employee method
func (e *Employee) GetName() string {
	return e.Name
}

func (e *Employee) SetPerformance(performance Performance) {
	e.performance = performance
}

func (e *Employee) CalculateSalary() float64 {
	salary := e.BasicSalary
	salary += e.calculateBonus()
	/*
		Do more calculation
	*/
	return salary
}

func (e *Employee) calculateBonus() float64 { // caculateBonus is private method
	switch e.performance {
	case Great:
		return e.BasicSalary
	case Good:
		return e.BasicSalary / 2
	default:
		return 0
	}
} Inheritance Inheritance is a concept where we can inherit methods and attributes from an existing class (parent class) to a newly created class (child class). GO does not have Inheritance, but can use Composition as a solution even though it is still different from Inheritance, if Inheritance we can treat child classes as parent classes, while with Composition in GO we have to create interfaces if we want to use parent classes and child classes in the same place. if you wonder why? you can read an article from Rob Pike or Golang FAQ about inheritance . here here Composition in GO is quite easy to do, just add the base struct (parent class) to the newly created struct attribute. For example in line 4, we combine the struct with the struct.
The Supervisor automatically gets all the methods and attributes of the Employee. Employee Supervisor package employee

type Supervisor struct {
	Employee  // composite Employee to Supervisor
	SupervisorBonus float64
}

// Overriding CalculateSalary function from Employee Struct
func (s *Supervisor) CalculateSalary() float64 {
	salary := s.BasicSalary
	salary += s.calculateBonus()
  
        // add supervisor bonus to salary
	salary += s.SupervisorBonus
	/*
		Do more calculation
	*/
	return salary
} Because it gets all the methods and attributes of the , the can be directly used in the and interfaces. Employee Supervisor EmployeeOnManager EmployeeOnPayroll package main

/*
imports ...
*/

func main() {
	john := &employee.Employee{Name: "John", BasicSalary: 3000}
	jane := &employee.Supervisor{
		Employee:        employee.Employee{Name: "Jane", BasicSalary: 2000},
		SupervisorBonus: 500,
	}
	bane := &employee.Employee{Name: "Bane", BasicSalary: 1500}
	manager.Work(john, jane, bane)
	payroll.Work(john, jane, bane)
        /*
          John salary is 3000
          Jane salary is 3500
          Bane salary is 3000
        */
} Polymorphism Polymorphism consists of two words, namely Poly which means many, and Morph which means form. Usually, in Object-Oriented Programming, there are two ways to apply Polymorphism, namely Overloading and Overriding. Overloading allows a class to have methods with the same name but have different parameters or return parameters. Overriding allows the child class to have the same method (name, parameter, and return parameters) as the parent class but with a different implementation, when the method is called, the implementation of the child class will be used. Golang can apply Overriding, but cannot apply Overloading. Why? You can read the explanation in GO FAQ . here The implementation of overriding in GO is similar to Java or Javascript. After we do the composition for the child class we can create a method in the child class with the same name, parameters, and return parameters as the method we want to override. For example, the method on the struct on line 9. The actually already has a method obtained from the struct, but we need to override it because there are different ways of calculating. CalculateSalary Supervisor Supervisor CalculateSalary Employee package employee

type Supervisor struct {
	Employee  // composite Employee to Supervisor
	SupervisorBonus float64
}

// Overriding CalculateSalary function from Employee Struct
func (s *Supervisor) CalculateSalary() float64 {
	salary := s.BasicSalary
	salary += s.calculateBonus()
  
    // add supervisor bonus to salary
	salary += s.SupervisorBonus
	/*
		Do more calculation
	*/
	return salary
} With overriding, Jane's salary calculation result changed from 3000 to 3500, because was added to her salary. SupervisorBonus package main

/*
imports ...
*/

func main() {
	john := &employee.Employee{Name: "John", BasicSalary: 3000}
	jane := &employee.Supervisor{
		Employee:        employee.Employee{Name: "Jane", BasicSalary: 2000},
		SupervisorBonus: 500,
	}
	bane := &employee.Employee{Name: "Bane", BasicSalary: 1500}
	manager.Work(john, jane, bane)
	payroll.Work(john, jane, bane)
        /*
          John salary is 3000
          Jane salary is 3500
          Bane salary is 3000
        */
} Conclusion So is Golang an object-oriented programming language? I will quote two versions of the answer. , GO is Object-Oriented, but in an unusual way.⁴ Yes , although Go has types and methods, and allows "style" Object-Oriented Programming, but GO does not have a hierarchy (inheritance). The GO “interface” concept (because it uses Composition, not Inheritance) provides a different approach that GO's creators believe is easier to use in more general terms.⁵ Yes and No References ¹__ __ ²__ __ ³__ __ ⁴__ __ ⁵__ __ https://www.javatpoint.com/what-is-object-oriented-programming https://www.freecodecamp.org/news/object-oriented-programming-concepts-21bb035f7260/ https://www.geeksforgeeks.org/structure-equality-in-golang/ https://talks.golang.org/2012/chat.slide#5 https://go.dev/doc/faq#Is_Go_an_object-oriented_language Thank you for reading, hopefully, it will be useful for all of us, and we can learn together to be better. If you have questions or want to share or discuss, you can go through the comments column or through my contact on my profile 😁 Also Published here

Does Golang Follow the Object Oriented Programming Paradigm?

Building a Full Stack NFT Minting DApp Using Hardhat, Ethers.js, Next.js, and TailwindCSS

1. Destructuring Assignment Destructuring assignment allows one or more object properties to be assigned to variables in a single expression. The created variable will have the same name as the property. let myObj = {
  id: 1,
  name: 'My Object'
};

// without destructuring assignment
let id = myObj.id;
let name = myObj.name; 
// id = 1, name = 'My Object'

// with destructuring assignment
let { id, name } = myObj;
// id = 1, name = 'My Object' This is most useful when you know that you need to use multiple properties from an object, you need to use the same property multiple times, or the property that you wish to use is deeply nested in that object. In all these cases, using destructuring assignment saves you from all the clutter of getting the object properties through chaining and makes your code more concise and easier to read. For example, I have recently been working a lot with , a Javascript framework for building interactive maps. It is highly customizable and allows you to assign your own properties to different markers on the map. However, accessing these properties can get somewhat messy - we can clean this up with destructuring assignment. Leaflet // without destructuring assignment
function onEachFeature (feature, layer) {
  if (feature.properties.hasPopup) {
    let popupContent = `<a href="/feature/${feature.properties.id}">${feature.properties.name}</a>`;
    layer.bindPopup(popupContent);
  }
}

// with destructuring assignment
function onEachFeature (feature, layer) {
  let { hasPopup, id, name } = feature.properties;

  if (hasPopup) {
    let popupContent = `<a href="/feature/${id}">${name}</a>`;
    layer.bindPopup(popupContent);
  }
} We may have added an additional line of code, but I believe this makes it much clearer and easier to read the intention of this function now. It is also possible to destructure arrays, which allows you to assign one or more elements in that array to variables. However, I do not personally find myself using this syntax often so I won’t cover it any further here. If you wish to learn more, please see the . MDN reference Finally, if you are using a function that has an object as a parameter, it is possible to destructure that object within the parameter list. This saves you the effort of having to explicitly declare the variables yourself and makes it clear which properties are required by the function. function logPerson(person) {
  let { name, age } = options;
  
  console.log(`${name} is ${age} years old`);
}

function logPerson({ name, age }) {
  console.log(`${name} is ${age} years old`);
} 2. Short Circuit Evaluation & Assignment The JavaScript logical operators, AND (&&) and OR (||) are known as short circuit operators because they only evaluate the expression as far as necessary in order to determine the result of the boolean expression. For example, AND requires that both sides of the expression evaluate to true. Therefore, if the left-hand side of the expression evaluates to false, it does not bother to check the right-hand side as it would be a waste of time. Similarly, OR requires that only one side of the expression evaluates to true. Therefore, if the left-hand side evaluates to true, it doesn't bother to check the right-hand side. This short-circuiting can be useful for adding some safety to expressions involving objects. For example, consider the following function: function logIfAdult(person) {
  if(person.age >= 18) {
    console.log("Person is an adult");
  }
} The problem with this implementation is that you cannot guarantee that the person object is not null. If you run this function with a null person, you will get the following error: . Uncaught TypeError: Cannot read property 'age' of null Thanks to short circuit evaluation, we can add some safety like this: function logIfAdult(person) {
  if(person && person.age >= 18) {
    console.log("Person is an adult");
  }
} This is because, if person is null it will evaluate to false (this is because null is a "falsey" value, if this concept is new to you, ), and the whole expression will short circuit. Only if person is not null will the expression move on to check the right-hand side of the expression, at which point we know it is safe to check and we wont get any errors. please read this article too We can exploit this short-circuiting when assigning variables too. For example, consider the following function: function logName(person) {
  let name = person && person.name;
  console.log(name);
}

logName({ name: 'Sam' });
// logs 'Sam'

logName(null)
// logs 'null' What is happening here? Well in the first example, we pass the function a valid person object. Because the person object is not null, the AND operator moves over to the right-hand side of the expression, and assigns the value of to the name variable. In the second example, person is null so the expression short circuits and returns null to the name variable. person.name We can extend this further to log a default name instead of just null. This time we use the OR operator, so we will only use the default value if the person object is null. function logName(person) {
  let name = person && person.name || 'Default Name';
  console.log(name);
}

logName({ name: 'Sam' });
// logs 'Sam'

logName(null)
// logs 'Default Name' 3. Optional Chaining & Nullish Coalescing Operator Short circuit evaluation and assignment is so common that new more concise syntax is being added in to JavaScript to achieve the same aim. These are the optional chaining and nullish coalescing operators. I have decided to include both short-circuiting and optional chaining/null coalescing since, at the time of writing, the latter are newer features and may not be fully compatible with older browsers. The optional chaining operator (?.) allows you to dive into objects without explicitly having to check if the object is not null. If the object is null, then the expression will just return undefined instead of throwing an error. For example, with optional chaining, the logIfAdult function from above can be rewritten as: function logIfAdult(person) {
  if(person?.age >= 18) {
    console.log("Person is an adult");
  }
} The nullish coalescing operator (??) is used to return a default value if the value on the left-hand side of the expression is null. In this way, it replaces the functionality of the OR operator in the logName function above: function logName(person) {
  let name = person?.name ?? 'Default Name';
  console.log(name);
} 4. Named Callback Functions Anonymous functions can be really useful - they can be declared when and where you want, and are great if you only need the function as a one-off. let people = [
  {
    id: 1,
    firstName: 'Sam',
    lastName: 'Walpole',
  },
  ...
];

let viewModels = people.map(p => ({
  id: p.id,
  name: `${p.firstName} ${p.lastName}`,
}));
// viewModels = [{ id: 1, name: 'Sam Walpole' }] However, since the function has no name, you are leaving it up to future developers to work out what the code inside your callback function does - that's ok here, but in longer, more complex functions it may waste unnecessary time. By declaring the function first as a named function, you instantly make the code more readable and give future developers some clues as to the intent of the function. let people = [
  {
    id: 1,
    firstName: 'Sam',
    lastName: 'Walpole',
  },
  ...
];

let toViewModel = p => ({
  id: p.id,
  name: `${p.firstName} ${p.lastName}`,
});

let viewModels = people.map(toViewModel);
// viewModels = [{ id: 1, name: 'Sam Walpole' }] 5. Enums/Dictionaries An enum is a way to store a set of constant values as a type. Most languages have in-built support for enums, but in JavaScript we have to construct them ourselves using an object. const Color = {
  RED: 'RED',
  GREEN: 'GREEN',
  BLUE: 'BLUE',
};

let redCar = {
  make: 'Ferrari',
  model: '812',
  color: Color.RED,
};

let greenCar = {
  make: 'Aston Martin',
  model: 'Vantage',
  color: Color.GREEN, 
}; Enums pair nicely with switch statements for flow control: function getHexColor(car) {
  switch (car.color) {
    case Color.RED:
      return '#ff0000';
    case Color.GREEN:
      return '#00ff00';
    case Color.BLUE:
      return '#0000ff';
  }
} However, sometimes this can be a bit verbose. Instead of using a switch statement here, we could use a dictionary. Dictionaries in JavaScript are declared in a very similar way to enums, but conceptually they have a different purpose. Where enums are a set of constant values, dictionaries are a collection of key/value pairs. function getHexColor(car) {
  let hexColors= {
    [Color.RED]: '#ff0000',
    [Color.GREEN]: '#00ff00',
    [Color.BLUE]: '#0000ff',
  };

  return hexColors[car.color];
} In the above example, we have got rid of the need for a switch statement, as we have created a dictionary with the enum values as the key, and the hex colors as the values. By removing all the clutter of the switch statement, I believe that this leads to much easier-to-read code. Conclusion In this article, I have provided 5 tips that I regularly use in JavaScript to make my code more concise and easy to read. I hope that you have found them helpful and will find the opportunities to use them in your own code. I post mostly about full stack .NET and Vue web development. To make sure that you don't miss out on any posts, please follow this blog and . If you found this post helpful, please like it and share it. You can also find me on . subscribe to my newsletter Twitter

Write Cleaner Code with My Top 5 JavaScript Hacks 

Data Structures and Algorithms: 20 Problem-Solving Techniques

...for Better Code Separation What is this Model, View, Controller (MVC) architectural pattern? Sources: Rails Documentation The architecture divides your code into three (3) layers , and separating the different responsibilities of the program. MVC Models Views Controllers Image from Wikipedia Model Layer This layer in contains the domain model, which generally represents a specific object class (e.g. a Person, Animal, Books). This is where the is usually handled since this model is linked to the and its data is derived from the relative table’s rows. Ruby on Rails business logic database View Layer Handles the representations of the responses provided by the controllers. Since the controller can return information as HTML, XML, JSON, etc. visual Controller Layer In this layer is responsible for with the , its and providing suitable responses to various requests. Rails interacting model manipulating data HTTP Now, what would this MVC pattern look like in JavaScript? Source: MDN web docs Since generally does not involve the use of databases (although it could), nor HTTP request handling (Once again it could), the pattern will have to be tweaked a bit to fit the language specificity. JavaScript MVC Image from MDN Model Layer The can literally be as simple as an but usually it would be a . An application can have and these classes (models) would contain the needed for the app to function. model layer array class multiple models basic data Take for instance a which tracks which classes a person is taking. The models in this case can be divided into classes such as a Classroom, Person and an Array based model called Subjects. E.G. Classroom App Base Model Classes { (id, subject = 'Homeroom') { .id = id; .persons = []; .subject = subject;
  }
} class Classroom constructor this this this The contains data variables which will hold information for each classroom. This would be a list of all the currently enrolled in this classroom, the associated with this classroom and it's . Classroom model persons subject ID { (id, firstN = 'John', lastN = 'Doe') { .id = id; .firstName = firstN; .lastName = lastN; .subjects = []; .classrooms = [];
  }
} class Person constructor this this this this this The contains data variables which will hold information for each person. This would be their and , the that they are studying and which they are apart of. Person model first last name subjects classrooms subjects = [ , , , , , ]; const "English" "Math" "Computer Science" "Business" "Finance" "Home Economics" The will simply be an array, since for this example I have no intention in allowing the subjects model to be manipulated. Subjects model Controller Layer The controller would be a class which translates the user input into changes to the model's data. In the – the controller receives user input from view elements such as text input or select options and button clicks which is used to modify the model. E.G. Classroom App classroomModel ; { () { .lastID = ; .classrooms = []; .selectedClass = ;
  }

  selectClassroom(classroomID) { .selectedClass = .classrooms
    .filter( c.id === (classroomID, ))[ ];
  }

  addClassroom(subject) { .classrooms.push( classroomModel( .lastID, subject)
      ); .lastID += ;
  }

  removeClassroom(classroomID) { .classrooms = .classrooms
      .filter( c.id !== (classroomID, ));
  }

  setSubject(subject, classroomID) { classroom = .classrooms
      .filter( c.id === (classroomID, ))[ ];
    classroom.subject = subject;
  }

  addPerson(person, classroom) { (!person) ;
    classroom.addPerson(person);
  }

  removePerson(person, classroomID) { classroom = .classrooms
    .filter( c.id === (classroomID, ))[ ];
    classroom.removePerson(person);
  }
} import from "../models/classroom" class ClassroomController constructor this 0 this this null this this => c parseInt 10 0 this new this this 1 this this => c parseInt 10 const this => c parseInt 10 0 // const classroom = this.classrooms // .filter(c => c.id === parseInt(classroomID, 10))[0]; if return const this => c parseInt 10 0 The in this case could be seen as a in reference to how operates and each row in this "Table" would be information linked to each classroom object already created. classroom controller Table Rails This controller has variables of its own, " " (Every time a classroom object is created and added to the classrooms array this variable's value increments), " " (an array of all created classroom objects) and " ". three lastID classrooms selectedClass View Layer This layer handles the representation of the app’s data. This layer contains classes which allows the to see and with the . visual User interact data In the – the view would provide elements such as , and (<div/>, <span/ >, <p/>…etc.) to display the various persons and classrooms and their related data. E.G. Classroom App ( ) Document Object Model DOM Buttons Inputs containers classroomController ; subjects ; { (appDiv) { .classroomController = classroomController(); .classroomSectionDiv = .createElement( ); .classroomsDiv = .createElement( ); .addclassBtn = .createElement( ); .selectSubjectInput = .createElement( ); .classroomSectionDiv.classList.add( ); .classroomsDiv.classList.add( ); .selectSubjectInput.innerHTML = subjects.map( ( )); .addclassBtn.textContent = ; .addclassBtn.addEventListener( , () => .addClassroom()); .classroomSectionDiv.append( .classroomsDiv, .selectSubjectInput, .addclassBtn,
      );
    appDiv.appendChild( .classroomSectionDiv);
  }

  updateView() { { classroomController, classroomsDiv } = ; allClassrooms = classroomController.classrooms.map( { removeBtn = .createElement( ); classDiv = .createElement( );
        classDiv.classList.add( ); (classroomController.selectedClass === c) {
          classDiv.classList.add( );
        }
        classDiv.addEventListener( , () => .selectClassroom(classDiv.getAttribute( )));
        classDiv.setAttribute( , c.id);
        removeBtn.addEventListener( , () => .removeClassroom(removeBtn.getAttribute( )));
        removeBtn.setAttribute( , c.id);
        removeBtn.classList.add( );
        removeBtn.textContent= ; allPersons = c.persons.map( ( ));
        classDiv.innerHTML = ;
        classDiv.appendChild(removeBtn); classDiv;
      }
    );
    classroomsDiv.innerHTML= ;
    allClassrooms.map( classroomsDiv.append(div));
  }
  
  selectClassroom(classroomID) { { classroomController } = ;
    classroomController.selectClassroom(classroomID); .updateView();
  }

  addClassroom() { {
      classroomController,
      selectSubjectInput,
    } = ; subjectChosen = selectSubjectInput.value;
    classroomController.addClassroom(subjectChosen); .updateView();
  }

  removeClassroom(classroomID) { { classroomController } = ;
    classroomController.removeClassroom(classroomID); .updateView();
  }

  addPerson(person, classroomID) { { classroomController } = ;
    classroomController.addPerson(person, classroomID); .updateView();
  }
} import from "../controllers/classroom" import from "../models/subjects" class ClassroomView constructor this new this document 'div' this document 'div' this document 'button' this document 'select' this 'classroom-section' this 'classroom-container' this ( ) => option, index `<option key= value= > </option>` ${index} ${option} ${option.toUpperCase()} this 'New Class' this 'click' this this this this this this const this const => c const document 'button' const document 'div' 'classroom' if 'selected' 'click' this 'data-classroom-id' 'data-classroom-id' 'click' this 'data-classroom-id' 'data-classroom-id' 'remove-btn' 'remove' const => p `<div class="person-inline">
            <span class="fname"> </span>
            <span class="lname"> </span>
            <span class=" "> </span>
          </div>` ${p.firstName} ${p.lastName} ${p.occupation} ${p.occupation} `<div class="m-b">
            <span class="id"> </span>
            <span class="subject"> </span></div>
            <div class="all-persons"> </div>` ${c.id} ${c.subject} ${allPersons.join( )} '' return '' => div const this this const this const this const this this const this this The class contains a variable that links to a which is created upon construction. This allows communication with the controller from the view. ClassroomView ClassroomController The function is ran after every change as a result from user Interactions. This function simply updates all related view elements with the appropriate data obtained from the associated model. updateView() DOM All functions within the view simply grab values from the ( elements and transfer them as variables to the controller's functions. The functions , and are all added to the elements via the function as events through the function. User Interface UI) DOM selectClassroom() addClassroom() removeClassroom() DOM updateView() addEventListener() Accessing all controllers and views through a single view Now, since for this example we have two controllers, a and a ( ). We would also have two views and if we wanted these two views to be able to interact with one another we would create a single overarching view. We could call this view the . Classroom Controller Person Controller Shown in full project Application View classroomView ; personView ; { (appDiv) { .classroomView = classroomView(appDiv); .personView = personView(appDiv); .addPersonToClassBtn = .createElement( ); .addPersonToClassBtn.textContent = ; .addPersonToClassBtn.addEventListener( , () => .addPersonToClass());
    appDiv.appendChild( .addPersonToClassBtn);
  }

  addPersonToClass() { { classroomView, personView } = ; { classroomController } = classroomView; { personController } = personView; selectedClassroom = classroomController.selectedClass; selectedPerson = personController.selectedPerson;
    classroomView.addPerson(selectedPerson, selectedClassroom);
    personView.updateView();
  }
} import from './classroom' import from './person' class AppView constructor this new this new this document 'button' this 'Add selected Person to Selected Class' this 'click' this this const this const const const const This class would have it's own variables that would link to both the and views. Since it has access to those two views it also has access to their controllers. ApplicationView classroom person This button above is generated by the view. It grabs the and values from their respective controllers and runs the function in the classroom view upon interaction. Application selectedClassroom selectedPerson addPerson() For a full look at the Classroom App check out the CodeSandBox Here! Some Advantages of Using the MVC Framework Sources: , , , Brainvire c-sharpcorner StackOverflow Wikipedia 1. Separation of Concerns All code related to the is handled by the . All base data variables are contained by the and all model data is changed through the . User Interface view Model Controller 2. Simultaneous Development Since this model clearly separates the project into three (3) layers it becomes a lot easier to separate and assign tasks to multiple developers. MVC 3. Ease of Modification Can easily make changes to each layer without immediately affecting the other layers. 4. Test Driven Development (TDD) With clear separation of concerns it allows the testing of each individual component independently.

How I Adopted the Model, View, Controller (MVC) Architectural Pattern in JavaScript

I am putting my understanding about functor,Applicative and Monad after spending few days to find out what monad is . Here is what I found. I am using Kotlin to explain with examples What is functor Functor can be defines in may ways as below A functor is simply something that can be mapped over. A functor is a data structure which acts like a container holding a generic type Lets define the data type or container to hold value { None : Functor< >() ( value: T) : Functor<T>()   
} < > class Functor T object Nothing data < > class Some out T val While we introduced functors as containers holding a value, sometimes those containers can have interesting properties. For this reason, functors are often described as “ ”. values in a context When a value is wrapped in a context, you can’t apply a normal function to it, and this is where map function comes in to apply normal function to Wrapped Value sealed {

    object None : Functor<Nothing>()

    data = when ( ) {
        is None -> is Some -> Some(f(value))
    }
    companion object {
        fun <A> some(value: A): Functor<A> = Some(value)
    }


} < > class Functor out A < >( : ) : < >() < > ( : ( ) -> ): < > class Some out A val value A Functor A inline infix fun B map f A B Functor B this this Lets apply function on the wrapped value : = value + increment = Functor( ).map {::inc} increment = Functor( ).map {it + } fun inc (value: ) Int Int 1 val 3 //OR val 3 1 So this is functor, the container with map function . Why Are Functors Useful? Because we want to reuse code. Functor generalizes how to map a function from one value to another. Functors are useful because they let us use map with collections, replacing for loops : Because Functor.map returns another Functor with the result of the function passed to map I can chain multiple map functions together Chaining Applicative Functor can only map a function which takes one argument. If we have a function that takes multiple arguments, we need Applicative. Applicative provides abstraction for how to apply a function that takes multiple arguments over multiple values. In Applicative, We can define an apply  function for every type supporting Applicative, which knows how to apply a function wrapped in the context of the type to a value wrapped in the same context: { None : Functor< >() ( value: A) : Functor<A>() -> B): Functor<B> = ( ) { None -> Some -> Some(f(value))
    } { : Functor<A> = Some(value)
    } ( ) { None -> None Some -> f.map( .value)
        }
    
} sealed < > class Functor out A object Nothing data < > class Some out A val inline infix fun <B> map (f: ( ) A when this is this is companion object fun <A> some (value: ) A infix <A, B> Functor<(A) -> B>.apply(f: Functor<A>): Functor<B> = fun when this is is this If you look carefully you will see that our operator only works in this specific order: Option(function) apply Option(value) Examples 1 : Apply a function that takes two arguments to two wrapped values = { b: ->
             a + b
         }
 Some( ) map ::curriedAddition map Some( ) Some( ) map ::curriedAddition apply Some( ) fun curriedAddition (a: ) Int Int 3 2 // => COMPILER ERROR// Use applicative 3 2 Apply triple product function: fun tripleProduct(a: Int, : Int, : Int) = a * b * c

fun <A, B, C, D> curry(f: (A, B, C) -> D): (A) -> (B) -> (C) -> D = { a -> { b -> { c -> f(a, b, c) } } }
 
Some( ) map curry(::tripleProduct) apply Some( ) apply Some( ) b c 3 5 4 // => Some(60) Monads Before we start with Monads, it is important to understand in kotlin function composition Function Composition Function composition is a technique to build functions using existing functions Function Composition takes the result of invoking the right-hand function as the parameter for the left-hand function. Take a Example of adding one and multiplying 3 to given number val add : (Int) -> Int = {x -> x + }
val mult : (Int) -> Int = { y -> y * }fun <A,B,C>composeF(f: (B) -> C, : (A) ->B) { { x -> f(g(x)) }
}
val addOneThenMul3 = composeF(::mul3, ::add1)
 
print(addOneThenMul3( )) 1 3 g return 2 // output 9 Take another Example , you will get the input as String of two digit separated by comma, you have to divide first digit by second digit . For Input= "126,3" , output should be output= 126/3 = 4 To solve this issue, we are going to breakdown problem in three function — Splitting — Parsing — Division We usually do this using composition as below splitString : (String) -> Pair<Stirng,String> = {
        s ->  s.split( ).first() to s.split( ).last()
} parseToDouble : (Pair<String,String>) -> Pair< , > = {d -> d.first.toDouble() to  d.second.toDouble()} division : (Pair< , >) -> = {d -> d.first/d.second}f

un <A,B,C>composeF(f: (B) -> C, g: (A) ->B) { { x -> f(g(x)) }
 } result = composeF(composeF(division,parseToDouble),splitString)
print(result( )) val "," "," val Double Double val Double Double Double return val "126,3" // 42 Above use case for composition is not perfect , the reason because things can go wrong, like split function may return exception because these is no comma in between two digits, parse function may fail may be there is no number and eventually the result can fail For any exceptions, the program can be partial , then what we can do One way to do this is we compose these functions in a way to return “Embellished” results, That mean we can wrap the result in class ( ) and that is where the term comes Functor Monad Monads Monads are the mechanism which makes automatic composition of special kids of functions In another word, is minimal amount of structure needed to overload functional composition in a way to perform extra computation on the intermediate value Monad Understand Monad with above use case of split, parse divide To solve above above composition problem , we have to wrap the result in context of each function, so lets do it To wrap value we need Functor { None : Result< >() ( value: T) : Result<T>()
 } sealed < > class Result out T object Nothing data < > class Some out T val And modify functions to return wrap result split : (String) -> Result<Pair<String,String>> = { s -> listString = s.split( )
    Some(listString.first() to listString.last())
} parse : (Pair<String,String>) -> Result<Pair< , >> = {pair -> Some(pair.first.toDouble() to pair.second.toDouble()) } divide : (Pair< , >) -> Result< > = {pair -> Some(pair.first.div(pair.second)) } val val "," val Double Double val Double Double Double Here we have modified functions to returns a wrapped value, We have to apply split function to parse function and then to divide function. Since the return type of each function is wrapped value and input parameter of each function is accepting pure values, we can't easily pass these function returning wrapped value to other functions .Here is monad come in picture, Monads apply a function that returns a wrapped value to a wrapped value using flatMap function So flatMap function looks like { None : Result< >() ( value: T) : Result<T>() -> Result<B>) : Result<B>  = ( ) { None -> Some -> f(value)
    }           
} sealed < > class Result out T object Nothing data < > class Some out T val inline fun <B> flatMap (f: ( ) T when this is this is Here we have written flatMap function on Functor Now you can apply function returning wrapped value to wrapped value output = split( ).flatMap(parse).flatMap(divide)
println(output) val "126,3" // will print 42 So ins simple word, is Functor that has flatMap Modad Here is my link for this example github Thats it. I hope this article will help you understand idea of Functor and Monads and who they are comes together . This is my first article here and I hope you have enjoyed it ;) I’ll be glad for any feedback!

Functor Applicative and Monads

Tensor & Flow: Part 1, TensorFlow & Machine Learning on Android

Courtesy The first step in optimizing a query is looking at it’s execution plan. An execution plan is a visual representation of the operations performed by the engine in order to return the data required by your query. database The execution plan for a query is your view into the Server query optimizer and query engine. It will reveal which , object like: SQL objects a query uses tables indexes etc. type of uses: in which order how they were accessed (seek or scan) types of joins data size filtering sorting aggregations calculated columns derivation foreign keys access etc. within the database, and how it uses them. There are 3 types of execution plans: Estimated Actual Cached Estimated execution plan: To get a query’s estimated execution plan: Switch to the database in concern highlight the query in concern click Query click Display Estimated Execution Plan The shortcut for this is Ctrl+ L. When you get this plan, some sections of the query might show a very high percentage as cost. Remember that this is just an estimate, and many a times what we see as the most expensive section comes up as the most cheapest or cheap. Btw, each symbol in the execution plan is an operator, and each operator has additional information within its properties that define the work performed by that operator. Actual execution plan: To get a query’s actual execution plan: Switch to the database in concern highlight the query in concern click Query click Include Actual Execution Plan The shortcut for this is Ctrl+ M. One of the queries gave this actual execution plan. Look at the actual vs estimated numbers, looks like the estimate is good enough. One of other queries gave this execution plan: Looks like the estimates and actuals are far different. This proves that . Btw, we read execution plans from left to right and top to bottom. actual execution plan are always good to tune compared to estimates The estimated percentage costs at the front level are . So to tune the queries, it looks like we need to go through each of the blocks one-by-one. This looks like a lot of pain. This is where the 3rd type of execution plans comes into the picture — the . still estimates cached execution plan Cached execution plan: There is a to find out which queries we actually need to tune. Just hit and grab . free cool utility http://www.brentozar.com/blitzcache sp_BlitzCache Just execute this . This query will give the top 10 queries with the most execution time. In a column it also shows the possible problems like missing indexes, downlevel cardinality estimates and implicit conversions in the column. In the column, it gives the actual execution plan map link which can be clicked upon. EXEC sp_BlitzCache @top=10, @sort_order='duration' Warnings Query Plan Query Tuning: The single largest use for execution plans is query tuning. It’s the most common tool for understanding what you want to tune. It’s invaluable for identifying and fixing poorly performing code. I can’t run through every potential cause of poor query performance here, or even close, but we can look briefly at a few of the common culprits and the warning signs you’ll find in the execution plan. Poorly Designed Queries Like with any language, there are common code smells within T-SQL. I’ll list out a few of them as well as what you might see in the execution plan. Search Conditions with Functions Placing a function on a column in the , or clause (e.g. can lead to very poor performance because it renders the predicate non-SARGable, which means that SQL Server cannot use it in an index seek operation. Instead, it will be forced to read the entire table or index. In the execution plan, look out for a Scan operator against a table or index where you expected a Seek operation, i.e. a single or small set of lookups within an index. ON HAVING WHERE WHERE SomeFunction(Column) = @Value ) Nesting Views Having a view that calls to other views or has operations to other views can lead to very poor performance. The query optimizer goes through a process called simplification, where it attempts to eliminate tables that are not needed to fulfil the query, helping to make it faster. For simple queries involving views or functions, the optimizer will simply access the underlying base tables, and perform table elimination in the usual fashion. However, use of nested views and functions will lead quickly to a very complex query within SQL Server, even if the query looks simple in the T-SQL code. The problem is that beyond a certain point, SQL Server can’t perform the usual simplification process, and you’ll end up with large complex plans with lots of operators referencing the tables more than once, and so causing unnecessary work. JOIN Incorrect Data Type Use Of course, to do this it must apply the conversion function to the column, in the , or clause and we are back in the situation of having a non-SARGable predicate, leading to scans where you should see seeks. You may also see a warning indicating an implicit conversion is occurring. ON HAVING WHERE Row-by-row Processing Row-by-row approach is expressed via cursors and sometimes as loops that often lead to extremely poor performance. In such cases, rather than a single execution plan, you’ll see one plan for each pass through of the loop, and SQL Server essentially generates the same plan over and over, to process each row. WHILE Common Warning Signs in the Execution Plan Warnings These are red crosses or yellow exclamation marks superimposed on an operator. There are sometimes false positives, but most of the time, these indicate an issue to investigate. Costly Operations — the operation costs are estimated values, not actual measures, but they are the one number provided to us so we’re going to use them. The most costly operation is frequently an indication of where to start troubleshooting Fat Pipes Within an execution plan, the arrows connecting one operator to the next are called pipes, and represent data flow. Fat pipes indicate lots of data being processed. Of course, this is inevitable if the query simply has to process a large amount of data, but it can often be an indication of a problem. Look out for transitions from very fat pipes to very thin ones, indicating late filtering and that possibly a different index is needed. Transitions from very thin pipes to fat ones indicates multiplication of data, i.e. some operation within the T-SQL is causing more and more data to be generated. Extra Operators Over time you’ll start to recognize operators and understand quickly both what each one is doing and why. Any time that you see an operator and you don’t understand what it is, or, you don’t understand why it’s there, then that’s an indicator of a potential problem. Scans We say this all the time, scans are not necessarily a bad thing. They’re just an indication of the scan of an index or table. If your query is , with no clause then a scan is the best way to retrieve that data. In other circumstances, a scan can be an indication of a problem such as implicit data conversions, or functions on a column in the clause. SELECT * FROM TableName WHERE WHERE Let’s take a look at a few of the warning signs that can appear, and what we can do in response. DECLARE @LocationName AS NVARCHAR(50); SET @LocationName = 'Paint'; SELECT  p.Name AS ProductName ,        pi.Shelf ,        l.Name AS LocationNameFROM    Production.Product AS p        JOIN Production.ProductInventory AS pi ON pi.ProductID = p.ProductID        JOIN Production.Location AS l ON l.LocationID = pi.LocationIDWHERE   LTRIM(RTRIM(l.Name)) = @LocationName;GO And the problems are as follows: The INDEX SCAN on the column – there’s an index on that column a SEEK is expected - culrit: , in the clause Location.Name LTRIM(RTRIM(l.Name)) WHERE The FAT PIPE coming out of the Clustered Index Scan on the ProductInventory table — in this example, it’s processing over 1000 rows at this stage, and eventually only returning 9 rows. — culprit: missing index on the column. The HASH MATCH join — for the number of rows returned I’m expecting a NESTED LOOPS join — culprit: bad or missing indexes. Poor Indexing At the top of some execution plans, you may even see an explicit suggestion, indicating that the optimizer recognized that if it had a certain index, it might be able to come up with a better plan. Note these, but do not assume they’re accurate. Test them before applying them. Missing Index Nesting Views A view is just a query that the optimizer resolves just like any other query. However, if you decide to JOIN a view to a view, or nest views inside of each other, it causes problems for SQL Server. Firstly, as the number of referenced objects increases, due to deep nesting, the optimizer, which only has so much time to try to optimize the query, will give up on simplification and just build a query for the objects defined. For each object, the optimizer must estimate the number of rows returned and, based on that, the most efficient operation to use to return those rows. However, once we go beyond levels deep on obfuscation, the optimizer stops assigning costs and just assumes one row returned. All of this can result in very poor choices of plan and a lot of avoidable work. three To illustrate how nesting views can hurt the server, consider this: SELECT  pa.PersonName,        pa.City,        cea.EmailAddress,        cs.DueDateFROM    dbo.PersonAddress AS paJOIN    dbo.CustomerSales AS cs        ON cs.CustomerPersonID = pa.PersonIDLEFT JOIN dbo.ContactEmailAddress AS cea        ON cea.ContactPersonID = pa.PersonIDWHERE   pa.City = 'Redmond'; All the 3 referenced objects are views. And the execution plan will be so complex like this: The simplication of the above query can be done by actually accessing the underlying tables like this: SELECT  p.LastName + ', ' + p.FirstName AS PersonName ,        a.City ,        ea.EmailAddress ,        soh.DueDateFROM    Person.Person AS p        JOIN Person.EmailAddress AS ea              ON ea.BusinessEntityID = p.BusinessEntityID        JOIN Person.BusinessEntityAddress AS bea              ON bea.BusinessEntityID = p.BusinessEntityID        JOIN Person.Address AS a              ON a.AddressID = bea.AddressID        LEFT JOIN Person.BusinessEntityContact AS bec              ON bec.PersonID = p.BusinessEntityID        JOIN Sales.Customer AS c              ON c.PersonID = p.BusinessEntityID        JOIN Sales.SalesOrderHeader AS soh              ON soh.CustomerID = c.CustomerIDWHERE   a.City = 'Redmond'; The execution plan is much simplified now: Lack of Database Constraints Consider this query: SELECT  soh.OrderDate ,        soh.ShipDate ,        sod.OrderQty ,        sod.UnitPrice ,        p.Name AS ProductNameFROM    Sales.SalesOrderHeader AS soh        JOIN Sales.SalesOrderDetail AS sod              ON sod.SalesOrderID = soh.SalesOrderID        JOIN Production.Product AS p               ON p.ProductID = sod.ProductIDWHERE   p.Name = 'Water Bottle - 30 oz.'        AND sod.UnitPrice < $0.0; With no constraints in place, the execution plan for this query will look as shown: This query returns zero rows, since there are no products with a price less than $0, and yet SQL Server still performs an index scan, two index seeks and a couple of nested loop joins. The reason is that it has no way to know they query will return zero rows. However, what if we have a constraint in place on the SalesOrderDetail table that requires that the UnitPrice for any row be greater than zero (this constraint already exists in the AdventureWorks database). ALTER TABLE Sales.SalesOrderDetail  WITH CHECK  ADD  CONSTRAINT CK_SalesOrderDetail_UnitPrice CHECK  ((UnitPrice>=(0.00))); If we rerun the above code with this constraint in place, then the execution plan is interesting: Missing or out-of-date Database Statistics The statistics can be turned off or on by the following command: SET AUTO_UPDATE_STATISTICS OFF | ON; It is recommended to not set them off to avoid stale statistics. Maybe it’s not the Database? It’s also possible that the database is not the culprit, the application can cause performance problems. So, profile the application code as well. Sources: Execution plan benefits Types of execution plans Photos

Execution plan in SQL Server

The catalyst for virtual and augmented reality: that is how the majority of tech analysts describe Covid -19. You all have seen this meme probably: It would be more than trivial to repeat this: All offline activities and marketing channels, like conferences or billboards at the airports, turned out to be useless for demand generation. COVID changed the very rules by which marketers were playing. That is why marketers decided to experiment and finally try any new technology they felt skeptical about. Check this recent Shopify tweet. It sounds like an epiphany! The keyword here is "interaction", but I believe, marketers will only see this staggering number. And this number tells us that the time for AR has come. What XR Tools Can Speed up Marketing? Augmented reality (AR) opens up a wide range of opportunities: With AR apps, becomes easier even in the age of social distancing. connecting on the emotional level with customers Consulting by "showing not telling" is getting affordable with AR apps. Creating experiences is getting comfortable. Don't forget we live in the age of "experiential economy" when companies can charge clients for . the emotions they evoke More than that, the customers are ready for this new "tech" experience at last: they actually expect brands to be more creative and immersive . according to Forrester This tech analyst edition predicts that the exploration of AR & VR in 2021. will increase by up to 12% in the US Try Before You Buy Option! Have you heard about a "try before you buy" approach powered with AR?  Experiences created with augmented reality apps (downloaded on a smartphone) or webXR (opened in a browser) can help clients feel, see, listen, explore, and TRY products, of course. . All these goods can be previewed in 3D/AR in any size, any color, and with the tiniest details. More than that, using AR apps marketers can provide their clients with the fullest catalog of goods collected in one place. A new sofa, a pair of earrings, or a picture that is supposed to decorate the kitchen One  AR app can contain 300K SKUs or 100 best models accessible anytime and anywhere. That is why brands that sell tangible objects today tend to create realistic 3D models of their goods and sell them online. It can be curious, but the "try before you buy" trend is taking a slightly different path with social media filters. Brands like L'Oreal during video calls. So AR filters are migrating from the domain of "fun" to the domain of "self-expression." After all, using AR filters is empowering, creative, and emotional! encourage their clients to experiment with "virtual makeup" Bring Your Products to Life to Tell a Story! With augmented reality apps brands can bring any products to life and help clients interact with them. is much more entertaining and emotionally saturated for customers than just consuming goods and recycling plastic/paper/galss. The more users interact with products,  the more connection with the brand they create. Engaging with products' packaging or labels through AR Don't forget that great stories always attract people, especially if stories are communicated in a sincere and logical manner. Although we have no firm evidence of storytelling before the advent of writing, we can assume that narratives have been central to human life for thousands of years. BBC Take this recent narrative of the for example. 19 Crimes brand by Snoop Dogg Creating this easy to use AR app, 19 Crimes communicates to their customers using visual images and appealing to our biggest need to learn about brands values and ... to hear stories. Use Augmented Reality to Create Perfect Products In our post-Covid world visiting shopping malls looks like a challenge and entertainment at the same time. The majority of customers will prefer to stay at home rather than go to a faraway place to try clothes and shoes. Augmented reality is here to help you with remote buying by defining perfect sizes. Some time ago that they are creating an augmented reality application that can measure every single client's foot individually capturing size, shape, and volume. The application works in the following way: data received in the process of measurement is compared to data received from people of similar sizes. Nike announced And voila! The perfect shoe for each client is chosen. The same can be done for clothes, and some brands are starting experiments. Help your Customers Find You Augmented reality apps can also be used for navigation, they are literally created for that! These apps can help shoppers Imagine not wasting all this time on the orientation in an unfamiliar location! find their way around big shopping malls, stadiums, or even cities. After all, in the world paralyzed by Covid, the period of interaction with goods inside any store is limited. It is not really clear when offline retail will get back to normal but Forbes experts think that the pattern for "social distancing" . will remain for a long time So , as the one described by TechCrunch, will definitely gain popularity. These are AR apps for indoor navigation. the creators of such solutions I believe augmented reality is gaining popularity simply because it brings value to the customers in difficult times. It that they need so much. provides clients with more accurate visual information And that is probably the most important reason to use it in marketing.  After all, as David Ogilvy used to say: “The consumer isn't a moron; she is your wife. You insult her intelligence if you assume that a mere slogan and a few vapid adjectives will persuade her to buy anything. She wants all the information you can give her.” AR turns out to be so much more than slogans, leaflets, or catalogues on websites. AR apps can serve as guides in unfamiliar locations making shopping more comfortable and less risky. Apps with augmented reality can help to avoid buyer's remorse by showing trying products in the comfort of people's homes. More than that, it is now possible to create perfect products using AR for 3D avatars creation.

Augmented Reality Marketing: It's Now or Never

In this blog post, I want to discuss the importance of starting with a red test. The red-green-refactor cycle is a well-known mantra in test-driven development. To recap: Red - write a piece of test code for the functionality you want to implement. It must be red since the functionality is not there yet. One of the main ideas is that the tests should guide the development process. Green - write a piece of code for the test to pass. Refactor - eliminate code duplicates, enhance readability, improve aesthetics, possibly extract some methods or create new classes, and optimize. Don't forget to refactor both the production code and the test code. Why red? I very rarely do post-code testing (perhaps there is a better-known expression for writing tests after writing production code). I do that when I encounter a piece of code not covered with tests that I need to put my hands on. And I'm happy when the test is green, making me feel the code works as expected. Test-driven development is not only about writing tests to make sure the production code works as expected, but it is rather (as the name suggests) a process of development. A couple of things pop into my head when I think about Red in . First is demand; I produce the production code when it is needed (red test), and I need to meet the demand. Second - YAGNI (You Aren’t Gonna Need It), I do not produce the code that is not needed, I do not code too much, because it might not be needed. TDD I'm just a human after all I'm only human, and I make mistakes. I make mistakes in production code and test code alike. The idea for this blog post came last week when I encountered situations where the test was not red, and it was very tempting to leave it as is because it was GREEN. This was especially true when there were already several tests, leading me to think that I might have already covered the case. It may sound like an oxymoron, but a GREEN test in the first step of TDD is a RED flag. In the following sections, I will provide cases that I encountered last week where I made a mistake in the test, causing it to be green, but it was incorrect. it vs if I'm a backend developer and use TDD a lot. However, sometimes I have to work with front-end and do . I do my best to practice TDD while doing JavaScript development as well. JavaScript development For JavaScript testing, I use as a test runner and as a test framework. In , the function sets a test case, and the function defines an individual test. I want to share how I mistyped as multiple times, leading to a false impression of all passing tests. karma jasmine jasmine describe it it if it('Seat map is selected when person of the seat map is selected', 
    function () {
        let seatMaps = result.Seating.SeatMaps;
        expect(seatMaps[0].Selected).toBeTrue();
        seatMaps[2].Passengers[1].select();
        expect(seatMaps[2].Selected).toBeTrue();
    }
); and if('Seat map is selected when person of the seat map is selected', 
    function () {
        let seatMaps = result.Seating.SeatMaps;
        expect(seatMaps[0].Selected).toBeTrue();    
        seatMaps[2].Passengers[1].select();
        expect(seatMaps[2].Selected).toBeTrue();
    }
); In all modern development environments and text editors for developers, is usually highlighted in a different color. I'm not colorblind, but it is still easy for me to miss it. Additionally, I find that my finger muscle memory is used to typing a two-letter word starting with as . It just happens automatically. As a result, there are no errors, and it is a valid sentence. All tests appear green when I run them. It is easy to notice when it is the first test because it will show that 0 tests have been run. However, it is more difficult when there are more tests. In this particular situation, my initial thought was, Fortunately, my experience with treating green tests as a red flag saved me. if i if "aha, I already covered this functionality.". Missing the attribute This example is in C#. While it's not taken from production code, it captures the essence: [DataRow(1, 2, 3)]
[DataRow(2, 3, 5)]
public void SomeFakeTest(int a, int b, int c)
{
    Assert.AreEqual(c, a + b);
} In the MsTest test framework, the attribute alone is insufficient to mark a method as a test. The or attribute is required for the method to be recognized as a test. I have found myself forgetting this attribute a few times, which resulted in tests not being run and creating a false impression of all tests passing. DataRow TestMethod DataTestMethod Missing assertion The following example, which I adapted from my previous blog post, demonstrates the situation. I recall the instances when I write a test - I think of a test case, a test name, arrange it, then act, and then - get distracted. When I return to see where I left off, I usually run the tests to see the red ones and continue from there. But in this particular case, all are green. This case is tricky; it's easy to forget that I left the test unfinished, and it's green because it doesn't have an assertion.ertions. [TestCaseSource(typeof(UnexpectedPaymentMessageIsSentWhenInvoiceIsOverpaidOrUnknownCases))]
public async Task UnexpectedPaymentMessageIsSentWhenInvoiceIsOverpaidOrUnknown(
    Invoice invoice,
    string message)
{
    _invoiceRepositoryResult = invoice;

    await CallCallback();
} Misread Recently, I needed to modify the functionality of a DTO converter to return passengers in order by , rather than in a somewhat random manner. I'm using , which allows passing configuration in the method. I simply typed , and Visual Studio's IntelliSense suggested a list of options. I chose the first one that started with and ended with . sequenceNumber FluentAssertions BeEquivalentTo config.With With Ordering seatMapDto
    .Passengers
    .Select(x => x.FirstName)
    .Should()
    .BeEquivalentTo(
        new[]
        {
            "GUDMARIN",
            "GUDMARIANA",
            "TOM"
        },
        config => config.WithoutStrictOrdering(),
        "should be ordered by sequenceNumber"
    ); I ran the test, and it was green. Since I expected the test to be red, I began by making sure that the input data was unordered in the arrange part to create a nonsequential order for the test to be red. Only later did I realize that I had chosen the configuration instead of . WithoutStrictOrdering WithStrictOrdering Wrapping it up Being human and making mistakes is not easy :). In this blog post, I wanted to showcase how sometimes silly mistakes can give the impression that tests are green, and emphasize the importance of starting with a red test first. Have you encountered similar situations where a mistake in a test led you to believe that production was working as expected? Please share your experiences in the comments. If you enjoyed this post, please click "like" and "follow". Feel free to explore my other blog posts, where I write about test-driven development and my pet project EasyTdd, a Visual Studio extension that makes test-driven development simpler. Also published here.

Stories, News & Mentions about PIXFIRST

Pixfirst’s Stories on HackerNoon