Web application

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.

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

Web application

More Related Content

What's hot (17)

Similar to Web application (20)

Recently uploaded (20)

Web application