Web application

299 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
299
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web application

  1. 1. Web Application HTML, CSS, JS
  2. 2. Ingredients of a Web Application ● ● ● ● ● Front End Back End APIs Devices to support Accessibility**
  3. 3. Focus on Front End Why? Where ? What? How?
  4. 4. Why ? - Naive User Where ? - Internet [From Anywhere] What? - Pictures are better way to express communication than letters or journals How? - HTML/CSS/JS
  5. 5. HTML - Structure CSS - Design Javascript - Behaviour
  6. 6. How to build a web application ● ● ● ● Viewports to support Devices to support HTML>CSS>JAVASCRIPT Way to communicate and get data
  7. 7. HTML Basic ● ● ● ● Significance of doctype <html>, <head>,<body> inline/block/table layouts
  8. 8. CSS Basic ● Selectors ● Box-Model ● Rendering
  9. 9. Javascript Basic ● ● ● ● ● ● Window, document Events - important for behaviour AJAX - Asynchronous ** <noscript> Security Debugging - Ahh
  10. 10. ● 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
  11. 11. "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."
  12. 12. 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
  13. 13. 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."
  14. 14. 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
  15. 15. 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"
  16. 16. function Animal() {....} Animal.prototype.walk = function(){ alert ('I am walking Gangnam style!'); }; function Monkey() { // Call the parent constructor Animal.call*(this*); }
  17. 17. / 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();
  18. 18. 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);
  19. 19. Closures. The pattern of public, private, and privileged members is possible because JavaScript has closures.
  20. 20. 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 }
  21. 21. 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.
  22. 22. Memory Leaks ● garbage collection ● mark and sweep algorithm ● reason for memory leaks ● IE - Ohh yeah :P ● Possible scenarios
  23. 23. "Best Practices" Good to follow!
  24. 24. Coding == Story Telling?? language agnostic
  25. 25. "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.
  26. 26. HTML5 - A bubble? Why Facebook shifted back to native application as compared to html5 ?
  27. 27. Reference ● WebPlatform.org ● Mozilla Developer Network ● Opera developer Avoid w3schools if possible!
  28. 28. Next session ● Performance ● Optimization ● Algorithms
  29. 29. - Thanks @aquarius_vishal http://www.vvishal.com

×