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