In the times of rapid app development, we need better ways to quickly develop interactive web applications and that is where JavaScript frameworks such as angularJS come to the rescue. The slides discuss how the tech stack evolved, the architectural concepts behind them and the usage of such frameworks along-with few other technologies to use together

1. A Template For Success
Debajani Mohanty
Java Script Framework

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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

8. 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.

9. 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

10. 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.

11. 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

12. Popular NodeJS Projects
 GODADDY
 GROUPON
 IBM
 LINKEDIN
 MICROSOFT
 NETFLIX
 PAYPAL
 RAKUTEN
 SAP
 VOXER
 WALMART
 YAHOO!

13. 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.

14. 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 ExpressJS
and 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.

15. The “MEAN” Architecture

16. Angular JS & Spring
Usage 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.

17. 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.

18. 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.

19. 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.

20. 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.

21. 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.

22. 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.

23. 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.

24. 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