Friday, November 13, 2015

"Jenkins: The Definitive Guide" - Book Review

In this post I will express my thoughts on a book written for a specific but very useful tool called Jenkins CI. The book is called "Jenkins: The Definitive Guide"  written by John Ferguson Smart.
So what is Jenkins CI (Continuous Integration)? Jenkins is a tool created by Kohsuke Kawaguchi
and its main purpose is as stated to create environment for continuous integration of your software.

Jenkins is a Java based tool, a web aplication to be more specific. Runs on various operating systems and can be installed in various ways, from a system service to running it into Winstone , a servlet container tool. You can use Jenkins to automate building your software, generate documentation for it, run unit/integration/acceptance tests, publish test reports in HTML/PDF format and even upload files to remote server.
While building, errors can happen so good notification support in Jenkins is here to help you get notified when that happens. There is support for email/SMS/RSS/IRC/Instant Messaging notifications. Even special devices that blink red when build fails and green when succedes.
Jenkins has good support for build automation tools like Maven and Ant.
It has embeded support for SVN and support for Git/Mercurial and others trough plugins.
On the other hand, you can test network applications using distributed builds with JMeter and try various test environments using Multi-configuration builds.
You can run parametrized builds as well run code coverage and code quality tests.
There are ton of plugins built for specific cases and usage which you can easily download and use in your builds. You can also write your own Jenkins plugin.

Now something about the book.

 From the book preface:
"This book is aimed at relatively technical readers, though no prior experience with Continuous Integration is assumed. You may be new to Continuous Integration, and would like to learn about the benefits it can bring to your development team. Or, you might be using Jenkins or Hudson already, and want to discover how you can take your Continuous Integration infrastructure further.
Much of this book discusses Jenkins in the context of Java or JVM-related projects. Nevertheless, even if you are using another technology stack, this book should give you a good grounding in Continuous Integration with Jenkins. We discuss how to build projects using several non-Java technologies, including as Grails, Ruby on Rails and .NET. In addition, many topics, such as general configuration, notification, distributed builds and security are applicable no matter what language you are using."

Written in july/2011, in around 400 pages you will get hands on various parts of this powerful tool. My advice is to try and install Jenkins on your system and install or try things mentioned in the book. Various scenarious require various hardware and software so you will not have all the possibilites to try all of them. But at least you can download the plugins and check them shortly what they do. Some plugins are obsolete but I made a list of plugins I installed as test on my computer.
All in all the book gives a good grasp of all that might need you in your future project. Apart from some typos the book is a great read, and you should definitely spend some time with it. I give 4.5/5.It will be useful for year to come.

More about the chapters.
  1. Chapter 1: Introducing Jenkins. A short introduction what is and what it is used for. A short history how Jenkins came from Hudson. How to install and what is CI(Continuous Integration).
  2. Chapter 2:  Your first steps with Jenkins. Covers how to make working environment for Jenkins, installing JDK, Git, Github and Maven. Your first build job and running premade tests on it. Specificaly this project https://github.com/wakaleo/game-of-life. You will use some Jenkins plugins like Cobertura. I tried it and it is buggy. I recommend using Jacoco instead. Here are the plugins used in this chapter: Git plugin, GitHub plugin, Coberturra plugin,Jacoco plugin.
  3. Chapter 3: Installing Jenkins. Covers how to install, possible ways how to install o different OS systems. Jenkins home directory, memory considerations, java/maven/ant options etc... Upgrading, backing up jenkins etc...
  4. Chapter 4: Configurin your Jenkins server. Adding JDK/Maven/Ant installations. Configuring global properties, mail server, reverse proxy etc...
  5. Chapter 5: Setting up your build jobs. Covers types of builds, like free style job or mave build job. How to configure source code management tools like SVN and Git trough Git/GitHub plugins. Build triggers, polling the SCM, or calling a hook script to start the build process. Build steps, post build steps, and other useful plugins. Plugins mentioned:
    Gerrit Trigger plugin, Groovy, Gradle, Grails, Jython, MSBuild, Phing, Phyton, Rake, Ruby, Artifactory plugin, Nexus plugin, NUnit plugin, NAnt plugin
  6. Chapter 6: Automated Testing. Automatin Unit  and Acceptance tests. Configuring test reports, code coverage, automated preformance testing with JMeter. Plugins mentioned: Clover, NCover, Emma, HTML Publisher plugin, JMeter plugin, Performance plugin
  7. Chapter 7: Securing Jenkins. Activating security. Using simple security or security with LDAP server. Then using Active Directory or Unix users and groups. Atlassian Crowd commercial tool. Authorization, who can do what with matrix based security or with project based matrix security. There is even a tool for enabling Role based security with a plugin. Auditing, keeping track of user actions. Plugins mentioned: LDAP Plugin, Active Directory plugin, Crowd plugin, Role Strategy plugin, Audit Trail plugin, Job Configuration History plugin.
  8. Capter 8: Notification. Email notification, claiming builds, instant messaging or IRC messaging. Desktop notifiers like Notifo, mobile/SMS notification, making noise with extreme feedback devices. Plugins mentioned: Email Extension plugin, Instant Messaging plugin, Jabber notifier plugin.
  9. Chapter 9: Code Quality. Code quality in your build process. Code quality tools like  PMD/CPD, FindBugs, Checkstyle, CodeNarc. Reporting code quality problems with Violations plugin. Reporting with SonarQube. Plugins mentioned: Violations plugin, FindBugs, PMD/CPD, Checkstyle, JDepend, NCover, CodeNarc, Sonar Gerrit Plugin, SonarQube plugin
    Coverage Complexity Scatter plugin, Static Analysis Utilities plugin, Task Scanner plugin.
  10. Chapter 10: Advanced builds. Parametrized builds and parametrized triggers. Multi-configuration build jobs. Parallel builds and build pipelines. Plugins mentioned: Build Promotion plugin, Maven Release Plugin, Copy Artifact plugin, promoted builds plugin, ArtifactPromotion plugin, Build Pipeline plugin, Parametrized Trigger plugin, Maven Jenkins plugin, Dependency Graph Viewer plugin, Locks and Latches plugin.
  11. Chapter 11: Distributed builds. Master/Slave strategies. Associating builds to slaves. Node monitoring and cloud computing. Plugins mentioned: Amazon EC2 plugin, CloudBees Docker Build and Publish plugin.
  12. Chapter 12: Automated Deployment and Continous delivery. Deployment script, database updates, smoke tests. Deploying Java or PHP/Ruby application. Plugins mentioned: Capitomcat plugin.
  13. Chapter 13: Maintaining Jenkins. Monitoring disk space and server load. Backing up configuration and Jenkins builds. Archiving and migrating build jobs. Plugins mentioned: Disk Usage plugin, Backup plugin, ThinBackup plugin, Monitoring plugin, Deploy plugin, Deploy WebSphere
  14. Appendix: Automating your Unit and Integration Tests. Automating your tests with Maven and Ant. 
I hope this post is useful. Best regards. Vlado

Monday, June 29, 2015

"Socket.IO Real-time Web Application Development" - book review

In this post I will share my thoughts on a book called "Socket.IO Real-time Web Application Development" written by Rohit Rai, published in 2013.
It has 6 chapters and 2 appendices in around 120 pages. This book is made for developers who want to start developing highly interactive and real-time web applications or multiplayer web based video games. The book starts with brief introduction to real-time server side of web applications. How it was and how it is now.
It then continues with building a simple chat application using NodeJS, ExpressJS, JQuery, Socket.IO and a templating engine called Jade. It is expected that the reader understands well JavaScript. Also NodeJS knowledge would be a plus but it is not necesarry as all needed aspects are well explained. 

Chapters:
  1. Going Real-Time on the Web. Covers history of XMLHTTPRequest, AJAX, FlashSocket, etc... and of course introduction to real-time web of today.
  2. Getting Started with Node.js. Covers brief introduction to Node.js programming. How to install it, how to import npm packages, and how to create a simple "hello world" application.
  3. Let's Chat. Explains how to start with Socket.IO on the server side but also on the client side. Some basic information what is what on the client/server and how it works.
  4.  Making it More Fun. This chapter is the longest one and I would recommend passing it in 2 or 3 parts with breaks between. It adds nicknames to chat users and "create rooms" functionality.
  5. The Socket.IO Protocol. Advantages od Socket.IO over WebSockets API. Socket.IO is much more capable and complex, therefore it needs dedicated protocol to function. It also covers all protocol types of messages that exist.
  6. Deploying and Scaling. Covers some information on how to keep your app on Node.js up and running and how to monitor background processes with Monit and Forever. Scaling with HAProxyNode Cluster and Redis.
  7. Appendix A: Socket.IO quick reference.
  8. Socket.IO Backends. Covers brief information about Socket.Io backends for Erlang, Google Go, Java, Perl and Python.
 The problems I faced while developing the sample chat application were:
  1. The book is made for Socket.IO version 0.9 which is discontinued and no longer available for download over npm. So I downloaded version 1.3.5.
  2. The protocol API is a bit different from version 0.9 to 1.3.5 so if you get deep into Socket.IO structure you'll be a bit confused.
  3. The web documentation is kind of poor so you will need to search the web for information how to get valuable data from the Socket.IO Server object.
My thoughts on the book, it is well made for what it was meant for, but the problem with these JS libraries is that they change very fast, so this book is getting old already. On the other hand it gives a good example to practice with newer versions of Socket.IO so therefore I recommend it for new Socket.IO developers.
There were some inconsistencies but all in all it serves its function. I give 4.2/5.

I uploaded the demo chat application on this location:
Its not finished, because I have other things to do at the moment, but it is good start. I used https://www.openshift.com/ with Node.js 0.10 with preinstalled HAProxy load balancer. 
If it is unavailable the service sets the app to idle state. So remind me or write an email if it stopped, to restart it.

Notes:
  •  Socket.IO creates a room for each tab you have on every browser. So if you have two tabs on Chrome and three tabs in Firefox connected to Socket.IO server, there will be 5 rooms generated for you inside the server state. 
  •  Socket.IO creates unique id for each socket connected to the server and that same id will be for a pregenerated room for the socket. You can create your room with custom name, and the socket you are using will be in two rooms, yours and the pregenerated one.
  •  Be careful how you connect to namespaces because the internal server state might get mess and you cannot get information properly. 
  • Socket.IO is easy to code. The API is same on both server and client.It works siemlesly though it is over HTTP layer.
Useful links I found on the web about Socket.IO:

https://github.com/SocketCluster/socketcluster
https://en.wikipedia.org/wiki/WebSocket
https://forums.openshift.com/keep-getting-program-node-serverjs-exited-with-code-8-and-503-service-unavailable
http://psitsmike.com/2011/10/node-js-and-socket-io-multiroom-chat-tutorial/
https://www.npmjs.com/package/roomdata
http://fzysqr.com/2011/02/28/nodechat-js-using-node-js-backbone-js-socket-io-and-redis-to-make-a-real-time-chat-app/
http://howtonode.org/websockets-socketio
http://coenraets.org/blog/2012/10/real-time-web-analytics-with-node-js-and-socket-io/
http://ejosh.co/de/2015/01/node-js-socket-io-and-redis-intermediate-tutorial-server-side/
https://en.wikipedia.org/wiki/Appserver.io

Thursday, February 26, 2015

How to structure you JS application

According to my reasearch which I was doing in past few months I got to some conclusions on how to structure your application for best code reusability.

Several patterns come to my mind, Module, Namespace, immediate functions, returning objects, using subobjects, using capitalized letters for functions/variables as "Constants", function scope and making accessor methods, JS constructors, using Yuidoc and Jasmine for better code quality.

Download the code from here: https://github.com/bluePlayer/practices/tree/master/AppStructure

Here is roughly what I am thinking about:

var externalJSLibrary = {},
    jquery = {},
    extJS = {},
    expressJS;

window.APP = window.APP || (function (wdo, lib1, lib2, lib3) {'use strict';
    var version = "1.0.0",
        config = {},
        parent = null,
        jqueryObj = lib1,
        extJSObj = lib2,
        expressJsObj = lib3,
        windowDocumentObject = wdo,
        MY_APP_NAME = "MyJSApplication",
        MY_EXCEPTION_MESSAGE = "My exception message",
        MY_APP_CONSTANT = "some message";

    return {
        Exceptions: {
            MyFirstException: function () {
                return {
                    message: MY_EXCEPTION_MESSAGE,
                    name: "MyFirstException"
                };
            }
        },

        Constants: {
            MY_APP_NAME: function () {
                return MY_APP_NAME;
            },
            MY_APP_CONSTANT: function () {
                return MY_APP_CONSTANT;
            }
        },

        Events: {
             keyDownEvent: function (event) {
                 // do some stuff when some key is pressed down on 'keydown' event.
             },

             keyUpEvent: function (event) {
                 // do some stuff when some key is released on 'keyup' event
             },

             keyPressEvent: function (event) {
                 // do some stuff when 'keypress' event was detected
             }
        },

        initApp: function (someObject, config) {
            var i;

            for (i in someObject) {
                if (someObject[i] !== null && typeof someObject[i] === 'object') {
                    if (someObject[i].hasOwnProperty('init')) {
                        someObject[i].init(config);
                    }
                    parent.initApp(someObject[i], config);
                }
            }
        },

        namespace: function (nsString, newObjectDefinition) {
            var parts = nsString.split('.'),
                helperObject = {},
                that = this,
                i = 0,
                field = {};

            if (parts[0] === that.Constants.MY_APP_NAME()) {
                parts = parts.slice(1);
            }

            for (i = 0; i < parts.length; i += 1) {
                if (that[parts[i]] === undefined) {
                    for (field in newObjectDefinition) {
                        if (newObjectDefinition.hasOwnProperty(field)) {
                            helperObject[field] = newObjectDefinition[field];
                        }
                    }
                    that[parts[i]] = helperObject;
                }
                that = that[parts[i]];
            }
            return that;
        },

        customFunction: function (a, b) {
            if (b < 0) {
                throw new parent.Exceptions.MyFirstException();
            } else {
                return 0;// do some stuff with a and b
            }
        },

        doSomeStuffWithJquery: function (someUrl) {
            jqueryObj.ajax({
                url: someUrl,
                xhrFields: {
                    withCredentials: true
                }
            });
        },

        doSomeStuffWithExtJS: function () {
            extJSObj.drawGraph();
        },

        doSomeStuffWithExpressJS: function () {
            expressJsObj.connectWithNodeJS();
        },

        init: function (configObject) {
            config = configObject;
            parent = this;
            parent.initApp(parent, config);
        }
    };
    }(window.document, jquery, extJS, expressJS));

window.APP.namespace('MySubObject', (function (lib) {'use strict';
    var config = {},
        parent = null,
        someLibrary = lib,
        MY_CONSTANT = "my constant",
        MY_EXCEPTION = "my exception";

    return {

        Exceptions: {
            MyNewException: function () {
                return {
                    message: MY_EXCEPTION,
                    name: "MyNewException"
                };
            }
        },

        Constants: {
            MY_CONSTANT: function () {
                return MY_CONSTANT;
            }
        },

        name: "MySubObject",

        myCustomFunction: function () {
            // do some stuff
        },

        init: function (configObj) {
            config = configObj;
            parent = this;
        }
    };
    }(externalJSLibrary)));

window.document.addEventListener("DOMContentLoaded", function (event) {'use strict';

    var myApp = window.APP;

    myApp.init({
        "event": event,
        otherConfig: {}
    });

    window.document.addEventListener('keydown', myApp.Events.keyDownEvent);
    window.document.addEventListener('keyup', myApp.Events.keyUpEvent);
    window.document.addEventListener('keypress', myApp.Events.keyPressEvent);

    });

"JavaScript Patterns" - book review

Hello. In this post I will share my thoughts on a book called "JavaScript Patterns" written by Stoyan Stefanov. Published in 2010 this book in about 210 pages covers the most important patterns that you can use in JavaScript to ease you work with this language. My guess is that this book is not for beginner JavaScript programmer, but you can always read this great book by Douglas Crockford, "JavaScript: The Good Parts" as an intro to JavaScript. These two books go hand in hand. Check my other book review here: http://tunephp.blogspot.com/2014/11/javascript-good-parts-book-review.html
If you really want to learn proper JS programming read both of them, first "JS the good parts" and then "JS Patterns" and try some programming practices in Firefox/Firebug.

The book has 8 chapters and has lot of useful code snippets you can use in building your brand new JavaScript application.

  1. Intruduction. Explains basic concepts of JS, like there are no classes in JS, everything is a object including, functions, arrays, objects etc... It also notes that you can use strict ("use strict", ECMAScript 5) mode, a modification of JS that removes some of the bad parts in JS. This chapter also introduces JSLint and the Console as debugging tools. You should always check your code with JSLint.
  2. Essentials. This chapter covers one of the main drawbacks in JS, and those are global variables. It also gives some tips how to avoid using too many globals, how to use "for", "for in" loops, avoiding implied typecasting with "==" sign, number conversions with parseInt() and parseFloat(), writing proper code, indentation, writing comments and using Yuidoc and JSLint.
  3. Literals and Contructors. It covers Object literal ({}) notation, JS constructors and naming convention for them and how to avoid problems using constructors. Array literals, check for "Arrayness" (arrays are objects in JS), working with JSON, regular expressions, primitive wrappers and throwing Errors/Exceptions.
  4. Functions. Covers function decalrations vs function expressions. Variable hoisting, function scope, function callbacks, returning functions, self defining functions, immediate functions and couple of useful tricks like memoization, curry, init-time branching etc... Probably the most important chapter in the book, you must not miss it as functions are the hearth of JavaScript.
  5. Object Creaing Patterns. Some object creating patterns like namespace patters(there is a very useful function for creating a tree of subobject, you can use it in your project.), private members, how to achieve real privacy in JS, Module pattern, Sandbox patterns, static members, JS "Constants", Chaining pattern etc... This chapter gives you better idea how to structure your code so that your project doesn't have trouble in the end.
  6. Code Reuse Patterns. Classical vs Prototypal inheritance patterns. You should avoid Class inheritance in JS since it is just a "syntaxic sugar", and always use Prototypal inheritance. This chapter also mentions some useful code reuse techniques, like borrowing methods, copying properties, some Class patterns etc...
  7. Design Patterns. This chapter covers how to code basic software engineering patterns in JavaScript, probably a chapter you don't want to miss. Singleton, Factory, Iterator, Decorator, Strategy, Facade, Proxy, Mediator and Observer. 
  8. DOM and Browser Patters. Covers some tools/concepts/patterns that can be used in a browser, like how to manipulate DOM tree, event handling, long running scripts, Ajax alikes, JSNOP, combining JS scripts, minifying, Loading techniques and preloading.
 So yes, this book cover very useful features of JavaScript and how to use them in browser. If you really want to become a web dev. this is the right book for you.

There are similarities with "JavaScript: The Good Parts" in the beginning, I felt like I was reading Doug's book again, but that is ok. It has lot of code and it is well explained so my grade for it is 4.5/5. Defineitely a book you should read.

Monday, February 23, 2015

Introducing new project called ZadachiJS

In the past few weeks I have been working on a new project called ZadachiJS. It is adapted for Macedonian public and the docs are written in Macedonian using english letters. It is basically a web application that has no GUI and all output is sent to the console, ofcourse the output is in Macedonian. It contains programming practices which could be made in any programming language and it is based on a book called „Збирка Алгоритми и Програми“, од Ѓорги Јованчевски, Билјана Стојчевска и Невена Ацковска or in english, "Collection of Algorithms and Programs" written by Gyorgy Yovanchevsky, Bilyana Stoychevska and Nevena Atckovska. I couldn't find english version of it, but I could in Macedonian. Not sure if there is going to come an english version. So if you want to understand this project better learn Macedonian, because probably I won't find time to translate it in English, who knows.

Збирка Алгоритми и Програми
Збирка Алгоритми и Програми

The JavaScript part consists of one global object called Zadachi and all other stuff are inside of it.
You can browse the code here: https://github.com/bluePlayer/practices/tree/master/ZadachiJS
or check the demo here: http://jspractices-blueplayer.rhcloud.com/Zadachi and the docs here: http://jspractices-blueplayer.rhcloud.com/Zadachi/docs
Jasmine.js tests are here: http://jspractices-blueplayer.rhcloud.com/Zadachi/SpecRunner.html

Thursday, February 19, 2015

New location for JavaScript practices.

Check this link for my new page regarding JavaScript demos.

http://jspractices-blueplayer.rhcloud.com/

GitHub: https://github.com/bluePlayer/practices

Note: If some of the demos is unavailable write me on this post or an email, because openshift sets the process to idle state if the page is not accessed often.

Wednesday, January 28, 2015

JavaScript "constants"

I did a bit of research about constants in JavaScript. Well guess what, there are no constants in JavaScript. :)

So how do you implement "constants" with JavaScript patterns and syntax?

Note: The next text might require more readings but if will help you learn lot of JavaScript basics. Probably you will never have to use this code, since existing JS librarires have already solved this issue somehow.

Constants are important concept of every programming language and definetelly you should use them whenever possible. For example let just say you have an error message that needs to be printed in the output field from several places in your code. How are you sure that each time you write that string of message is written without missing letters? Sometimes you are tired, sometimes you rush and therefore errors are inevitable. So to prevent this you create a constant that contain that string and use the constant instead of writing the string.

Example constant: CANNOT_DIVIDE_BY_ZERO = "Cannot divide by zero!";

I have been developing a practice application which you can access live here: http://jspractices-blueplayer.rhcloud.com/Calculator/ and the docs are here: http://jspractices-blueplayer.rhcloud.com/Calculator/docs
Also you may preview the HTML/JavaScript code here: https://github.com/bluePlayer/practices/tree/master/CalculatorJS.
The code also passes JSLint test, with only "jslint browser: true" option.

There are two important functions which you should check, Constants() and namespace().
Constants() is a constructor function and namespace() creates subobject of the main application object called window.APP.
Lets start with namespace() function. It recieves two parameters, first the name of the subobject that will be created and second is the configuration object which contains necessary properties and methods that will be contained in this new subobject. namespace() creates new subobject Constants using the new keyword, secondly creates constMap subobject which will contain accessible keys for each of the constants.

Example:

window.APP.namespace('Trigonometry', (function () {
    return {
        PI: 3.14,
        doSomeStuff: function () {

        }
    }
}()));

This example creates Trigonometry subobject of window.APP and Trigonometry contains two subobjects, Constants with methods, get(), set(), isDefined() and list() and constMap which has one key/value, PI: "PI" and ofcourse the function doSomeStuff() which does nothing.

So with my solution you can create immutable constants by just passing key/value pair (key must be all capitalized letters) and the code will create it for you. Well if we create a PI constant how do we get the value? The solution is straight forward but it looks very ugly and big.

Example:

console.log(window.APP.Trigonometry.Constants.get(window.APP.Trigonometry.constMap.PI));
// prints 3.14

Alternatively you can pass the name of the constant if you know it:

console.log(window.APP.Trigonometry.Constants.get("PI"));

hahah :D

To improve this solution a bit I created an application wide function in APP namespace called getConst(). You send the path of the constant in string format.

Example:  

console.log(window.APP.getConst('APP.Trigonometry.PI')); // prints 3.14

What happens in this function is parsing the string parameter and getting to the constant value trough the application tree. But this solution is against the "Constants" concept. Either I should be careful to write that string parameter properly or I should create a variable/property inside APP to contain that string and then use it in the above example, like so:

window.APP = window.APP || (function () {
    var TRIGONOMETRY_PI =  'APP.Trigonometry.PI';
    return { 
        getConst: function (constantPath) {
            // code
        },
        doSomeStuff: function () {
               console.log(this.getConst(TRIGONOMETRY_PI)); 
        }
    }
}()));

window.APP.doSomeStuff(); // prints 3.14


So this brings us to the best solution to the problem, and that is creating variables with capitalized letters in closure and then using capitalized accessor methods for them.

Example: I will create GRAVITY = 9.8 constant in new subobject of APP, called Physics.
window.APP.namespace('Physics', (function () {
    var GRAVITY = 9.8;
    return {
          GRAVITY: function () {
               return GRAVITY;
         }
    };
}()));

console.log(window.APP.Physics.GRAVITY()); // prints 9.8

This will create subobject Physics in window.APP and it will contain constMap object with one key/value pair, GRAVITY which is function(). I changed namespace() function to create function in constMap if the capitalized key contains value of a function instead of a value.  If I just send this key/value pair: GRAVITY: 9.8, the namespace() function would have created key/value pair in constMap, like so: GRAVITY: "GRAVITY" and you have to access constant's value using the long statement in the previous examples.

To clear things up, you don't even need to create Constants() constructor in your application, you can use variable with closure and accessor methods with capitalized names to represent constants. I created this constMap subobject just to separate constants from other properties/methods in a given object. You don't even need it.

Note: there are some rummors that ECMAScript 7 or was it 6, will contain const keyword. Until then you can use capitalized variable and methods with closure to represent "constants".

If you have any thoughts on the topic, let me know.


Thursday, January 8, 2015

JavaScript Patterns - practice application

Hello. In this post I will explain some JavaScript patters using a script I made.
I have being reading this book: JavaScript Patterns by Stoyan Stefanov, and I covered half by now.

 You can download the script from this link https://github.com/bluePlayer/practices/tree/master/CalculatorJS

I also wrote comments for each property/method/object/module in YuiDoc format and generated in Java style, documentation using YuiDoc Node.js extension. For more info check this link: http://yui.github.io/yuidoc/

So the name of my application is APPLICATION and it is written with capitalized letters because it is global variable. Some JS coding convetions say that you should write constants and globals with capitalized letters because it is easier to distingush from other properties/variables.

It is always good to initialize main application object if it doesn't exist, or prevent initiazlization if it already exist:

var APPLICATION = {};
if (typeof APPLICATION === "undefined") {
    var APPLICATION = {};
}
// shorter
var APPLICATION = APPLICATION || {};

While I was reading "JavaScript Patterns" it mentioned a general namespace function which enables you to create objects and subobjects by just sending dot notated string, like this: "my.new.object".
I made some improvements to this function and added it as a part of the application's namespace, like this:

APPLICATION.namespace = function (nsString, newObjectDefinition) {
    var parts = nsString.split('.'),
        parent = this,
        newObject = {};
       
    newObject.Constants = new this.Constants();
    newObject.constMap = {};
   
    if (parts[0] === this.getName()) {
        parts = parts.slice(1);
    }
   
    for (var i = 0; i < parts.length; i += 1) {
        if (typeof parent[parts[i]] === "undefined") {           
            for (var property in newObjectDefinition) {
                if (property === property.toUpperCase()) {
                    newObject.Constants.set(property, newObjectDefinition[property]);
                    newObject.constMap[property] = property;
                } else {
                    newObject[property] = newObjectDefinition[property];
                }
            }
            parent[parts[i]] = newObject;
        }
        parent = parent[parts[i]];
    }   
   
    return parent;
};


I added a second parameter which adds functionality to the last object created in the tree. So if the fisrt parameter is string: "my.new.object", the function will create three objects, my, new and object in the APPLICATION's tree and object will be initialized with properties and functions from the second parameter. I also added two more subobjects inside every newly created object, so my, new, object will have Contants and constMap objects. Constants is object which gets created with Constants() constructor (from APPLICATION) and it contains, set(), get(), isDefined(), list(). On the other hand constMap contains the keys for calling constants using the get() function. So to get a constant value you should do this:

var myVar = APP.subModule.Constants.get(APP.subModule.constMap.CONST_NAME);

Note: This looks quite clumsy and big. Lot of letters to write. Perhaps it will be easier to write in some JS IDE like WebStrom. Anyway, at the time of writing this code I realised there is a place for improvement. Maybe there should be one general get() function for constants in the application.

As you can see from the application I use namespace pattern. All constructors, methods, events, properties, submodules should be part of one general object. Also I have submodules like, Main, Trigonometry, EventFunctions  and all related properties or methods are kept in its own submodule. This is called module pattern.

What if I want to add static properties? Well you can do it easily by just adding a new property to a given object or subobject. You can also use prototype part of the object and it will be inherited.
example:

var MyObject = function () {};
MyObject.name = "TunePHP";
var newObject = new MyObject();
typeof newObject.name === "undefined" //true
MyObject.prototype.name = MyObject.name;
console.log(newObject.name); // "TunePHP";

It is always useful to have a main init() method for the whole application, where you will initialize all necessary objects/variables/properties after the page has loaded.

Here is the complete code I wrote. Let me know your thoughts.

var APPLICATION = APPLICATION || {
    name: "Calculator",
    version: "1.0.0",
    Constants: function () {},
    namespace: function () {},
    getName: function () {
        return name;
    },
   
    init: function (config) {
        try {
            this.Calculator.Main.currentState = this.Calculator.Main.Constants.get(this.Calculator.Main.constMap.STANDARD);
            this.Calculator.Trigonometry.currentAngleFormat = this.Calculator.Trigonometry.Constants.get(this.Calculator.Trigonometry.constMap.DEGREES);
            return this;
        } catch (error) {
            console.log(error.message);
            return false;
        }
    }
};

APPLICATION.Constants = function (constMapObject) {
    var constants = {},
        ownProp = Object.prototype.hasOwnProperty,
        allowed = {
            string: 1,
            number: 1,
            boolean: 1
        },
        prefix = (Math.random() + "_").slice(2);
       
    return {
   
        set: function (name, value) {
            if (this.isDefined(name)) {
                return false;
            }
            if (!ownProp.call(allowed, typeof value)) {
                return false;
            }
                   
            constants[prefix + name] = value;
            /**
             * @todo use constMapObject to create new constant key in the given constants map object.
             */
            return true;
        },

        isDefined: function (name) {
            return ownProp.call(constants, prefix + name);
        },
       
        get: function (name) {
            if (this.isDefined(name)) {
                return constants[prefix + name];
            }
            return null;
        },
       
        list: function () {
            var index = 0,
                newStr = "";
               
            for (constant in constants) {
                index = constant.indexOf('_');
                newStr = constant.substr(index + 1);
                console.log(newStr + ": " + constants[constant]);
            }
        }
    };
};

APPLICATION.namespace = function (nsString, newObjectDefinition) {
    var parts = nsString.split('.'),
        parent = this,
        newObject = {};
       
    newObject.Constants = new this.Constants();
    newObject.constMap = {};
   
    if (parts[0] === this.getName()) {
        parts = parts.slice(1);
    }
   
    for (var i = 0; i < parts.length; i += 1) {
        if (typeof parent[parts[i]] === "undefined") {           
            for (var property in newObjectDefinition) {
                if (property === property.toUpperCase()) {
                    newObject.Constants.set(property, newObjectDefinition[property]);
                    newObject.constMap[property] = property;
                } else {
                    newObject[property] = newObjectDefinition[property];
                }
            }
            parent[parts[i]] = newObject;
        }
        parent = parent[parts[i]];
    }   
   
    return parent;
};

 APPLICATION.namespace('Calculator', {
   
});

APPLICATION.namespace('Calculator.Main', {
   
    STANDARD: 1,

    SCIENTIFIC: 2,

    PROGRAMMER: 3,
   
    currentState: null,

    currentValue: 0,

    memoValue: 0,
   
    digitGrouping: false,
   
    historyPanel: false,
   
    unitConversionPanel: false,

    dateCalculationPanel: false,

    changeState: function (event) {
        /**
         * @todo currentState = event.newState;
         */
    },
       
    showHistoryPanel: function (event) {
        /**
         * @todo
         */
    },
       
    showUnitConversionPanel: function (event) {
        /**
         * @todo
         */
    },

    showDateCalculationPanel: function (event) {
        /**
         * @todo
         */
    }
});

APPLICATION.namespace('Calculator.Trigonometry', {

    DEGREES: "degrees",
   
    RADIANS: "radians",

    GRADS: "grads",
   
    currentAngleFormat: null
});

APPLICATION.namespace('Calculator.EventFunctions', {

    pressZero: function (event) {
   
    },

    pressOne: function (event) {
   
    },

    pressTwo: function (event) {
   
    },
   
    pressSum: function (event) {
   
    },

    pressSubtract: function (event) {
   
    },
   
    pressMultiply: function (event) {
   
    },

    pressDivide: function (event) {
   
    }
});

APPLICATION.init({});