Introduction to JavaScript Full Stack

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

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

Agenda
 Introduction to JavaScript
 Why I chose to use JavaScript?
 Full-Stack JavaScript Components
 Work-flow Management Tools
 Demo on creating a small app

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

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

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

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/');

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

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 } );

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/

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

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

DEMO

Question and Answer

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

Introduction to JavaScript Full Stack

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Introduction to JavaScript Full Stack (20)

More from Mindfire Solutions (20)

Recently uploaded (20)

Introduction to JavaScript Full Stack