Web application
3 likes1,022 views
The document provides an overview of building a web application, covering key topics like front end and back end components, HTML, CSS, JavaScript, APIs, and supporting different devices and accessibility. It discusses the importance of the front end and focuses on building skills in HTML for structure, CSS for design, and JavaScript for behavior and interactivity. Basic concepts in each are explained, like document structure, box model, selectors in CSS, and objects, functions, and events in JavaScript. Prototype-based inheritance in JavaScript is covered, along with closures, hoisting, and memory leaks. Best practices and references for further learning are provided.
![Why ? - Naive User
Where ? - Internet [From Anywhere]
What? - Pictures are better way to express
communication than letters or journals
How? - HTML/CSS/JS](https://image.slidesharecdn.com/webapplication-130625142220-phpapp01/85/Web-application-4-320.jpg)
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 instance- based 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
- 23. "Best Practices" Good to follow!
- 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!
- 29. Next session ● Performance ● Optimization ● Algorithms