Vageesh Bhasin gave a presentation on full-stack JavaScript. He began by introducing himself and his background. The agenda included an introduction to JavaScript, why he chose to use JavaScript, the components of full-stack JavaScript including server-side components like Node.js and Express and client-side frameworks like Angular and Ember, workflow management tools like Grunt, Gulp and Yeoman, and a demo of building a small app. He concluded with time for questions.

1. Introduction to Full-Stack
JavaScript
Presenter: Vageesh Bhasin, Mindfire Solutions
Date: 12 – May – 2014

2. Presenter: Vageesh Bhasin, Mindfire Solutions
About Me
By Profession:
 Current - Quality Analyst with Mindfire – Web Application Testing
 Prior - Quality Analyst with Infosys – Database Testing
By Hobby:
 Web application development
 Reading, learning and implementing newer technologies
Contact Me:
 Facebook: Link
 LinkedIn: Link
 My Blog: Link
 Email: vageesh_bhasin@outlook.com ,
vageeshb@mindfiresolutions.com

3. Agenda
 Introduction to JavaScript
 Why I chose to use JavaScript?
 Full-Stack JavaScript Components
 Work-flow Management Tools
 Demo on creating a small app
Presenter: Vageesh Bhasin, Mindfire Solutions

4. Introduction to JavaScript
 Is a Dynamic Programming Language
 Most commonly used in web browsers to allow client-side scripts to interact
with the users
 Syntax is related to C and copies many name and naming conventions from
JAVA
 But is otherwise unrelated to JAVA
 Can be used outside of browsers and with the influx of newer VMs and
platforms (notably Node.js), popularity of using JS at server-side has
increased
Presenter: Vageesh Bhasin, Mindfire Solutions

5. Why I chose to use JavaScript
 Started with my application development hobby with Ruby on Rails
 Learned fundamentals and architectural patterns – MVC, MVW*, etc.
 Had to learn client side libraries for user interaction and DOM manipulation
 Client-side Language vs Server-side Language:
 Different syntax
 Different semantics
 Total chaos :(
 The idea behind unified language on both sides:
 Homogenous programming experience
 Enables reuse of components and resources
 One language to rule them all (LoTR reference :) )
 Popularity rise because of Node.js, puts JS on server-side and also promotes Non-
blocking programming
 JS is the INTERNET
 VBScript's replacement to TypeScript (Compiles to JS)
 Flash's demise due to HTML5 and mobile market
Presenter: Vageesh Bhasin, Mindfire Solutions

6. Full-Stack JavaScript – High Level Overview
Client
Middleware
Server
Database
1
2
3
4
5
6
1. User Interactions
2. HTTP Requests
3. DB Queries
4. DB Response / JS Objects
5. JSON
6. DOM Updates

7. Full-Stack JavaScript Components – Server
 Node.js -
 Server-side JS Platform – Not just a SSJS
 Non-blocking I/O and asynchronous events
 Internally uses Google's V8 JavaScript engine
Example to create HTTP server using Node.js:
var http = require('http');
http.createServer(
function (request, response) {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('Hello Worldn');
}
).listen(8000);
console.log('Server running at http://localhost:8000/');
Presenter: Vageesh Bhasin, Mindfire Solutions

8. Full-Stack JavaScript Components – Server Components
 Server Components or Middleware are part of the pipeline
 The pipeline processes a request and generates a response
 A middleware component only addresses a part of a request and generates
only a part of a response
 It then delegates to the next piece in the pipeline
 When the last piece finishes processing, the response is sent to the client
 ExpressJS:
 A Node.js application framework that helps in building SPAs, MPAs and Hybrid
Applications
 A minimalistic and flexible framework
Presenter: Vageesh Bhasin, Mindfire Solutions

9. Full-Stack JavaScript Components – Database
 A database that uses JavaScript as its query language
 MongoDB:
 A document-oriented NoSQL Database
 Stores documents in BSON format
 Written in C++
 Developed by 10gen (now MongoDB Inc.)
 CouchDB:
 A NoSQL Database that stores data in JSON format
 Written in Erlang
 Opensource under Apache
 Personally use MongoDB in my development projects
Example of querying in MongoDB
db.people.find( { name : 'Vageesh' } ); // db.collection_name.find( { query_parameters } );
Presenter: Vageesh Bhasin, Mindfire Solutions

10. Full-Stack JavaScript Components – Client-Side
 There are many Client-Side frameworks to choose from to create SPAs
 The top three frameworks are:
 Angular.js
 Maintained by Google and Community
 Based on MVC design paradigm
 Only requires JS, HTML and CSS on client side
 Backbone.js
 Made by Jeremy Ashkenas (Created CoffeeScript and Underscore.js also)
 Not a complete framework but a library
 Based on MVP design paradigm
 Combine with Marionette.js to simplify construction of large scale SPAs
 Ember.js
 Made by Yehuda Katz (Core contributor of jQuery, RoR, SproutCore), Tom
Dale and community contributors
 Based on MVC design paradigm
 Uses templating library – Handlebars.js
 Which is best for you? Visit http://todomvc.com/
Presenter: Vageesh Bhasin, Mindfire Solutions

11. Workflow Management Tools
 Why do we need workflow management tools?
 Helps get started
 Maintains dependencies
 Enforces best practices
 Prepares your tools
 Fights regression
 Eases release process
 How to get Started?
 Seed projects – MEAN seeds, Ember seeds
 Generators – YEOMAN
 Git repositories – Personal or community repositories
 Maintain dependencies?
 Front-end package manager – Bower
 Back-end package manager – NPM
 Build your code and automate tasks?
 Grunt – Wider community support
 Gulp – Faster and simple
 Both are equally powerful
Presenter: Vageesh Bhasin, Mindfire Solutions

12. Workflow Management Tools – Contd.
 Testing:
 Test-Driven Development – Mocha
 Behavior-Driven Development – Jasmine
 Test runner – Karma
 Plenty of other testing and assertion libraries to choose from
 Browser Tools:
 Use Chrome dev tools plugins
 Use Firebug
 Use Ember plugin (for Ember.js debugging)
• Writing Code:
 IDEs - Eclipse(Nodeclipse & Enide), JetBrains plugin
 Text Editors – Sublime Text, VIM, Brackets
Presenter: Vageesh Bhasin, Mindfire Solutions

13. DEMO
Presenter: Vageesh Bhasin, Mindfire Solutions

14. Question and Answer
Presenter: Vageesh Bhasin, Mindfire Solutions

15. www.mindfiresolutions.com
https://www.facebook.com/MindfireSolutions
http://www.linkedin.com/company/mindfire-solutions
http://twitter.com/mindfires

16. Thank you