Deploy your Node.js web application on AWS EC2 instance with Apache web server

When you are done with your Node.js web application the next big thing you may worry about is “how and where to deploy it?”. There are many ways to deploy a Node.js application. Most favorite option is managed hosting like Heroku, DigitalOcean, AWS Elastic Beanstalk, etc. But you can also host Node.js applications on your own server and manage yourself.

In my case, I had an AWS EC2 server with existing Laravel applications running. And my goal was to deploy the Node.js application on it without messing the existing Laravel sites and with minimal installs possible. So I decided to use the existing Apache server and didn’t want to install another web server like Nginx. Fortunately, everything went well and I had my application deployed without messing anything. With that experience in hand, here I am trying to explain the step by step process to deploy a Node.js web application on Amazon EC2 as simple as I can. And it will be same for all Linux servers you have.

To get a clear picture of what we are doing, we can split the steps into 3 major sections.

• Step A: Install Node.js and setup your application on EC2 instance.
• Step B: Install a process manager and keep your application run always.
• Step C: Configure Apache to work with the Node.js application.

Step A: Install Node.js and setup your application

In this step, we will install the Node.js and setup your project on your EC2 instance. Assume you have root SSH access to your EC2 instance and access to your project source code. All the steps are doing inside the Linux terminal, so go ahead and log in to your server.

ssh <username>@<server ip>

Step A-1: Install Node.js

The best and easy way is to install Node.js is using NVM (Node Version Manager).

Download and install NVM.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

Reload the profile.

source ~/.profile

Now install Node.js. You must be aware of the node version that supported by your project or install the latest LTS version.

nvm install v10.19.0

Step A-2: Clone the project

This is a simple step to copy your project to the server. You can either download or clone from a repository. Usually, the web projects are saved under the folder “/var/www/html”, so you can follow that.

cd /var/www/html
git clone <repository url>

Change the directory to your project directory

cd <your new project directory>

Step A-3: Install dependencies and build

Now you can install your project dependencies and build your project.

npm install

You can also use the “ — production” flag if you don’t want to install the dev dependency. If your project needs to build, you can run you build script, like “npm start” or “npm run build” or “grunt” or “gulp” depends upon your project configuration.

Step A-4: Set the environment variable

You may need to set the flag `NODE_ENV` to tell your project that it is running on the production environment. We can configure that as a server-level environment variable by editing or creating the file “/etc/environment”

sudo vim /etc/environment

This will open the file on the vim editor. Add the following line, save and exit (on vim editor, ESC + : + wq + Enter).

NODE_ENV=production

Logout and login the terminal again to take effect on the environment variable.

Step A-5: Verify the application is working

Now, make sure that your application is running properly on the server. You can run your project’s start command to check that. If it works, we are halfway succeeded. But if not, you have to check what is missing on the server than your local running environment.

node app.js

Step B: Install process manager and keep your application run always

Now we are entering into the deployment section. To give you an idea of what we are going to do. The Node.js web applications are started by running a command like “node app.js”. So the web application can listen to the specified port for HTTP requests, for example, “http://127.0.0.1:3000”. But, if you exit the remote terminal the command will eventually stop and the project will not be accessible.

To avoid this problem, we are using a process manager which will keep running the node application even when we exist the remote terminal or the server is restarted.

Step B-1: Install the Process Manager

We can install the process manager PM2.

npm install -g pm2

Step B-2: Configure process

pm2 start app.js
pm2 save
pm2 startup

Now you are running your application. Please note the above start command. The last parameter is the name of your start script. For example, if you start your application like “node app.js” then it will be ”pm2 start app.js”.

You can see the running process and mange it anytime you want. The below command will list the running processes.

pm2 list

Step B-3: Test the application is accessible

Now we believe the application is running and we must make sure it is happening. We are running the application inside the EC2 server and it is only accessible locally until we configure the web server. We can use telnet command to check if the application is accessible inside the server. (Considering the port configuration for you project is 3000).

telnet 127.0.0.1 3000

If you get the success response, we are pretty close to the final step.

Step C: Configure Apache to work with the Node.js application

Now the final step is to route your original domain to the locally running Node.js application (Ex. http://127.0.0.1:3000). For this, we can use Apache as a reverse proxy server which will take care of the communication in between.

Considering you already have made the DNS settings for your domain to point to this EC2 server.

Step C-1: Enable Apache proxy modules

Enable the Apache proxy modules.

sudo a2enmod proxy
sudo a2enmod proxy_http

Step C-2: Add virtual host settings

Open the Apache virtual host configuration file.

sudo vim /etc/apache2/sites-enabled/000-default.conf

Add the following virtual host settings and save the file. Please replace “yourproject.com” with your domain name.

<VirtualHost *:80>
    ServerName yourproject.com

    ProxyRequests Off
    ProxyPreserveHost On
    ProxyVia Full

    <Proxy *>
        Require all granted
    </Proxy>

    ProxyPass / http://127.0.0.1:3000/
    ProxyPassReverse / http://127.0.0.1:3000/
</VirtualHost>

If you have to setup the SSL configuration, you have to add the virtual host settings on the file “/etc/apache2/sites-enabled/default-ssl.conf” also.

Step C-3: Restart Apache web server

Now restart the server to take effect on the virtual host settings.

sudo service apache2 restart

And we are done! Take the project URL on a browser and see it working.

Conclusion

Hope everything went well for you too and you have your domain working perfectly. The configuration is not that hard if we do it properly. The best bet is to understand each step and why we are doing it. Hope I have explained the steps properly and easily.

Thank you so much for reading. Happy Coding!

I was struggling for many months just to understand what really is Functional Programming. I found it very complex and insane in my early days of learning. Then I realise that it was not the problem with functional programming but was mine. I was doing a mistake of learning it heavily comparing with Object Oriented Programming which I am comfortable with. Just like they say “comparing apples and oranges”.

After I realised my mistake, I learned it with a fresh perspective. And surprisingly it was getting into my mind like a magic. Now, I wouldn’t say I am a hardcore functional programmer (or even a functional programmer, I haven’t really worked on any pure functional programming languages!). But, I was able to understand the concepts of functional programming. Based on my encounter with functional programming, here I am trying to explain the functional programming as simple as I can.

What is Functional Programming?

We are familiar with Object Oriented Programming and most of us use that approach to write our daily dose of programs. Similar to that Functional Programming is another paradigm which defines certain ways of writing a program. So it is basically a style of programming.

Functional programming is inspired by mathematical functions, specifically from lambda calculus, a formal system developed in 1930 by Alonzo Church to represent computation.

Why does Functional Programming get popular these days?

Functional programming is invented around 60 years back (First functional programming language is LISP invented in 1958), but it was very rarely used for software development. For the last few years, it becomes very hot topic and you can see many articles, talks, and videos about it.

There may be several reasons and the major reason we can think of is the need for concurrent programming. Since the internet is growing rapidly, high-end processing power is needed to handle the different process and the vast amount of data. Concurrent programming is effectively used to split the processing power into a different core or even different systems. Functional programming can support concurrent programming with great reliability. So big players like Facebook, Amazon, Twitter etc. are using functional programming languages to write their heavy processes.

Another reason would be JavaScript. JavaScript has good support for functional programming even if its a multi-paradigm language. So JavaScript developers started writing programs in the functional way recently. You can see many functional programming talks is by JavaScript developers(like me!) even though they haven’t worked on any pure functional programming languages!

Functional Programming Concepts

Just like we have Object Oriented Concepts (like Inheritance, Polymorphism etc.), functional programming has it’s own concepts too. Let’s discuss a few basic concepts of Functional Programming.

Pure functions

Pure functions are normal functions with a few additional rules.

• It should take parameter(s) and should return a value
• It should not access or modify any global variable
• It should not have side effects (writing to a file, reading database etc.)

Pure functions always return the same result for the same set of inputs, because it only processes its parameters and returns the result. It doesn’t need any language support to write it because the rules are very basic. But some pure functional programming languages force the developer to write pure functions since functional programming states that all the functions of a program should be “pure functions”!

// PURE FUNCTION EXAMPLE 
function sayHello(greet, name) { 
    return greet + " " + name; 
}

alert(sayHello("Hello", "Sam")); 
// Output: Hello Sam

Lambda functions

Lambda functions or anonymous functions are functions without a name. Lambda functions are building block for many of the concepts in functional programming. See an example of a lambda function.

function (a, b) { 
    return a + b; 
};

First-class functions

This is a programming language feature. If a programming language supports first-class functions then it treats functions as first-class citizens.

For example, in normal programming language what we can do with functions? We can “define a function” and “call a function”, that’s all. But in the case of a data types (string, int, double etc.) we can do many more things like…

• Assign values to it
• Pass it to a function as argument
• Get it as a return type from a function

Consider we can do all of this with a function too, then we can say the language has “First-class Functions” and we can…

• Pass functions as arguments to other functions
• Return functions as the values from other functions
• Store functions in data structures

Here is an example of assigning a function to a variable

var fnSum = function (a, b) { 
    return a + b; 
};

Higher-order functions

Higher-order functions are a type of function which does at least one of the following.

• Accept other functions as arguments
• Return other functions as results

To write higher-order functions the language need to support First-class functions. Following is an example function which returns another function as result of a function.

function foo() { 
    return function() { 
        return "Hey there!"; 
    }; 
} 

var bar = foo(); 
console.log( bar() ); // Hey there!

This is the famous syntax of jQuery document ready function, not sure if you have noticed it before, but “ready” is a higher-order function which accepts a function as it’s argument!

$(document).ready( function () { 
    //do some stuff 
});

Immutable data

In functional programming modifying the value of a variable is considered as a serious sin! The reason is to improve readability and run-time efficiency of a program and make it thread-safe. So it recommends the use of immutable data type whose value cannot be modified after it is created. If you want to change the value you need to create a new variable and assign the new value, the existing value cannot be modified.

int i = 42; // Initializing value 

i = 43; // re-assigning the value is not allowed 
i++; // modify the value is not allowed 
i = i + 1; // re-assigning the value is not allowed

Tail recursion

We know recursion is a function calling itself. But what is Tail Recursion?
It just adds a simple specification to recursion, the recursion call should be at the end of the recursive function. So there is a guarantee that nothing is left to execute in the function after a recursive call.
Here is an example of a tail recursive function. You can notice that the last thing does in this function is the recursive call factorial(n - 1)

function factorial(n) {
    if (n <= 1) return 1;

    return factorial(n - 1) * n;
}

var fact = factorial(4); // 24

And here is the same function without tail recursion. Here you can notice that there is some more calculation is doing after the recursive call, that make the function not a tail recursive function.

function factorial(n) {
    if (n <= 1) return 1;

    var fc = factorial(n - 1);
    return n * fc;
}

var fact = factorial(4); // 24

But why the tail recursion is so important for functional programming? Functional programming recommends the use of recursion instead of loops, because loops are bound with mutation of the variable. But recursion has a performance issue, it creates call stacks for every recursive call and that burns the memory. And if we use tail recursion, it can use one call stack for all the recursive calls of a recursive function and that optimise the performance.

Lazy evaluation

Lazy evaluation is an evaluation strategy which delays the evaluation of an expression until its value is used. Strict evaluation always fully evaluates function arguments before invoking the function. Lazy evaluation does not evaluate function arguments unless their values are used.
Let’s see the following 3 examples. We have a function getLength() which returns the count of elements in an input array. The same function is written in 3 different languages JavaScript, PHP, and C#. While we execute the program these are the result we get...

• JavaScript => Gives correct output
• PHP => Gives output, but with a warning
• C# => Shows error and execution terminates

JavaScript

function getLength(arr) {
    return arr.length;
}

var len = getLength([1/2, 40, 2/0, 56]);

console.log( 'Length: ' + len );

PHP

function getLength($arr) {
    return count($arr);
}

$len = getLength([1/2, 40, 2/0, 56]);

echo 'Length: ', $len;

C#

public int getLength(int[] arr) {
    return arr.Length;
}

int len = this.getLength(new int[]  { 1/2, 40, 2/0, 56 });

Console.WriteLine("Length: " + len);

Why PHP and C# show errors? Why didn’t JavaScript show an error?
The reason is an element (2/0) in the input array is invalid, the division by zero is indeterminate! That gives the answer why PHP and C# show errors, but why not JavaScript? The reason is the function never uses the value of the elements of the input array, so JavaScript never validated the parameter. That is called Lazy Evaluation. And if we change the function to use any of the elements, then JavaScript also starts to show error.

What more in Functional Programming?

There is more advanced topic in functional programming. To avoid unnecessary confusion I would recommend to learn them only after you through with the previous topics. These are few of those topics you can add to your bucket list.

• Referential transparency
• Currying
• Closure functions
• Monads
• Map, Reduce, and Filter
• Functional compositions

Why should I learn Functional Programming?

That’s a pretty obvious question. Many of us try to learn functional programming because everybody is talking about it and we don’t want to be the odd guy. Yeah, that’s a good reason, but there are other valid reasons too.

• Many languages are adopting functional programming features. And you can catch them easily if you already know the theory.
• Many languages are already using functional programming like syntax, for example, LINQ in C#, Array functions (Map, Reduce and Filter). And it makes more sense to your daily programming.
• Functional programming handles a problem in a different way than object oriented programming. So you get new ways to look at the problems.

Functional Programming languages

Many languages support functional style programming even though they do not strictly follow the functional programming concepts. But there are languages that strictly follow the functional programming concepts too. Here are some list of major functional programming languages…

• Clojure
• Haskell
• Erlang
• Lisp
• Scala
• Scheme
• F#
• OCaml

Conclusion

Functional programming receives a lot of criticism as it has cryptic concepts. But understand the functional programming concepts is not a big deal if you take the right path. It is simply another way of writing a program, no more than that. Also, there is many fights and talk that say “functional programming is the holy way of programming” (probably because it has pure functions!). And I would say that’s a myth! every programming has its own advantage and disadvantages. At the end, everything is just a compiled bytes!!!

Happy Coding!

In this article, I am trying to explain the step by step process to setup a jQuery Plugin development environment with modern development practice. It will improve the efficiency and maintainability of the project since we can automate tasks like lint, test, build, commit and publish.

TL;DR

You can use the create-jquery-plugin CLI tool to create jQuery Plugins by running npx create-jquery-plugin . Or, you can clone the repository jquery-plugin-boilerplate.

Our aim is to…

• Create a nicer directory structure for the jQuery Plugin project.
• Use Gulp to automate tasks lint, transpile, beautify and minimize.

The example project we use for this article is so simple and minimal. You can use it as a boilerplate for your new plugin and get started.

See the jquery-plugin-boilerplate project on GitHub

Prerequisites

You need Node installed on your development machine, if not, please download and install from here

1. Directory Setup for the project

We can use the latest trending directory structure src and dist. The src is the alias for source and dist for distribution. All our development and coding is happening on src directory and dist directory remains untouched by humans. The dist directory will contain optimized files for the production. Gulp and its plugins are responsible for managing and maintaining the dist directory for us.

Also, we can add examples directory for the demo and usage examples, usually the HTML files. If you want to do unit testing, the test directory can contain your test scripts.

Our final directory structure will look like the following, you can create the directory structure in your project directory.

- dist/ 
    - css/ 
    - js/ 
- examples 
- src/ 
    - css/ 
    - js/ 
- test

2. Install Gulp and other dependencies

Follows the list of Node tools we are going to use in our example project. These are development dependencies and only used in the development environment. You don’t have to install or bundle them on production.

• Gulp — a toolkit for automating painful or time-consuming tasks in your development
• Babel — a JavaScript compiler
• Jshint — a tool that helps to detect errors and potential problems in your JavaScript code
• UglifyJS — a JavaScript compressor/minifier
• Postcss — A tool for transforming CSS with JavaScript
• cleanCSS — Fast and efficient CSS optimizer for node.js and the Web
• CSS Beautify — a JavaScript implementation of reindenter and reformatter for styles written in CSS
• Autoprefixer — A plugin to parse CSS and add vendor prefixes to CSS rules
• Browsersync — Time-saving synchronised browser testing

Add package.json file

Before installing the tools, we need to create the package.json file. It is the configuration file for NPM which contains the details of the project and its dependencies.

It is very easy to create, open the command prompt, go to your project directory and run the command…

npm init

and when asked, type in the details of your project like name, description, version etc. It will create the package.json file on the root of the project directory for you. More details and option of the file can be found here.

Install development dependencies

Next we can install the tools, open the command prompt, go to your project directory and run the following command.

npm install --save-dev autoprefixer del gulp gulp-babel gulp-clean-css gulp-cssbeautify gulp-jshint gulp-postcss gulp-rename gulp-uglify jshint browser-sync node-sass uglify-save-license

The --save-dev parameter tells the npm to install them as the development dependency.

Install project dependencies

Since we are developing the jQuery plugin, we can also install jQuery from npm. Note that we are using -save, to tell npm that it is a project dependency.

npm install -save jquery

These commands will install all the dependencies on the node_modules directory of your project.

3. Create Gulp tasks

Now we can create Gulp tasks, we create 3 kinds of Gulp tasks for the project.

1. clean => Delete all files in the dist folder to keep the directory fresh for every build.
2. lint => Lint the JavaScript files for errors and potential problems.
3. build => Build the JavaScript/CSS files on dist folder.

To create the task, we need to create a configuration file for Gulp called gulpfile.js. It is a simple JavaScript file for defining the tasks. You can create the file on the root of your project directory and let's see what will be the contents of it. Also, you can see the full gulpfile.js file on GitHub.

See the full example file on GitHub

First, we can include the plugins used by the tasks.

// Include the required tools used on tasks 
var gulp          = require('gulp'),
    jshint        = require('gulp-jshint'),
    rename        = require('gulp-rename'),
    uglify        = require('gulp-uglify'),
    saveLicense   = require('uglify-save-license'),
    babel         = require("gulp-babel"),
    postcss       = require('gulp-postcss'),
    cleanCSS      = require('gulp-clean-css'),
    cssbeautify   = require('gulp-cssbeautify'),
    autoprefixer  = require('autoprefixer'),
    sass          = require('gulp-sass'),
    del           = require('del');

// Initialise plugins
sass.compiler     = require('node-sass');
var Server        = require('karma').Server;
var browserSync   = require('browser-sync').create();
var reload        = browserSync.reload;

Then we can set our source and destination files and directories on a variable, So that to avoid repeating it.

// Specify the Source files
var SRC_JS        = 'src/js/*.js';
var SRC_CSS       = 'src/css/*.css';
var SRC_SCSS      = 'src/scss/*.scss';

// Specify the Destination folders
var DEST_JS       = 'dist/js';
var DEST_CSS      = 'dist/css';
var DEST_SCSS     = 'src/css';

Clean Tasks

We have two tasks for clean, clean:js and clean:css. It just deletes the dist/js and dist/css directories.

// CLEAN files 
gulp.task('clean:js', function () { 
    return del([DEST_JS]); 
}); 

gulp.task('clean:css', function () { 
    return del([DEST_CSS]); 
});

You can call the tasks by running

gulp clean:js

gulp clean:css

Lint Task

The lint:js task will call JSHint on each JavaScript files and report the potential errors and problems.

// Lint JS 
gulp.task('lint:js', function() { 
    return gulp.src(SRC_JS) 
               .pipe(jshint()) 
               .pipe(jshint.reporter('default')) 
               .pipe(jshint.reporter('fail')); 
});

You can call the tasks by running

gulp lint:js

Build Tasks

We have 2 build tasks here, one for JavaScript files and another one for CSS files.

The build:js task is configured to call clean:js and lint:js tasks before running build. So that it will clean the directory and check for errors before doing the build. The task will fail if we have errors while linting and avoid creating error files on dist directory.

The build:js task will read all the JavaScript files one by one and call Babel for transpile the files and save them on dist/js directory. Then it uses UglifyJS to minimize and compress the JavaScript files, adds .min suffix on filename and then saves files on dist/js directory.

The build:css task first uses Autoprefixer to add prefix to our css rules. For example we only have to write border-radius: 5px; in our source CSS and the Autoprefixer will add the missing prefixes like -webkit-border-radius: 5px;, -mos-border-radius: 5px; for browser compatibility. Then the task uses the CSS Beautify plugin to convert our css in a well formatted style and save it on dist/css. It will give a nicer look to our non minified css files. And finally, use CleanCSS to minify and compress the css files, adds .min suffix on filename and then save files on dist/js directory.

// Build JS 
gulp.task('build:js', ['clean:js', 'lint:js'], function() { 
    return gulp.src(SRC_JS) 
               .pipe(babel()) 
               .pipe(gulp.dest(DEST_JS))      
               .pipe(uglify({preserveComments:'license'})) 
               .pipe(rename({suffix: '.min'})) 
               .pipe(gulp.dest(DEST_JS)); 
}); 

// Build CSS 
gulp.task('build:css', ['clean:css'], function () { 
    return gulp.src(SRC_CSS)
               .pipe(postcss( [autoprefixer({browsers: ['last 10 versions']})] ))               
               .pipe(cssbeautify({ autosemicolon: true })) 
               .pipe(gulp.dest(DEST_CSS))             
               .pipe(cleanCSS({compatibility: 'ie8'}))
               .pipe(rename({suffix: '.min'}))  
               .pipe(gulp.dest(DEST_CSS)); 
});

You can call the tasks by running

gulp build:js

gulp build:css

As as result of all these tasks, the dist directory will contain two directories css and js. Each of that directory will contain error free and beautiful JavaScript and CSS files along with its minified and compressed versions.

Default Task

Finally, we can specify the default task for Gulp, this will make all the above task run automatically when we simply call gulp from the command line.

// DEFAULT task 
gulp.task('default', function() { 
   gulp.start( 'build:js', 'build:css' ); 
});

You can call it by running

gulp

4. Write your jQuery plugin

We are done with our development setup, now we have to only worry about our plugin code. Use src/js directory to write your JavaScript source code and src/css directory for CSS files. Also, the demo HTML pages can be saved on example directory.

The example project has a very simple jQuery plugin called “alterMe”. The plugin alters the text inside an element to uppercase or lowercase. I am not including the plugin code here, but you can see the plugin files on GitHub.

See the example project on GitHub

5. Build the project

Every time you do changes on your project, just run gulp on your project directory from the command line and sit back. Gulp will do all the clean, lint and build task for you, just remember the magic word...

gulp

Extend Gulp Tasks

We have setup the basic development tasks, we can still extend to add more tasks and features. Let’s discuss some more useful tasks we can add to our project.

Watch Files

Instead of running the tasks every time, you can further automate it by making the tasks run when you modify your files.

// WATCH for file changes and run the tasks 
gulp.task('watch', function() { 
    gulp.watch(SRC_JS, ['build:js']); 
    gulp.watch(SRC_CSS, ['build:css']); 
});

Now run this command and start writing code

gulp watch

Unit Testing

There are many other libraries avaliable for JavaScript unit testing. See this StackOverflow discussion to know more about it.

JavaScript unit test tools for TDD

JavaScript Extensions

Instead of just writing code in plain JavaScript, you can use any of the advanced JavaScript Extensions like CoffeeScript, TypeScript, ECMAScript, etc. and use Gulp tasks to compile that to JavaScript. Please refer the gulp plugins gulp-coffee, gulp-babel, gulp-typescript.

List of languages that compile to JS

CSS Extensions

You can use CSS Extensions like Sass or Less instead of writing plain CSS and use Gulp tasks to convert to CSS. Please refer the gulp plugins gulp-sass, gulp-less

CSS Lint

Like we do JavaScript linting in this example, we can also add CSS linting. Please refer the gulp plugins gulp-csslint, gulp-stylelint also the good article about style linting

How to lint your Sass/CSS properly with Stylelint

HTML Minification

You can minify your HTML using gulp-htmlmin.

npm install gulp-htmlmin --save-dev 

Task configuration

var gulp = require('gulp'); 
var htmlmin = require('gulp-htmlmin'); 

gulp.task('minify', function() { 
    return gulp.src('src/*.html') 
               .pipe(htmlmin({collapseWhitespace: true})) 
               .pipe(gulp.dest('dist')); 
});

Bundling Files

You can bundle your files to a single file using gulp-concat.

npm install gulp-concat --save-dev

Task configuration

var gulp = require('gulp'); 
var htmlmin = require('gulp-concat'); 

// Bundle JS 
gulp.task('bundle:js', function () { 
    gulp.src(SRC_JS) // path to your files 
        .pipe(concat('bundle.js')) // concat and name it "bundle.js" 
        .pipe(gulp.dest(DEST_JS)); 
}); 

// Bundle CSS 
gulp.task('bundle:css', function () { 
    gulp.src(SRC_CSS) // path to your files 
        .pipe(concat('bundle.css')) // concat and name it "bundle.css" 
        .pipe(gulp.dest(DEST_CSS)); 
});

Git Actions

You can perform Git actions like commit and push with gulp-git.

Further Read

Introduction to Gulp.js with practical examples

Building a jQuery Plugin with Gulp

We are all good programmers and we know how to write good programs, but there are some hidden things we might have missed in the programming world. Knowing it could help us to improve our code in speed and readability. I would like to point out few tips and practices in PHP that I found useful.

As you know, PHP (Hypertext Preprocessor) is a widely-used, free, efficient, and versatile programming language that allows developers to create dynamic content, basically used for developing web based applications. Let’s dig a little bit deep into it to see how we can improve the way we write it. This article is meant to help PHP beginners and above, If you haven’t learned the fundamentals of PHP programming yet, take your time to learn and come back.

1. Avoid short PHP tags

Short tags (<? ?>, <?=?>) are easy to use, but it is not always reliable, because short tags can be disabled using the short_open_tag ini setting and not all servers are enabled it by default. So the code written in short tags is not portable across servers unless you have access to the ini settings. Another reason to avoid short tag is it may confuse with <?xml ?> notation. The recommended use of the PHP tag is <?php

<?php 
    // My super portable code goes here
?>

Plus, if you are sure that your PHP version is 5.4.0 and above, you are allowed to use <?= ?> tag too. It is a shortcut syntax of echo and it is pretty handy to print a variable in the inline code. Since PHP 5.4.0, this tag is made free from the short_open_tag ini configuration setting.

<?=$myVariableToPrint?>

Now, push yourself hard to avoid using this tag

<?
    // My code that may not work on all servers
?>

Well, in the history there are other tags are also used that are abandoned in the latest versions(PHP7+). Just listing them to add it your DONT’S list.

<% %> <%=%> // ASP style tag support in PHP
<script language="php"> </script>

2. Avoid closing tag in PHP only files

If your file contains only PHP code, the closing tag (?>) is optional. It is recommended to avoid closing tag because it prevents unwanted white-space or new lines being added at the end of files. That is handy to use output buffering and we will be able to add headers to the response later.

PHP: PHP tags - Manual

3. Code Formatting and Layout

It doesn’t matter in-terms of code execution if we didn’t format the code well. But it does matter, when another person came to read it or another team try to update it or even worst when we come back to review our own code after a long time.

Well formatted code is easier to understand and it look consistent, clean and readable. It didn’t take too much effort, you can use the automatic code formatting feature of your IDE — most of the good IDE have that option, or you take a little time to format it yourself. Read more about PSR-2: Coding Style Guide which is a coding style standard for code formatting.

PSR-2: Coding Style Guide - PHP-FIG

See an example of well indented code:

function calculate($a, $b, $c) {
    $result = 0;
    $x = $a + $b;
    if($x >= $c){
      $result = ($a + $b) * $c;
    }else{
      $result = $a * ($b + $c);
    }
    return $result;
}

And this is NOT, don’t do like this

function calculate($a, $b, $c) { $result = 0;
    $x = $a + $b;
if($x >= $c){
          $result = ($a + $b) * $c;  }else{
 $result = $a * ($b + $c); }
    return $result;
}

4. Write Comment Code

Comments are the part of code that helps to describe what is a piece of code or a function or a class is doing. Writing comments is a good practice to let others know what you’re doing or to remind yourself what you did. You don’t want to comment every line in your code but do when you think it is necessary to understand your code later.
These are the examples of commenting styles on PHP

<?php
echo 'Hello World 1'; // A single line comment
echo 'Hello World 2'; # Another way to do a single line comment

/*
   This is a multi-line comment
   Its cool when I want to write an essay about my code 
*/
echo 'Hello World 3';

PHP: Comments - Manual

5. Choosing Names

Naming your variables, functions, or classes are important. While naming, you should consider these factors

1. The name you chose should be meaningful
2. The name should be in a language everybody will understand (preferably in English)
3. Follow consistent naming convention

There are many naming standards with slight variations, like PSR-1: Basic Coding Standard or Zend Framework Naming Conventions. You can choose any style based on your convenience, just make sure it is consistent throughout the project.
Mostly I use the following naming convention style

• ClassName
• function_name
• $variable_name
• CONSTANT_NAME

Here are the list of best read about naming conventions

• PSR-1: Basic Coding Standard - PHP-FIG
• Manual - Documentation - Zend Framework
• Naming classes, methods, functions and variables

6. Understanding ‘echo’

The PHP echo statement is a language construct (not exactly a function) used to output data to the screen. echo and print both do the same thing, but echo is a little faster. echo can take multiple parameters, and it is faster than concatenating strings.

For example...

echo "Hello ", $name, "!";

is faster and neater than…

echo 'Hello ' . $name . '!';

Also you can use expressions

echo "Sum: ", 1 + 2;

which is better than…

echo 'Sum: ' . (1 + 2);

But echo has no return value, so it cannot be used in expressions. So the following code is invalid!

($some_var) ? echo 'true' : echo 'false';

instead you can use like this

echo $some_var ? 'true' : 'false';

PHP: echo - Manual

7. Using variables

It is not necessary to initialize variables in PHP however it is a good practice. Uninitialized variables will have a default value, relying on the default value may end up in unexpected results of your program. So it is recommended to initialize your variables before using them, and that will make your code much cleaner.

$my_array = array();
$my_integer = 0;
$my_boolean = false;

Also avoid using unwanted variable declarations. Variables cost memory, so removing unwanted variable declaration can reduce memory load. For example…

$my_name = $data['name']; 
echo $my_name;

In the above code we can definitely avoid the variable $my_name, like...

echo $data['name'];

8. Use of Ternary Operators

A simple if/else statement can be changed to make use of ternary operators. It makes your code shorter, readable and saves few lines too. The usage is simple…

// Usage of Ternary Operators 
$variable = (CONDITION) ? IFTRUE : IFFALSE; 

// Similar if/else condition usage in one line
if(CONDITION) { $variable = IFTRUE; } else { $variable = IFFALSE; }

An example usage of ternary operators

$action = (empty($_POST['action'])) ? 'default' : $_POST['action'];

Is identical to this if/else statement

if (empty($_POST['action'])) {
    $action = 'default';
} else {
    $action = $_POST['action'];
}

PHP: Comparison Operators - Manual

9. Use of Comparison Operators

PHP have strict and loose comparison operators, the difference is strict comparison validates value and type while loose comparison only validates value. You can use any of the comparison, but to avoid unexpected program behavior, you should be very clear what you are doing.

It is not a big deal to choose, if you want to compare the value and the type go for strict comparison otherwise use loose ones.

For example, you are validating a POST value and you don’t know in which type it will come always and you only care about the value. Then go for loose comparison

// Pass if $_POST['user_id'] is an integer 1234 or a string '1234'

if($_POST['user_id'] == '1234'){  
    echo 'Hello Special user';
}

But, for example, you are validating a return value from a function and you really care the type of the return value. In the below example if you don’t use strict comparison the condition will pass if the function return ‘1’, which will be a serious flaw.

// Pass only if the function IsThisAdmin() return a boolean true

if(IsThisAdmin($_POST['user_id']) === true){
    echo 'Hello Admin';
}

Another very common example for this is while using strpos to compare strings. Here in the below example, if you use != for comparison, it print output as 'string not found', which is wrong.

The reason is strpos return 0, which is the position of the string and the loose comparison consider 0 as false, hence the unexpected result. So the correct check is as follows...

if (strpos('abcdef', 'a') !== false) {
    echo 'string found'; // Found, thanks to operator !==
} else {
    echo 'string not found'; // Not found, thanks to operator !==
}

• PHP: Comparison Operators - Manual
• PHP: strpos - Manual

10. About Strings

Let us take a look at common ways of specifying strings and its use in PHP.

Single quoted

Enclosed in single quotes (') is a simple way to specify a string. It doesn't parse any special characters, but it allow escape character with a backslash (\), generally for escaping a single quotes and backslash itself in the string. So this way is ideal if you want to output a special character literally, such as \r or \n, and this method is good if you have a simple string to specify.

echo 'Hello, \n this is a newline'; 
// Outputs: Hello, \n this is a newline

Double quoted

Enclosed in double-quotes (") is a another way to specify a string, and PHP will interpret more escape sequences for special characters. So \n in the string really output a newline instead of literally printing it. And variables specified in the string will be parsed and replaced with its value, if available. This method is ideal if you have to specify variables or special characters in your string.

$name = "Dipu Raj";

echo "Hello, My name is $name"; 
// Outputs: Hello, My name is Dipu Raj

echo "See the first character of my name '{$name[0]}'";  
// Outputs: See the first character of my name 'D'

There are many talk about performance of both string specifications. Some point out that single quoted is faster because it doesn’t include much parsing. But in my opinion both give same performance on normal use, a few parsing doesn’t make noticeable performance lack. So use any method you want as the situation demands, unless you want to do micro-optimization.

Heredoc and Nowdoc are the other complex way of specifying strings, they are not used very common. You can read more about them on PHP strings manual.

PHP: Strings - Manual

11. About Arrays

Array in PHP is optimized for several different uses, it can be used as an array, list, hash table, dictionary, collection, stack, queue, etc. Let’s look into some cool features of PHP Array probably don’t use commonly.

Since PHP 5.4, we get the short array syntax, which allow to use [] instead of array(). Checkout the short and regular syntax example...

// Short array declaration syntax, as of PHP 5.4
$my_array = [1, 2, 3, 4]; 
$my_array_2 = ['one' => 1, 'two' => 2, 'three' => 3, 'four' => 4];
 
// Regular array declaration syntax, all PHP versions
$my_array = array(1, 2, 3, 4); 
$my_array_2 = array('one' => 1, 'two' => 2, 'three' => 3, 'four' => 4);

Square brackets and curly braces can be used for accessing array elements. Both line of code have same effect in the below example…

echo $my_array[2];
echo $my_array{2};

Since PHP 5.4, we can directly access the result of a function or method as array (array dereferencing).

<?php
function getColors() {
    return array('red', 'blue', 'green', 'yellow');
}

// As of PHP 5.4
$second_color = getColors()[1]; 

// Previously it was only possible using a temporary variable
$tmp = getColors();
$second_color = $tmp[1];

The foreach loop provides an easy way to traverse an array

foreach ($my_array as $key => $value)
{
    echo 'Key: ', $key, ' Value: ', $value;
}

Since PHP 5, we can manipulate array value directly by passing them by reference.

// PHP 5
foreach ($colors as &$color) {   // &$color pass by reference
    $color = strtoupper($color);
}

/* Make sure to unset the reference variable, 
   it may affect the array value if the variable $color is modified elsewhere in the code */
unset($color); // Unset the reference variable

// Older versions workaround
foreach ($colors as $key => $color) {
    $colors[$key] = strtoupper($color);
}

Use quotes if you have array key as a string. It still works if you don’t, but that is not recommended. The reason is that PHP assume it as a constant if you don’t enclose in quotes, and PHP automatically converts it into a string if there is no defined constant in that name, that’s why it still works, but we are giving the compiler an extra load. Also if you already have a constant with the same name, you get weird results.

echo $my_array_2['three']; // Correct

echo $my_array_2[three]; // Wrong code

• PHP: Arrays - Manual
• PHP: array - Manual

Conclusion

I hope that the tips and practices discussed here was helpful to you. However, programming is vast, don’t stop learning, try new things and be up to date. If you think there is an incorrect information or missing clarification, please let know with your comment.

Happy Coding!

PHP Programming Best Practices and Coding Styles was originally published in TechLaboratory on Medium, where people are continuing the conversation by highlighting and responding to this story.

Wizards are a nice user interface design to lead the users to perform a task in a step by step order like a shopping checkout or user registration screen. Wizards can make a complicated screen divided into simple, small and grouped parts and so effectively simplify the task for the users.

Here we are discussing the best jQuery wizard plugins that can make a nice wizard interface.

1. jQuery Smart Wizard

The awesome jQuery step wizard plugin with Bootstrap support

View · Download · Demo

2. jQuery Wizard

A powerful jQuery plugin for creating step-by-step wizards with bootstrap

View · Download · Demo

3. Multi-Step Form

Multi Step Form with jQuery validation

View · Download · Demo

4. jQuery Steps

A powerful jQuery wizard plugin that supports accessibility and HTML5

View · Download · Demo

5. jquery-steps

Lightweight jQuery step wizard plugin.

View · Download · Demo

6. jWizard

jQuery Plugin for generating a Windows Wizard-like interface for your Web Applications

View · Download · Demo

7. Twitter Bootstrap Wizard

Builds a wizard out of a formatter tabbable structure

View · Download · Demo

8. jQuery.wizard

An asynchronous form wizard that supports branching.

View · Download · Demo