Web application
Upcoming SlideShare
Loading in...5

Web application






Total Views
Slideshare-icon Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

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.

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

    Web application Web application Presentation Transcript

    • Web Application HTML, CSS, JS
    • Ingredients of a Web Application ● ● ● ● ● Front End Back End APIs Devices to support Accessibility**
    • Focus on Front End Why? Where ? What? How?
    • Why ? - Naive User Where ? - Internet [From Anywhere] What? - Pictures are better way to express communication than letters or journals How? - HTML/CSS/JS
    • HTML - Structure CSS - Design Javascript - Behaviour
    • How to build a web application ● ● ● ● Viewports to support Devices to support HTML>CSS>JAVASCRIPT Way to communicate and get data
    • HTML Basic ● ● ● ● Significance of doctype <html>, <head>,<body> inline/block/table layouts
    • CSS Basic ● Selectors ● Box-Model ● Rendering
    • Javascript Basic ● ● ● ● ● ● Window, document Events - important for behaviour AJAX - Asynchronous ** <noscript> Security Debugging - Ahh
    • ● Everything is a Object eg function , var anything(Native/Host) ● There are also these primitive value types like Undefined, Null, String, Boolean and Number that aren't objects ● JS is Object-oriented language or Prototype based language
    • "Prototype-based programming is a style of object-oriented programming in which classes are not present, and behavior reuse (known as inheritance in class-based languages) is accomplished through a process of decorating existing objects which serve as prototypes. This model is also known as class-less, prototype-oriented, or instancebased programming."
    • Prototype ● When you define a function within JavaScript, it comes with a few pre-defined properties ● The prototype property is initially an empty object, and can have members added to it – as you would any other object. ● Every object within JavaScript has a “secret” property added to it when it is defined or instantiated, named __proto__ ● __proto__ property shouldn’t be confused with an object’s prototype
    • var redbus = function(address){ this.address = "honolulu"; return this.address; } console.log(typeof redbus) //FUNCTION "Function is a predefined object in JavaScript, and, as a result, has its own properties (e.g. length and arguments) and methods (e.g. call and apply). And yes, it, too, has its own prototype object, as well as the secret __proto__ link."
    • console.log(redbus instanceof Function) //true console.log(redbus.__proto__ == =Function. prototype) // true var rb = new redbus; console.log(rb__proto__ ===redbus.prototype) // true console.log(rb_proto__===Function.prototype) //false
    • This is known as prototype chain! ● Ends when prototype of any object is null ● By default Object's prototype is null ● Confusing - Yes , Everything is Object and Function , no classess , no keywords as public - private: "yet we challenge to make it Object Oriented"
    • function Animal() {....} Animal.prototype.walk = function(){ alert ('I am walking Gangnam style!'); }; function Monkey() { // Call the parent constructor Animal.call*(this*); }
    • / inherit Person Monkey.prototype = new Animal(); Monkey.prototype.constructor = Monkey; Monkey.prototype.sing = function(){ alert('Sing like OM'); } var vishal = new Monkey(); vishal.walk(); vishal.sing();
    • This is Inheritance ! Can be checked by. console.log(vishal instanceof Animal) // true console.log(vishal instanceof Monkey) // true In modern browser this can be achieved by: Monkey.prototype = Object.create (Animal.prototype);
    • Closures. The pattern of public, private, and privileged members is possible because JavaScript has closures.
    • function Container(param) { function dec() { //uses secret } //privileged this.member = param;//public var secret = 3;//private var that = this; this.service = function () { return dec() ? that.member : null; };//public }
    • Enough OOPS! Hoisting ● Function level scoping not block level like C++, Java, C# ● Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter. eg.
    • Memory Leaks ● garbage collection ● mark and sweep algorithm ● reason for memory leaks ● IE - Ohh yeah :P ● Possible scenarios
    • "Best Practices" Good to follow!
    • Coding == Story Telling?? language agnostic
    • "A good story is one which is easy to convey and takes less time to convey" Developers need to convey code to Browsers and other clients.
    • HTML5 - A bubble? Why Facebook shifted back to native application as compared to html5 ?
    • Reference ● WebPlatform.org ● Mozilla Developer Network ● Opera developer Avoid w3schools if possible!
    • Next session ● Performance ● Optimization ● Algorithms
    • - Thanks @aquarius_vishal http://www.vvishal.com