Introduction to JavaScript Full Stack


Published on

This presentation is an introduction on creating Web Applications that use a JavaScript Stack.From client-side, to server-side to Database, the stack implements JavaScript for all purposes.

Published in: Software, Technology

Introduction to JavaScript Full Stack

  1. 1. Introduction to Full-Stack JavaScript Presenter: Vageesh Bhasin, Mindfire Solutions Date: 12 – May – 2014
  2. 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: ,
  3. 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. 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. 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. 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. 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. 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. 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. 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 Presenter: Vageesh Bhasin, Mindfire Solutions
  11. 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. 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. 13. DEMO Presenter: Vageesh Bhasin, Mindfire Solutions
  14. 14. Question and Answer Presenter: Vageesh Bhasin, Mindfire Solutions
  15. 15.
  16. 16. Thank you