A Template For Success

Debajani Mohanty

Java Script Framework

Challenges in Front-end

Development

As per well-known lead front-end developer of Yahoo as well as author to many related technical books, Nicholas Zakas “Front end development is the most hostile development environment in the world."

Once a front end developer has finished doing their job, they get right back to work making sure that the product functions optimally on every browser, mobile device, and high-end toaster oven under the sun that makes Front end development much more complicated than it seems.

It’s also important to focus on the security of the product, protecting against CSRF, XSS, DNS pinning, and clickjacking.

Single Page Applications

The old-timers in Java might still remember the Swing & Applet

applications that formed the thick client web based UI. It was later to

be replaced with Jsp and many different template technologies that

offered thin client solutions. In last few years we are again moving

back to the fat client approach that we had started with.

In past few years, Single Page Applications (SPAs) have become

extremely popular on the web, because they are supposed to provide

a more fluid user experience entirely based on fat client approach.

Difference From Traditional Web

Application

In traditional web applications, the client (browser) initiates the communication with the server by requesting a page. The server then processes the request and sends the HTML of the page to the client. In subsequent interactions with the page –e.g. the user navigates to a link or submits a form with data– a new request is sent to the server, and the flow starts again: the server processes the request and sends a new page to the browser in response to the new action requested by the client.

In Single-Page Applications (SPAs) the entire page is loaded in the browser after the initial request, but subsequent interactions take place through Ajax requests. This means that the browser has to update only the portion of the page that has changed; there is no need to reload the entire page. The SPA approach reduces the time taken by the application to respond to user actions, resulting in a more fluid experience.

SPA Frameworks

The three major players in this area are AngularJS, EmberJS and Backbone.js

All the above mentioned frameworks have common features: their code is open, released under MIT license & they solve tasks of single-page web application creation with the help of MV* designing template. All of them have the concept of scene, event, data models & pathnames.

Backbone stands for minimalism. It is fast & simple in teaching & provides a minimal set of the necessary tools.

Angular is an innovator in extending HTML possibilities. It has a huge community & support from Google, it will have a constant growth & development. It suits well for fast and simple way to create a mockup as well as for huge projects.

EmberJS has the highest learning curve. Yet it would suit relatively bigger applications with long running client sessions. If you are creating heavy RESTful front-end apps, Ember is your framework.

Advantages Of AngularJS

AngularJS provides capability to create Single

Page Application in a very clean and maintainable

way.

AngularJS provides data binding capability to

HTML thus giving user a rich and responsive

experience

AngularJS is opensource & code is unit testable.

AngularJS uses dependency injection and make

use of separation of concerns.

AngularJS provides reusable components.

With AngularJS, developer write less code and

get more functionality.

Cases where Angular shines?

Building form-based "CRUD apps".

Throw-away projects (prototypes, small apps).

Slow corporate monoliths, when performance

does not matter and maintenance costs are not

discussed

Where Angular Fails

Teams with varying experience.

Projects, which are intended to grow.

Lack of highly experienced frontend lead

developer, who will look through the code all the

time.

Project with 5 star performance requirements.

Application written in AngularJS are not safe.

Server side authentication and authorization is

must to keep an application secure.

If your application user disables JavaScript then

user will just see the basic page and nothing

more.

Node JS

AngularJS is mostly but not necessarily used with

NodeJS.

It can also be used with Tomcat or any other

standard J2EE server.

Node.js is an open-source, cross-platform runtime

environment for developing server-side Web

applications.

Node.js is not a JavaScript framework, but its

applications are written in JavaScript and can be

run within the

Node.js runtime on a wide variety of platforms

that varies from Windows, IBM AIX, Linux or few

more.

NodeJS Single Thread Vs Java EE Multiple

Thread

Node.js provides an event-driven architecture and a non-blocking I/O API

designed to optimize an application's throughput and scalability for real-time

Web applications. The most important differences between NodeJS and

Java are the concurrency and I/O models. Java uses multi-threaded

synchronous I/O while NodeJS uses single threaded asynchronous I/O.

The below diagram shows how in a multithreaded environment, multiple

requests can be concurrently executed, while in a single-thread environment

multiple requests are sequentially executed. Of course, the multi-threaded

environment utilizes more resources.

It may seem obvious that a multithreaded environment will be able to handle

more requests per second than the single threaded environment. This is

generally true for requests that are compute intensive, which utilize the

allocated resources extensively.

Resource Usage However, in cases where requests involve a lot of I/O such as

database or web service calls, each request needs to wait for the

external engine to respond to the calls made, and hence the

allocated CPU and memory resources are not used during this

wait time.

The following diagrams illustrate this scenario where requests

involve I/O wait times:

Node.js is typically used where light-weight, real-time response

is needed, like communication apps and Web-based gaming. It

is used to build large, scalable network applications

Popular NodeJS Projects

GODADDY

GROUPON

IBM

LINKEDIN

MICROSOFT

NETFLIX

PAYPAL

RAKUTEN

SAP

VOXER

WALMART

YAHOO!

Is Node JS a replacement to Apache

Tomcat

This diagram shows the market position of the selected technologies

in terms of popularity and traffic compared to the most popular web

servers.

As per a report in https://dzone.com/articles/performance-

comparison-between that compares the performances of tomcat and

nodeJS, The Node.js is 20% faster than the Java EE solution for

the problem at hand.

Working with MEAN stack – The

Complete Solution The MEAN stack (MongoDB, Express.js, Angular.js,

Node.js) is now being deemed as the new LAMP (Linux, Apache, MySQL, PHP), the preferred technology stack for startups.

In the MEAN stack, the Linux operating system is replaced with any operating system that Node.js can run on. This includes MS Windows, Mac OS, and Linux. The Apache web server is replaced with the Node.js. The MySQL is replaced with MongoDB, which is a No-SQL database. The PHP server side programming language is replaced with the ExpressJS, which basically provides a thin layer of features over Node.js. Here is a key point; the ExpressJSand Node.js in combination are tools to run JavaScript on the server side.

MongoDB with its JSON document structure comes with a lot of flexibility and helps to create highly scalable solution and faster applications. MEAN stack is great for POC projects and for dealing with data that may ultimately prove tricky to constrain in table form.

The “MEAN” Architecture

Angular JS & SpringUsage of Angular JS consuming Spring REST based web services has

become very popular nowadays as it gives us the option to build a

complex, secure, high-traffic, enterprise level single-page application. In

fact many existing projects currently migrating their Spring MVC

application from JSP to Angular JS. We may use Spring Boot to quickly

build such an application with production-ready services, Basic health-

check and monitoring functions, Pre-configured, embedded Tomcat

server, Executable JAR packaging with all dependencies included, Very

little overall configuration overhead.

Why Unit Testing In Javascript? JavaScript is a dynamically typed language

comes with almost no help from the compiler. So JavaScript needs to come with a strong set of tests.

AngularJS is developed with unit testing in mind. With features like dependency injection testing components are much easier, because you can pass in a component's dependencies and stub or mock them as you wish.

For testing Angular applications there are certain tools that you should use that will make testing much easier to set up and run. We need to know the usage of Karma, Jasmine, angular-mocks.

Karma Karma is The official AngularJS team test runner.

We’ll use it to launch Chrome, Firefox, and PhantomJS.

It’s a JavaScript command line tool that can be used to spawn a web server which loads your application's source code and executes your tests. You can configure Karma to run against a number of browsers, which is useful for being confident that your application works on all browsers you need to support. Karma is executed on the command line and will display the results of your tests on the command line once they have run in the browser.

Karma is a NodeJS application, and should be installed through npm. Full installation instructions are available on the Karma website.

Jasmine

Jasmine is a behavior driven development

framework for JavaScript that has become the

most popular choice for testing Angular

applications. Jasmine provides functions to help

with structuring your tests and also making

assertions. As your tests grow, keeping them well

structured and documented is vital, and Jasmine

helps achieve this.

angular-mocks

Angular also provides the ngMock module, which

provides injecting & mocking for your tests. This

is used to inject and mock Angular services within

unit tests. In addition, it is able to extend other

modules so they are synchronous. Having tests

synchronous keeps them much cleaner and

easier to work with. One of the most useful parts

of ngMock is $httpBackend, which lets us mock

XHR requests in tests, and return sample data

instead.

Mocha

Mocha is a feature-rich JavaScript test framework

running on Node.js and in the browser, making

asynchronous testing simple and fun. Mocha tests run

serially, allowing for flexible and accurate reporting,

while mapping uncaught exceptions to the correct test

cases.

Mocha is free and open source, licensed under the

MIT license.

Why Integration Testing In

Javascript? As applications grow in size and complexity, unit as

well as manual testing would not be enough.

Integration testing is to test between components which can't be captured in a unit test. End-to-end tests are made to find these problems.

In large projects where we have hundreds of developers working in different teams a practice of running all integration tests should be mandatory before merging the code to master repository. It enables all developers to minimize the risks of their code & features overwritten by someone else’s by mistake.

Automation testing of such end-to-end scenarios would ensure integrity of all modules in all environments.

Summary

In the times of rapid app development, we need better ways to quickly

develop interactive web applications and that is where JavaScript

frameworks come to the rescue.

While learning Tech stack of Angular JS Architects and senior developers

must note that we have to wisely select a group of technologies, be it Node

JS or Spring MVC, that fits into our requirements and address all the non-

functional requirement of the application.

Comparing NodeJS with Spring would be like comparing Apples with

Oranges. Node.js is a platform while spring is a enterprise framework and

both have totally different usecases.

Node JS is better than Spring in creating Web services written on top of

NoSQL and RDBMS databases. The whole non-blocking model makes Node

JS a lot more faster than Web services implemented on top of Spring and

hosted on J2EE servers. Java + whole J2EE stack + Spring stack adds a lot

of overhead, and if you goal is to serve REST calls, Node JS gets the job

done, and gets it done well.

Spring is better at creating enterprise Java applications. It integrates into the

Java ecosystem a lot better than Node JS. If you have a lot of COTS

applications in your ecosystem, a Spring based web application will integrate

much easily.

References NodeJS - https://en.wikipedia.org/wiki/Node.js

MEAN stack - http://www.newspindigital.com/wp-content/uploads/2014/08/NSD_Node.js-Stack-1024x534.png

Market Position NodeJS Vs Tomcat -http://w3techs.com/technologies/comparison/ws-nodejs,ws-tomcat

What Developers Mean When They Build a MEAN Stack - https://www.newspindigital.com/nsd-tech-primer-the-mean-stack-a-k-a-full-stack-javascript/

Java EE threads v/s Node.js – which is better for concurrent data processing operations -http://bijoor.me/2013/06/09/java-ee-threads-vs-node-js-which-is-better-for-concurrent-data-processing-operations/

Unit Testing - https://docs.angularjs.org/guide/unit-testing