JavaScript as Server Side / Client Side

JavaScript evolved a lot since its inception.

Node.jshttps://en.wikipedia.org/wiki/Node.js
In software development, Node.js is an open-source, cross-platform runtime environment for developing server-side Web applications. Although Node.js is not a JavaScript framework,[3] many of its basic modules are written in JavaScript, and developers can write new modules in JavaScript. The runtime environment interprets JavaScript using Google’s V8 JavaScript engine.
Node.js has an event-driven architecture capable of asynchronous I/O. These design choices aim to optimize throughput and scalability in Web applications with many input/output operations, as well as for real-time Web applications (e.g., real-time communication programs and browser games).

https://nodejs.org/en/
Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

We can try Node inside browser for quick testing/demo
https://runkit.com/home

—————————
NPM: Easy to pull and use packages similar to Maven pulls jars from repos.
npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.
https://www.npmjs.com/
—————————

Grunt: http://gruntjs.com/
Task Runner
Why use a task runner?
In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes.
—————————
Bower https://bower.io/
Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.

Keeping track of all these packages and making sure they are up to date (or set to the specific versions you need) is tricky. Bower to the rescue!

Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else – it just installs the right versions of the packages you need and their dependencies.

To get started, Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json. How you use packages is up to you. Bower provides hooks to facilitate using packages in your tools and workflows.

Bower is optimized for the front-end. If multiple packages depend on a package – jQuery for example – Bower will download jQuery just once. This is known as a flat dependency graph and it helps reduce page load.

—————————
http://yeoman.io/
What’s Yeoman?

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.

To do so, we provide a generator ecosystem. A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts.

This is like maven archetypes to generate boiler plate code with proper directory structure.
—————————

Kickstart Your AngularJS Development with Yeoman, Grunt and Bower
https://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/

—————————

Karma / Jasmine are test frameworks for Angular JS.
—————————

Single Page Application (SPA)

When we need to collect data from Users in multiple pages through logical groupings, it is better to build thin client.

This provides better user experience. Easy to maintain. There are different variations, check with Architect for better solution.

Reference:

http://en.wikipedia.org/wiki/Single-page_application

http://singlepageappbook.com/

http://blog.andyet.com/2010/oct/29/building-a-single-page-app-with-backbonejs-undersc/

http://backbonejs.org/

http://backbonetutorials.com/

http://underscorejs.org/

-o-

Web Page Testing Tools

*****
http://getfirebug.com/
Easy to inspect page elements

*****
www.charlesproxy.com/
Very nice tool to analyze the performance

*****
http://yslow.org/
YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites

*****
https://developers.google.com/speed/pagespeed/
The PageSpeed family of tools is designed to help you optimize the performance of your website. PageSpeed Insights products will help you identify performance best practices that can be applied to your site, and PageSpeed optimization tools can help you automate the process.

Page Test Tool
http://sourceforge.net/apps/mediawiki/pagetest/index.php?title=Main_Page

http://tools.pingdom.com
Very nice Analysis and breakup of the information

http://www.joedog.org/siege-home/
HTTP Load Testing Tool

http://grinder.sourceforge.net/
HTTP Load Testing Tool

*****
http://jmeter.apache.org/
Complete Load Testing Tool for HTTP, HTTPS, JMS, ..etc with lot of advanced features.

*****
Internet Explorer Developer Toolbar
http://www.microsoft.com/en-us/download/details.aspx?id=18359

http://www.riverbed.com/us/products/stingray/stingray_aptimizer.php
Very best tool – Not Free

http://www.topdesignmag.com/30-useful-mozilla-firefox-plugins-for-web-developers/
Very useful tools to analyze web page

http://www.neustar.biz/enterprise/resources/web-performance/instant-test
Very nice online performance test graphs

-o-