Front end for back end developers

Warsaw, 6 December, 2010

Front end for back end developers

Wojciech Bednarski
http://linkedin.com/in/bednarski
http://twitter.com/wbednarski

1

• WorldWideWeb browser 1991

• Created by Tim Berners-Lee

• Ran on NeXSTEP OS

• Renamed to Nexus

3

• Mosaic 1993

• Netscape 1994

• Internet Explorer 1995

• Opera 1996

• Mozilla 1998

4

• The end of the First Browsers War, IE domination 2002

5

• Apple Safari 2003

• Firefox 2004

• Internet Explorer 7 2006

• Google Chrome 2008

• Internet Explorer 8 2009

6

http://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg
7

Web Browsers

• Google Chrome

• Mozilla Firefox

• Safari

• Opera

• Internet Explorer

8

Mobile Browsers

• Safari

• Android Browser

• BlackBerry Browser

• Opera Mobile

9

Browsers engines

• Trident is developed by Microsoft (Windows)

• Tasman was developed by Microsoft (Macintosh)

• Gecko is developed by the Mozilla Foundation

• KHTML is developed by the KDE project

• WebKit is a fork of KHTML by Apple Inc.

10

Internet Explorer:Mac

11

IE:Mac - The Innovation
• Support for annotative glosses to • An option to change the browser color,
Japanese kanji and Chinese characters to match the colors of the iMac G3. The
ﬁrst builds had a choice of 9 colors, but
• Scrapbook feature lets the user archive later builds had 15.
any page in its current state.
• Print Preview functionality allowing for
• Auction Manager feature automatically adjustment of the font-size from within
the preview pane.
tracks eBay auctions.

• Robust PNG support (version 5.0) • Page Holder sidebar functionality
allowing users to hold a page in the
sidebar

13

Behind the scene

14

Browsers architecture

15

• The user interface - this includes the • Networking - used for network calls, like
address bar, back/forward button, HTTP requests. It has platform
bookmarking menu etc. Every part of independent interface and underneath
the browser display except the main implementations for each platform.
window where you see the requested
page. • UI backend - used for drawing basic
widgets like combo boxes and windows.
• The browser engine - the interface for
querying and manipulating the rendering
engine.
• JavaScript interpreter. Used to parse and
execute the JavaScript code.

• The rendering engine - responsible for • Data storage. This is a persistence layer.
displaying the requested content. For The browser needs to save all sorts of
example if the requested content is data on the hard disk, for examples,
HTML, it is responsible for parsing the cookies, HTML5 web database.
HTML and CSS and displaying the
parsed content on the screen.

16

Parsing HTML
• Document Object Model is the object
<html>
<body>
<p>
presentation of the HTML document Hello World
</p>
and the interface of HTML elements to <div> <img src="example.png" alt="" /></div>
</body>
the outside world </html>

17

CSS parsing
• http://www.w3.org/TR/CSS2/
grammar.html

18

JavaScript parsing

• The model of the web is synchronous. Authors expect scripts to be
parsed and executed immediately when the parser reaches a <script>
tag. The parsing of the document halts until the script was executed. If
the script is external then the resource must be first fetched from the
network - this is also done synchronously, the parsing halts until the
resource is fetched. This was the model for many years and is also
specified in HTML 4 and 5 specifications.

• http://www.whatbrowser.org/en/more/

19

Browsers error tolerance

• You never get an "Invalid Syntax" error on an page served as text/
html. Browsers ﬁx an invalid content and go on.

20

• HTML 2.0 1995

• HTML 3.2 1997

• HTML 4.0 1997

• HTML 4.01 1999

22

• XHTML 1.0 2000

• XHTML 1.1 2001

• XHTML 2

23

• HTML 5

• WHATWG 2004

• W3C 2007

24

HTML 5
Simple solutions are preferred to complex ones, when possible.

25

• HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//
EN" "http://www.w3.org/TR/html4/strict.dtd">

• XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• HTML 5 <!DOCTYPE html>

26

• HTML 4.01 <meta http-equiv="Content-Type" content="text/html;
charset=utf-8">

• XHTML 1.0 <?xml version="1.0" encoding="UTF-8"?> <meta http-
equiv="Content-Type" content="text/html; charset=utf-8" />

• HTML 5 <meta charset="utf-8">

27

• XHTML 1.0 and previous <link rel="stylesheet" type="text/css"
href="ﬁle.css"> <script type="text/javascript"></script>

• HTML 5 <link rel="stylesheet" href="ﬁle.css"> <script></script>

28

• <header> • <menu>

• <nav> • <canvas>

• <section> • <audio>

• <article> • <video>

• <aside>

• <footer>

• <details>

• <summary>

• <command>

29

• input type="number" • input type="tel"

• input type="search"

• input type="range"

• input type="email"

• input type="date"

• input type="url"

• input type="number"

• input type="search"

• input type="color"

30

• role=”button”

• role=”navigation”

• role=”progressbar”

• role=”button”

• role=”link”

• role-”cell”

31

A basic HTML5 document

<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>

</body>
</html>

32

DOM tree
DOCTYPE: html
html
head
#text: ␣␣
title
#text: Sample page
#text: ␣
#text: ␣
body
#text: ␣␣
h1
#text: Sample page
#text: ␣␣
p
#text: This is a
a href="demo.html"
#text: simple
#text: sample.
#text: ␣␣
#comment: this is a comment
#text: ␣

33

Demo!

• http://slides.html5rocks.com/#slide24

34

Future read

• http://diveintohtml5.org/

• http://www.whatwg.org/specs/web-apps/current-work/

35

Selector

• p { color: red }

37

Declaration block


38

Declaration


39

Property


40

Value


41

Inheritance

• <p>Because <strong>strong element</strong> inherited the color
property from the p element, it is displayed in red color.</p>

42

Not all properties are inherited

43

Demo!

• http://slides.html5rocks.com/#slide39

44

JavaScript

• JavaScript is an implementation of the ECMAScript language standard
and is typically used to enable programmatic access to computational
objects within a host environment. It can be characterized as a
prototype-based object-oriented scripting language that is dynamic,
weakly typed and has ﬁrst-class functions. It is also considered a
functional programming language like Scheme and OCaml because it
has closures and supports higher-order functions.

48

Doug Crockford

• "JavaScript doesn't suck.You're just doing it wrong."

49

Detailed Results Average (ms)
IE8 3746
Firefox 3.6.12 753
Safari 5.0.2 328
irefox 4.0 Pre-Release 277
Beta7
Chrome 7.0 262
Opera 10.63 246
Opera 11 Alpha 242
Chrome 8.0 Beta 233
IE9 Platform Preview #7 216

51

// Variable declaration
var firstName = "Roche";

// Function declaration
function saying () {
return "Hello Roche!";
}

52

var expr,
fruit;
switch (expr) {
case "Oranges": fruit = "Orange";
break;

case "Apples": fruit = "Orange";
break;
}

53

/ Object literal
var apple = {
firstName : "Apple"
};

// Array literal
var fruits = ["Apple", "Orange"];

54

// Shorthand assignment
function (fruit) {
var life = fruit || "Apple";
}

// Ternary operators
(fruit) ? "Apple" : "Window";

55

// Short-circuit logic
if (obj && obj.property) {
obj.property = "Fiery Red";
}

56

• string

• number

• boolean

• null

• undeﬁned

• object

57

// Variable declaration
var firstName = "Apple";

// Function declaration
function saying () {
return "Hello Apple!";
}

typeof firstName // string
typeof saying // function

58

// Object declaration
var apple = {
firstName : "Apple"
};

// Array declaration

typeof apple // object
typeof fruits // object

59

var apple = {
firstName : "Apple"
};

// Array declaration

apple instanceof Array // false
fruits instanceof Array // true

60

// Various "false" values
var nullVal = null;
var undefinedVal = undefined;
var zeroVal = 0;
var falseVal = false;
var emptyString = "";

// All would equal false in an if-
clause
if (emptyString) {
// Would never go in here
}

61

// Equality
if (7 == "7") {
// true
}

// Identity
if (7 === "7") {
// false
}

62

// Type coercion
var sum = "5" + 6 + 7; // 567

63

// Prevent type coercion
var sum = parseInt("5", 10) + 6 + 7; // 18

64

// Using the arguments collection
function fruits () {
var allFruits = [];
for (var i=0, il=arguments.length; i<il; i++) {
allFruits.push(arguments[i]); return allFruits.join(" & ");
}
}

// Apple and Orange
fruits("Apple", "Orange");

// Apple
friends("Apple");

65

function Fruit () {
this.name = "Apple";
this.color = "Green";
}

var fruit = new Fruit();

66

// Object declaration, literal style
var fruit = {
name : "Apple",
color : "green"
};

67

// Iterating over properties
for (var item in fruit) {
console.log(item + ": " + fruit[item]);
}

68

var fruit = {
name : "Apple"
};

// Safe check for property
if ("name" in fruit) {
console.log(fruit.name);
}

69

function Apple {
this.color = "Green";
};

// Method set via prototype
Apple.prototype.green = function
() {
return true;
};

70

// Scope - global or local

// Global
var quote = "Stay Hungry. Stay Foolish."

function () {
// Local
var green = "Apple";

// Global
wojtek = "Fiery Red";
}

71

Firebug
• Inspect and edit HTML • Execute JavaScript on the ﬂy

• Edit CSS • Logging for JavaScript

• Visualize CSS metrics

• Monitor network activity

• Debug and proﬁle JavaScript

• Show errors

• Explore the DOM

74

YSlow
• Make fewer HTTP requests • Put JavaScript at bottom

• Use a Content Delivery Network • Avoid CSS expressions
(CDN)
• Make JavaScript and CSS external
• Avoid empty src or href
• Reduce DNS lookups
• Add Expires headers
• Minify JavaScript and CSS
• Compress components with gzip
• Avoid URL redirects
• Put CSS at top
• Remove duplicate JavaScript and CSS

76

YSlow
• Conﬁgure entity tags (ETags) • Avoid AlphaImageLoader ﬁlter

• Make AJAX cacheable • Do not scale images in HTML

• Use GET for AJAX requests • Make favicon small and cacheable

• Reduce the number of DOM elements

• Avoid HTTP 404 (Not Found) error

• Reduce cookie size

• Use cookie-free domains

77

Page Speed by Google

78

Page Speed
• Optimizing caching — keeping your application's data and logic off the
network altogether

• Minimizing round-trip times — reducing the number of serial request-
response cycles

• Minimizing request overhead — reducing upload size

• Minimizing payload size — reducing the size of responses, downloads,
and cached pages

• Optimizing browser rendering — improving the browser's layout of a
page
79

Web Developer
• The Web Developer extension adds various web developer tools to a
browser. The extension is available for Firefox and Chrome, and will
run on any platform that these browsers support including Windows,
Mac OS X and Linux.

81

Validators

• http://validator.w3.org/

• http://jigsaw.w3.org/css-validator/

• http://www.jslint.com/

82

Performance

• Psychology - effect of waiting - make people happy

• Optimization

84

Minimize HTTP Requests

• 80% of the end-user response time is spent on the front-end. Most of
this time is tied up in downloading all the components in the page:
images, stylesheets, scripts, Flash, etc. Reducing the number of
components in turn reduces the number of HTTP requests required
to render the page. This is the key to faster pages.

85

Use a Content Delivery Network

• Deploying your content across multiple, geographically dispersed
servers will make your pages load faster from the user's perspective.

86

Add an Expires or a Cache-
Control Header

• For static components: implement "Never expire" policy by setting far
future Expires header

• For dynamic components: use an appropriate Cache-Control header
to help the browser with conditional requests

87

Gzip Components

• The time it takes to transfer an HTTP request and response across
the network can be signiﬁcantly reduced by decisions made by front-
end engineers.

88

Put StyleSheets at the Top

• Putting stylesheets in the HEAD allows the page to render
progressively.

89

Put JavaScript at the Bottom

• The problem caused by scripts is that they block parallel downloads.
The HTTP/1.1 speciﬁcation suggests that browsers download no
more than two components in parallel per hostname.

90

Avoid CSS Expressions

• CSS expressions are a powerful (and dangerous) way to set CSS
properties dynamically.

91

Make JavaScript and CSS External

• Using external ﬁles in the real world generally produces faster pages
because the JavaScript and CSS ﬁles are cached by the browser.
JavaScript and CSS that are inlined in HTML documents get
downloaded every time the HTML document is requested.

92

Reduce DNS Lookups

• DNS has a cost. It typically takes 20-120 milliseconds for DNS to
lookup the IP address for a given hostname.

93

Avoid Redirects

• It hurts performance to include the same JavaScript ﬁle twice in one
page.

94

Configure ETags

• An ETag is a string that uniquely identifies a specific version of a
component.

HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195

95

Make AJAX Cacheable

• When users request a page, it can take anywhere from 200 to 500ms
for the backend server to stitch together the HTML page. During this
time, the browser is idle as it waits for the data to arrive. In PHP you
have the function ﬂush(). It allows you to send your partially ready
HTML response to the browser so that the browser can start fetching
components while your backend is busy with the rest of the HTML
page.

96

Use GET for AJAX Requests

• POST is implemented in the browsers as a two-step process: sending
the headers ﬁrst, then sending data. So it's best to use GET, which only
takes one TCP packet to send (unless you have a lot of cookies). The
maximum URL length in IE is 2K.

97

Reduce the Number of DOM
Elements

98

Reduce Cookie Size

100

Use Cookie-Free Domains for
Components

101

Do Not Scale Images in HTML

103

Make favicon.ico Small and
Cacheable

104

Web standards checklist

• http://www.maxdesign.com.au/articles/checklist/

106

Workshop -> Now!

107

References
• HTML5: http://www.whatwg.org/specs/
web-apps/current-work/

• CSS3: http://www.css3.info/modules/

• JavaScript: https://developer.mozilla.org/
en/JavaScript/Reference

108

Resources
• http://taligarsiel.com/Projects/
howbrowserswork1.htm

• http://www.w3.org/TR/CSS2/
grammar.html

• http://fronteers.nl/congres/2010/
sessions/javascript-like-a-box-of-
chocolates-robert-nyman

• http://developer.yahoo.com/yslow/help/

• http://www.wikipedia.org/

109

Front end for back end developers

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Front end for back end developers (20)

Recently uploaded (20)

Front end for back end developers