SlideShare una empresa de Scribd logo
1 de 29
Descargar para leer sin conexión
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

Más contenido relacionado

La actualidad más candente

Lets talk-about-js
Lets talk-about-jsLets talk-about-js
Lets talk-about-js
srnftw
 
Découplez votre appli en micro-APIs
Découplez votre appli en micro-APIsDécouplez votre appli en micro-APIs
Découplez votre appli en micro-APIs
Nicolas Blanco
 

La actualidad más candente (17)

Lets talk-about-js
Lets talk-about-jsLets talk-about-js
Lets talk-about-js
 
Java scriptforjavadev part1
Java scriptforjavadev part1Java scriptforjavadev part1
Java scriptforjavadev part1
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
 
Javascript basics for automation testing
Javascript  basics for automation testingJavascript  basics for automation testing
Javascript basics for automation testing
 
The Transparent Web: Bridging the Chasm in Web Development
The Transparent Web: Bridging the Chasm in Web DevelopmentThe Transparent Web: Bridging the Chasm in Web Development
The Transparent Web: Bridging the Chasm in Web Development
 
All About Sammy
All About SammyAll About Sammy
All About Sammy
 
CoffeeScript - An Introduction
CoffeeScript - An IntroductionCoffeeScript - An Introduction
CoffeeScript - An Introduction
 
Ruby on Rails - UNISO
Ruby on Rails - UNISORuby on Rails - UNISO
Ruby on Rails - UNISO
 
Underscore.js
Underscore.jsUnderscore.js
Underscore.js
 
Clean Code: Stop wasting my time
Clean Code: Stop wasting my timeClean Code: Stop wasting my time
Clean Code: Stop wasting my time
 
Groovy / comparison with java
Groovy / comparison with javaGroovy / comparison with java
Groovy / comparison with java
 
Elixir Study Group Kickoff Meetup
Elixir Study Group Kickoff MeetupElixir Study Group Kickoff Meetup
Elixir Study Group Kickoff Meetup
 
Developing cross platform desktop application with Ruby
Developing cross platform desktop application with RubyDeveloping cross platform desktop application with Ruby
Developing cross platform desktop application with Ruby
 
Object Oriented Javascript
Object Oriented JavascriptObject Oriented Javascript
Object Oriented Javascript
 
Webpack & EcmaScript 6 (Webelement #32)
Webpack & EcmaScript 6 (Webelement #32)Webpack & EcmaScript 6 (Webelement #32)
Webpack & EcmaScript 6 (Webelement #32)
 
Testing JavaScript with Jasmine in Rails Applications
Testing JavaScript with Jasmine in Rails Applications Testing JavaScript with Jasmine in Rails Applications
Testing JavaScript with Jasmine in Rails Applications
 
Découplez votre appli en micro-APIs
Découplez votre appli en micro-APIsDécouplez votre appli en micro-APIs
Découplez votre appli en micro-APIs
 

Similar a Web application

Javascript Ks
Javascript KsJavascript Ks
Javascript Ks
ssetem
 
JavaScript (without DOM)
JavaScript (without DOM)JavaScript (without DOM)
JavaScript (without DOM)
Piyush Katariya
 
Java script object model
Java script object modelJava script object model
Java script object model
James Hsieh
 

Similar a Web application (20)

"Javascript" por Tiago Rodrigues
"Javascript" por Tiago Rodrigues"Javascript" por Tiago Rodrigues
"Javascript" por Tiago Rodrigues
 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
 
Awesomeness of JavaScript…almost
Awesomeness of JavaScript…almostAwesomeness of JavaScript…almost
Awesomeness of JavaScript…almost
 
Javascript Ks
Javascript KsJavascript Ks
Javascript Ks
 
Javascript quiz. Questions to ask when recruiting developers.
Javascript quiz. Questions to ask when recruiting developers.Javascript quiz. Questions to ask when recruiting developers.
Javascript quiz. Questions to ask when recruiting developers.
 
JavsScript OOP
JavsScript OOPJavsScript OOP
JavsScript OOP
 
JavaScript (without DOM)
JavaScript (without DOM)JavaScript (without DOM)
JavaScript (without DOM)
 
JavaScript ES6
JavaScript ES6JavaScript ES6
JavaScript ES6
 
Javascript tid-bits
Javascript tid-bitsJavascript tid-bits
Javascript tid-bits
 
JavaScript Abstraction
JavaScript AbstractionJavaScript Abstraction
JavaScript Abstraction
 
Let's JavaScript
Let's JavaScriptLet's JavaScript
Let's JavaScript
 
JS Essence
JS EssenceJS Essence
JS Essence
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
 
Lecture 5: Client Side Programming 1
Lecture 5: Client Side Programming 1Lecture 5: Client Side Programming 1
Lecture 5: Client Side Programming 1
 
Testable JavaScript: Application Architecture
Testable JavaScript:  Application ArchitectureTestable JavaScript:  Application Architecture
Testable JavaScript: Application Architecture
 
JavaScript Misunderstood
JavaScript MisunderstoodJavaScript Misunderstood
JavaScript Misunderstood
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
JavaScript Basics
JavaScript BasicsJavaScript Basics
JavaScript Basics
 
JavaScript For CSharp Developer
JavaScript For CSharp DeveloperJavaScript For CSharp Developer
JavaScript For CSharp Developer
 
Java script object model
Java script object modelJava script object model
Java script object model
 

Último

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 

Web application

  • 2. Ingredients of a Web Application ● ● ● ● ● Front End Back End APIs Devices to support Accessibility**
  • 3. Focus on Front End Why? Where ? What? How?
  • 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. HTML - Structure CSS - Design Javascript - Behaviour
  • 6. How to build a web application ● ● ● ● Viewports to support Devices to support HTML>CSS>JAVASCRIPT Way to communicate and get data
  • 7. HTML Basic ● ● ● ● Significance of doctype <html>, <head>,<body> inline/block/table layouts
  • 8. CSS Basic ● Selectors ● Box-Model ● Rendering
  • 9. Javascript Basic ● ● ● ● ● ● Window, document Events - important for behaviour AJAX - Asynchronous ** <noscript> Security Debugging - Ahh
  • 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. "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. 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. 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. 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. 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. function Animal() {....} Animal.prototype.walk = function(){ alert ('I am walking Gangnam style!'); }; function Monkey() { // Call the parent constructor Animal.call*(this*); }
  • 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. 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. Closures. The pattern of public, private, and privileged members is possible because JavaScript has closures.
  • 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. 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. Memory Leaks ● garbage collection ● mark and sweep algorithm ● reason for memory leaks ● IE - Ohh yeah :P ● Possible scenarios
  • 24. Coding == Story Telling?? language agnostic
  • 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. HTML5 - A bubble? Why Facebook shifted back to native application as compared to html5 ?
  • 27. Reference ● WebPlatform.org ● Mozilla Developer Network ● Opera developer Avoid w3schools if possible!
  • 28. Next session ● Performance ● Optimization ● Algorithms