• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to JavaScript Full Stack
 

Introduction to JavaScript Full Stack

on

  • 249 views

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.

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.

Statistics

Views

Total Views
249
Views on SlideShare
248
Embed Views
1

Actions

Likes
0
Downloads
12
Comments
0

1 Embed 1

http://192.168.6.179 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to JavaScript Full Stack Introduction to JavaScript Full Stack Presentation Transcript

    • Introduction to Full-Stack JavaScript Presenter: Vageesh Bhasin, Mindfire Solutions Date: 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 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/'); 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