Introduction to JavaScript Full Stack

Introduction to JavaScript Full Stack

• 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 toJavaScript  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 choseto 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