My Talk | Understanding Microservices at Developers Conference 2017

This talk has been presented at Developers Conference 2017 at Basis SoftExpo in Bengali:

Advertisements

Definition of Done, your personal manifesto to deliver better software

Software developers have a reputation for being somewhat careless when answering the question “are you done with this feature”? In most cases the answer comes “Yes, Done” then the developer meant to say “Programming is done but…” and the interest point of the answer the world wants to hear is the state of “Production readiness” including testing, bug fixing and so on. Here comes the “Definition of Done” that needs to be agreed among the involved persons within a Product development process.

Definition of Done aka DoD works different way for several Agile teams, but serves the same ultimate goal for everyone. It should be a satisfaction checklist for software development teams to handover a shippable feature at production. In Agile practices, a shippable feature can be an independent unit of deliverable that is done according to Definition of Done.

In context of a developer, I strongly believe everyone should have his or her very own written form of “Definition of Done” for particular projects, even you are doing freelance or teaming up with others. Before digging into personal DoD, lets learn what others have as their DoD.

In our company at Vantage Labs, we are practicing Scrum since last five consecutive years successfully and each self organizing team settled their own “Definition of Done” at first place.

Here are two samples of “Definition of Done” collected from two diverse teams of products.
The first team deals with Web and Mobile based CRM, they have a decent set as the followings:

  1. Code was implemented.
  2. If required, Unit tests were written and pass.
  3. Committed to source control.
  4. Peer review is conducted; necessary improvements are made.
  5. Deployed on stating server and ready for acceptance test.
  6. QA Scripts developed or manual test scripts documented.
  7. Functional QA was completed; conditions of satisfaction were met.
  8. Bugs from QA resolved.

The second team works with English Grammar Engine and they have their very own set of procedures to meet the Doneness which are as followings:

A unit of work aka. Story is done when:

  1. Code is implemented.
  2. Code is checked into source control.
  3. Code rebuilds from source control both on Windows and Linux.
  4. The tests for defined benchmark sentences have precision over 80% and recall over 60%.
  5. Results are documented on Wiki (benchmark sentences, performance).

The sprint (2 weeks of work for different feature completion) is done (it means that all the sprint stories can be deployed to production) when:

  1. Pass the load test.
  2. Regression tests are successful.
  3. Pass the 5-essay evaluation by the editors.

The first team works with web development and has a classic set of Definition of Done that can be validated against most of their general purpose features while the second team works with backend component and has measurement oriented list in their definition. The first Definition of Done is the most widely used set around.

This context specific simple list of criteria can ensure software quality in a greater extent, as at the end of day the stakeholders will be using your delivered feature. This particular practice of Agile can be adopted separately in generic case as well by a single person. Note that better delivery is a choice.

So, What is your Definition of Done?

BASIS SoftEXPO 2012 Tech session: Build Social Apps for Facebook

The below application created to describe simple Facebook social plugins usage and how to develop a Facebook app from scratch.

The demo Facebook application : BookStall

The Entire Facebook application source code can be downloaded from here:

Virtual bookstall project source codes

screen-casts will be added soon 🙂 [N.B: 44 minutes screen-casts are too heavy to upload, skipped this]

This above session has been presented at BASIS SoftEXPO 2012

My Talks at phpXperts Seminar 2010

My recent talks on JavaScript at phpXperts Seminar 2010 : “Beauty of Web“, the biggest tech seminar at Dhaka.

.

My topic titled “JavaScript Wash” covered the followings:

  • Common JS issues
  • JS in Mobile Application Development
  • Interactive UI samples
  • Open Source JS Libraries
  • The High-Performance JS Mantra
  • JavaScript Development Tools

If you liked this talk then rate this talk

Cheers! 🙂

JavaScript Object Literal Namespacing

JavaScript Object Literal is a comma separated list of name-value pairs enclosed within a curly braces, means of encapsulating lots of data under a namespace, where the name is a valid variable name and the name can be used as variable. Values can be of any data type, including array literal and object literal.

Purposes of JavaScript Object Literal notion:

  • It provides encapsulation
  • Avoiding global namespace pollution
  • Relatively straightforward to implement

A namespace is a context for identifiers, simply a namespace is an abstract container for items such as names, objects etc. Also within a namespace, the components can not share the same name.

Encapsulation, In his influential book on object-oriented design, Grady Booch defined encapsulation as “the process of compartmentalizing the elements of an abstraction that constitute its structure and behavior; encapsulation serves to separate the contractual interface of an abstraction and its implementation.”

An example given as:

/*
* BlogPost : creating BlogPost object using object literal notation
* basic structure: {name:value, name:value};
* or can be as { name:value, { name:function(){...},...}, name:value ... }
*/
var BlogPost = {

 title: 'Welcome to My Blog',  // Blog title
 numberOfView: 0,    // Number of Blog view
 blogContent: '',    // Blog post content
 URL: 'https://mahtonu.wordpress.com', // Blog post URL
 flag: false,        // Use some flag
 lastView: null,     // Timestamp of the last Blog view

 //set blog content here
 setContent: function(content) {
 this.blogContent = content;
 },
 //get blog content
 getContent: function() {
 return this.blogContent;
 },
 //count the number of blog post view
 incrementView: function() {
 this.numberOfView++;
 },
 //set timestamp of the last Blog view
 setTimeStamp: function(time) {
 this.lastView = time;
 },
 //get timestamp of the last Blog view
 getTimeStamp: function() {
 return this.lastView;
 },
 //get blog url
 getBlogUrl: function() {
 return this.URL;
 }
};

In the avobe example the  “BlogPost” object created using object literal notion with some properties. Thus the property values can be manipulated using methods sharing the namespace. Further adding property or methods are simple enough.

More usage:

//set some post here
BlogPost.setContent('I am a body of a blog post!');
BlogPost.setTimeStamp('14th April 2010 09.00PM');
//publish your blog post
document.write('Title: '+BlogPost.title);
document.write('Post: '+BlogPost.getContent());
document.write('Link: '+BlogPost.getBlogUrl());
document.write('Posted at: '+BlogPost.getTimeStamp());
document.write('Total Viewed: '+BlogPost.numberOfView);
//got a hit increment your view no
BlogPost.incrementView();

So we are accessing and working around the properties of an object forming a namespace.

References /Further Readings:

Wiki page for Information hiding [Encapsulation Part]

Tim McCormack on Javascript object literal namespacing

Jonathan Snook on Objectifying JavaScript

Good JavaScript Study Resources

🙂

Rules, Naming , Conventions

Google JavaScript Style Guide

JavaScript: The World’s Most Misunderstood Programming Language by Douglas Crockford (2001)

http://javascript.crockford.com/javascript.html

“Private Members in JavaScript” by Douglas Crockford (2001)

http://www.crockford.com/javascript/private.html

Code Conventions for the JavaScript Programming Language

http://javascript.crockford.com/code.html

ECMA-262-3 in detail

http://dmitrysoshnikov.com/

OOP: The general theory.

http://dmitrysoshnikov.com/ecmascript/chapter-7-1-oop-general-theory/

Object Oriented Programming in JavaScript

http://mckoss.com/jscript/object.htm

.

Using Google’s CDN to load JavaScript libraries

For rich Ajax web applications page loading time suffers from loading JavaScript libraries such as JQuery, MooTools, Prototype etc..  Most of them are larger than 50KB in size and if you are in need to combine libraries then you are adding 100KB+ to your page loads.

Also your web server will experience delivery of your own hosted JavaScript libraries across distinct geographical requests. You can easily offload your server for those files.

Assuming all possible ways to improve JavaScript libraries loading time, Google’s CDN aka Google Libraries API can be a good solution.

Why Google CDN? Why not my own server?

  • The Google Libraries API is a content distribution network and loading architecture for the most popular, open-source JavaScript libraries.
  • Google’s huge CDN (content delivery network) can deliver the file much. Since Google has large data centers all over the world, these files will be served from data centers geographically closer to your users. This helps to reduce network latency and add to reliability, scalability and so on.
  • The more sites that include Google’s google.load() API the greater the chance that a user has already has the file cached, thus enabling your site to load faster as the script will not need to be downloaded.
  • You save bandwidth as you no longer have to serve the file(s).
  • The versioning system that Google has created makes it effortless to include specific versions of these libraries.

All you need to do is make a Google’s Libraries API call google.load() like:


<script src="http://www.google.com/jsapi" type="text/javascript"></script>

google.load("chrome-frame", "1.0.2");
google.load("dojo", "1.5");
google.load("ext-core", "3.1.0");
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.8.4");
google.load("mootools", "1.2.4");
google.load("prototype", "1.6.1.0");
google.load("scriptaculous", "1.8.3");
google.load("swfobject", "2.2");
google.load("yui", "2.8.1");
google.load("webfont", "1.0.6");

.

Minor Drawbacks

  • You’re dependent on the CDN infrastructure. If they are down, your website will be hardly usable, too.  But that case u have to write extra codes to check the desired library loaded or not.
  • You cannot influence bandwidth and carriers of the delivery provider’s network.

Reference: http://code.google.com/apis/libraries/devguide.html#AjaxLibraries

.

🙂

Precaching images with JavaScript

Most of the time images on your page take extra seconds to download from web server. Again if you want to load some images on some user action, you most likely want the fast image load i.e. instant with the user clicks..
Or in case you want to create an image gallery viewer by clicking ‘Next’ / ‘Previous’, you usually don’t want waiting your user for some extra seconds for each image loading.

JavaScript helps you to load images into the browser’s memory cache without displaying them.This technique is the hilarious precaching images. And this technique preload the images into the browser cache when the page initially loads.

In order to precache an image we need to construct an image object in memory. Image object created in memory is dissimilar from the document image object aka <IMG>tag.

Here we go

var myImage = new Image(width, height)

Parameters to the constructor are the pixel width and height of the image we want to precache.
So the image object exists in memory. Now you can assign a filename or URL to the src property of that image object:

myImage.src = “someImage.jpeg”

Such above statement assigning image src loads the image into the browser image cache.

Now you can use this cached image wherever you like instantly.
You may assign this precached image src property to the actual document image tag src property.

document.images[0].src = myImage.src

Here is the detail example:

<html>
<head>
<title>Image viewer</title>
<script type="text/javascript">

//precache four images
image1 = new Image(480, 320)
image1.src = "1.jpg"
image2 = new Image(480, 320)
image2.src = "2.jpg"
image3 = new Image(480, 320)
image3.src = "3.jpg"
image4 = new Image(480, 320)
image4.src = "4.jpg"

//loads an image from cache
function loadFromCache(img){
	document.imagePlaceHolder.src = eval(img + '.src')
}
</script>
</head>

<body>

<div align="center">
<img name="imagePlaceHolder" src="1.jpg">

<br>

<a href="#" onClick="loadFromCache('image1')">Image1</a>
<a href="#" onClick="loadFromCache('image2')">Image2</a>
<a href="#" onClick="loadFromCache('image3')">Image3</a>
<a href="#" onClick="loadFromCache('image4')">Image4</a>

</div>
</body>
</html>

In the above example four images are precahced into browser memory and used in the page <IMG> tag src property oncilck on the four links instantly updates the document <IMG> tag src. Try the example and feel the difference in image loading. 🙂

Download this example code with some sample images

Tadddaaaa!