Introduction to Full-Stack JavaScript

Presenter: Vageesh Bhasin, Mindfire SolutionsDate: 12 – May – 2014

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

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

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

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

Full-Stack JavaScript – High Level Overview

Client

Middleware

Server

Database

1

2

34

5

6

1. User Interactions2. HTTP Requests3. DB Queries4. DB Response / JS Objects5. JSON6. 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 World\n'); }).listen(8000); console.log('Server running at http://localhost:8000/');

Presenter: Vageesh Bhasin, Mindfire Solutions

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

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

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

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

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

DEMO

Presenter: Vageesh Bhasin, Mindfire Solutions

Question and Answer

Presenter: Vageesh Bhasin, Mindfire Solutions

www.mindfiresolutions.com

https://www.facebook.com/MindfireSolutions

http://www.linkedin.com/company/mindfire-solutions

http://twitter.com/mindfires

Thank you