Monthly Archives: July 2016

JavaScript Scopes And Closures

In this post we will learn about JavaScript Scopes And Closures. In JavaScript functions and objects are also variables. A scope is a term which is used to define a region in source code. In this region a variable can be defined and accessed without any errors. In JavaScript scope is a Lexical Scope or Static Scope.

JavaScript has two types of scopes

  • 1) Global Scope: Once an variable defined in Global scope than can be accessed and modified anywhere even within different program files. For example

    or you can assign the value to this variable in the below way too
  • Local Scope : A variable declared inside a function can be accessed within the function. So, scope of that variable is limited to function and this variable cannot be accessed by any other code outside the function. So, the variable is known as local variable and scope of that function is LocalScope. Local variable is created and destroyed each time when function is executed.

Closures are functions that refer to variables that are used locally, but defined in an enclosing scope (Independent (free) variables).
In simple words, these functions ‘remember’ the environment in which they were created.

In JavaScript each function have access to globas scope. As well as each function have access to scope above them (Parent Scope). JavaScript allow to use nested functions. So, the nested function have access to the scope of function in which they defined.

 

An overview to Angular 2, TypeScript and Advance JavaScript

JavaScript is client side scripting language. I hope many of you are used to write programs using JavaScript. In this series i want to share about Angular 2, TypeScript and advanced JavaScript development.

angular-typescript-blue

Many of you are working with Object Oriented programming(OOP) languages like Java, C++ etc. If we talk about object oriented programming, the first thing you need to start a program is a Class declaration. Even if you want write a simple program to written sum of two numbers or write a complex algorithm. The most commanly used design paterns in the industry also supports oop concepts. But in case of JavaScript it is not required to follow Object Oriented programming paradigm. As in each oop language class is most important thing in JavaScript function play role of a class.

In past JavaScript was only used in web development but this day JavaScript is also used Mobile Application Development too. Now this days JavaScript playing a huge role in UI(user interface), UX (user experience) and front end development.

Many JavaScript frameworks come in the light within a few years Like AngularJS, BackBoneJs, Sencha ExtendedJS, ReactJS, Vue.js and many more. This bring a greate revlouion in JavaScript Development.

Now this days Angular become very famous and used in many applications. Angular also playing an important role in hybrid mobile application development and used with PhoneGap, Ionic etc.

I am a big fan of Google’s AngularJs. Amngular 1 was initially launched in October, 2010 and the latest stable release of Angular 1.5.7 was held on June, 2016.Recently Angular  2 introduced. Angular 2 have features of ES6 and ES7. The performance and security related issues of Angular 1 are now resolved with Angular 2. Angular developers team chose TypeScript(A JavaScript built and maintained by Microsoft).

Angular 2

TypeScript was designed for development of large applications for client (AngularJS) and server side (Node.js) execution. TypeScript also transcompiles JavaScript. In simple words TypeScript is a superset of JavaScript. I will discuss about TypeScript in my future post. TypeScript

Now, here i would like to explain some basic fundamentals need to start Object Oriented JavaScript and Advance JavaScript. After that we will start learning AngularJs2 and TypeScript. So we start with below points :-

  • Scopes And Closures
  • Class and Object
  • Methods

New topics will be added into this list in near future. Like us on FaceBook to get the updates

What is Grunt ?

Grunt-JavaScriptGrunt or GruntJS is a node based command line task runner for JavaScript projects. Grunt brought an evaluation in front end &JavaScript development. This is very helpful for developers by automate their repetitive tasks. Grunt used for automation of JavaScript work flows like minifying and concatenating JavaScript files, running tests, refresh browser each time you make changes in your scripts and so on. You can see more at Grunt’s official site.

Why should i use Grunt?

The main and most useful feature of using GruntJS is Automation and this is the reason for using GruntJS. GruntJS also has an great active community of developers. There are almost 5,789 plugins available and new plugins are being released regularly. Some common and most used plugins are JsHint, Saas, Less, uglify etc.

Intersted in grunt , would like to try ? So, lets Start with installation.

Install and setup Grunt on Ubuntu

Each library, software or application have some dependencies. GruntJs also have its requirements. For installing and managing Grunt and Grunt plugins we need npm (A Node.js package manager). So before installing Grunt make sure you have installed npm. Now follow this steps to install GruntJS

  1. Update npm to latest version. To update npm use this command.
  2. 2) As Grunt is a CLI(command Line) tool. So we need to install Grunt’s command line interface (CLI)

    This command will install GruntJS and add to your system command. So, you can run it anywhere using “grunt” Command.
Now we can start using GruntJS in our project. For this follow the below steps
  1. Open a terminal and move to your project folder using cd  command and create a package.json file. Now, open package.json with your favorite code editor and paste the below code into that
  2. Now run the below command into your project folder where you created the package.json file

    This command will install the required libraries for your project locally for your project.
  3. Now in order to use Grunt, we need to create a file called Gruntfile.js. Gruntfile used to specify the tasks which we want to perform by grunt. This file contains the build script for our project. So now create a file named Gruntfile.js in your project directory and paste the below code into that

    Now you are ready to run GruntJS at the root of your project.

    In my next post i will describe How to minimize & concat JavaScript using GruntJS and How to define tasks in gruntfile.js ?

What is Composer ?

what-is-composer

The Composer or PHP Composer is a dependency management tool for PHP. It is similar to npm in node and bundler in ruby. Composer is a command line tool. Composer is used by almost modern frameworks and CMS.

Composer is used to manage the libraries on which the project depends. Composer use a file named composer.json to read the dependencies. As a developer you need to declare the library name and version required by your application into composer.json file and after that you can use the Composer to install or update the libraries.

The best thing about the composer is that it take care of dependencies of the packages also. For example i want to use a package phpunit, this package depends on symfony/yaml & some more package. So, before using the php unit you need to install Symfony/yaml. What if Symfony/yaml depend on other package and so on.

So, if you need to do it manually then its a time consuming and a hectic job. But if you are using composer then no need to worry about all this. Composer will automatically install all the dependencies of the package for you.

Composer use Packagist as its main repository. Packagist allows to install public PHP packages using Composer. You can also make and publish your packages to Packagist. So, whenever you try to install or update any package using composer, Composer first search that package on Packagist and download that package for you.
Now question is How i will load composer packages to my project ?

It is very simple and don’t need any complex configuration. When you install package using composer. Composer creat a dirctory named Vendor and put all the packages into that library. Composer also create a file vendor/autoload.php. You just need to require this file.

Composer requires PHP 5.3.2+ to work. So you need to install PHP before installing the composer. Make sure PHP is runable via Command Prompt or Terminal.

How to install composer on Windows ?

Installation of composer on windows is very easy. You just need to download and run Composer-Setup.exe. This will install the composer on your machine as well as add composer PATH to your system. So you can directly use composer command in command prompt.

How to install composer on Ubuntu ?

Installation of composer on ubuntu is also easy. You just need to run this command

This command will download and install Composer and add as command to your machine for you. So you can directly use composer command in terminal.