web application
TRANSCRIPT
Web ApplicationHTML, CSS, JS
Ingredients of a Web Application
● Front End● Back End● APIs● Devices to support● Accessibility**
Focus on Front EndWhy? Where ? What? How?
Why ? - Naive User Where ? - Internet [From Anywhere]What? - Pictures are better way to express communication than letters or journalsHow? - HTML/CSS/JS
HTML - StructureCSS - 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 instance-based 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) //trueconsole.log(redbus.__proto__ == =Function.prototype) // true
var rb = new redbus;console.log(rb__proto__ ===redbus.prototype)// trueconsole.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) // trueconsole.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