Developing web applications in 2010

Developing web applications in 2010

Ignacio Coloma - icoloma@extrema-sistemas.com
http://extrema-sistemas.com

What?
Enumerate changes and best practices
in the last ten years of web development

Why?
Because your application
will be judged solely
by its presentation layer.

http://en.wikipedia.org/wiki/Moore's_law

Average PC 98/99
500 mHz PII / K6
64 MB RAM
10 GB HDD

10 GB ?
iPod nano: 8-16 GB
iPod classic: 160 GB

http://store.apple.com

500 MHz + 64MB RAM?
iPhone 3GS: 600 MHz + 256 MB RAM

HTML 4.0-4.1
Developed between Apr 98 – Dec 99

Select multi
<select name="toppings" multiple="multiple" size="5">
<option value="mushrooms">mushrooms</option>
<option value="greenpeppers">green peppers</option>
<option value="onions">onions</option>
<option value="tomatoes">tomatoes</option>
<option value="olives">olives</option>
</select>

Checkboxes
<label><input type="checkbox" name="mushrooms"> mushrooms</label>
<label><input type="checkbox" name="greenpeppers"> green peppers</label>
<label><input type="checkbox" name="onions"> onions</label>
<label><input type="checkbox" name="tomatoes"> tomatoes</label>
<label><input type="checkbox" name="olives"> olives</label>

Javascript
Javascript in the browser is a reality

SEO
Google can index HTML, but
it will not execute your javascript code

Browser history
Users are familiar with the “back” button.

Security

http://www.cenzic.com/downloads/Cenzic_AppSecTrends_Q3-Q4-2009.pdf

Accessibility
WAI-ARIA: Accessible Rich Internet Applications Suite

http://www.w3.org/WAI/intro/aria

Size of the accessible market?
45 million blind people worldwide
314 million people with significant vision loss
87% in developing countries

http://www.who.int/mediacentre/factsheets/fs282/en/

5 Million blind people
As much as the total population of Madrid

40 million vision loss
31th country in the world
(bigger than Argentina, Canada,
Greece or Australia)

http://en.wikipedia.org/wiki/List_of_countries_by_population

How many of you
are planning to get old?

Spanish pop. > 65 compared to 15-64

http://www.oecd.org/dataoecd/17/18/35379092.pdf

Javascript libraries
Prototype, JQuery, Mootools, YUI, Ext

Progressive enhancement
Design HTML only
Add javascript later

Old
<input onchange=”foo()”>

New
<input id=”price”>
<script>
$('price').on('change', foo);
</script>

Browser Server

Javascript transforms into this: Server produces this:

<html>
<head>
<link type=”text/css”>
<script type=”text/javascript”>
</head>
Old
<body>
<div>My contents</div>
</body>

</html>

<html>
<head>
<link type=”text/css”>
</head>

New <body>
<div>My contents</div>
<script type=”text/javascript”>
</body>

</html>

Performance
.1 to 1 sec: no feedback necessary
1 to 10 sec: add some feedback (spinners)
> 10 sec: the user is no longer here

http://www.useit.com/papers/responsetime.html

Impact on revenue
Google: +500 ms → -20% traffic
Yahoo: +400 ms → -5-9% full-page traffic
Amazon: +100 ms → -1% sales
Firefox: +2 seg → -15% downloads

Evaluation performed on the front page.
http://stevesouders.com/docs/wordcamp-20090530.ppt
http://blog.mozilla.com/metrics/2010/04/05/firefox-page-load-speed-–-part-ii/

Still not convinced?
Starting 2010, Google has added performance
to the PageRank algorithm

http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

Improve performance
By following 14 rules

http://stevesouders.com/hpws/rules.php

Measure, don't guess
What's faster, Facebook or LinkedIn?

Measure, don't guess

http://webpagetest.org

Other tools
Google PageSpeed
YSlow!
Firebug net tab

Best thing for performance
Aim for simplicity

http://stuffthathappens.com/blog/2008/03/05/simplicity/

CSS
We will talk about that, too

Photo: http://www.flickr.com/photos/cassidy/46518700/

CSS 3
Still a working draft
-moz-*
-webkit-*
-o-*

New pseudo-classes
:first-child (all but IE6)
:last-child (all but IE)
:nth-child(odd|even) (all but IE)

...maybe you see a pattern here...
http://www.quirksmode.org/css/contents.html

New attribute selectors
[att=value] (all but IE6)

Rounded borders
.mystyle {
border: 2px solid #888;
-mox-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
}

box-shadow
.mystyle {
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}

Lots of new selectors
border-image, CSS transitions, text-shadow,
@font-face, CSS transforms...

http://a.deveria.com/caniuse/#agents=All&eras=All&cats=CSS3&statuses=All
Photo: http://www.flickr.com/photos/dailypic/2168453083/

Chrome

http://ajaxian.com/archives/getting-users-to-upgrade-their-browsers

Internet Explorer


Firefox


Safari


Trends

http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1#

Pay attention to your audience

Stats for jquery.com
(29/3/2009)

http://royal.pingdom.com/2010/04/16/does-internet-explorer-have-more-than-a-billion-users/
http://ejohn.org/blog/determining-browser-market-share/

IE6 on the way out
37signals, youtube, google apps, apple

IE-specific stylesheets




http://www.quirksmode.org/css/condcom.html

IE-specific selectors
/* IE 6 and below */
* html #uno { color: red }
#once { _color:blue }
/* IE 7 and below */
*:first-child+html #dos { color: red }
#doce { *color: blue } /* or #color:blue */
/* IE 7 and above */
html >body #tres { color: red }
/* IE 8 and above */
html >/**/body #cuatro { color: red }

http://ajaxian.com/archives/css-browser-hacks

IE7.js
by Dean Edwards
ie7.js, ie8.js, ie9.js

http://code.google.com/p/ie7-js/

HTML5
<canvas>
<svg>
<video>, <audio>
GeoLocation API
Offline applications
Client-side storage
Web workers
...etc...

Flash
Poor SEO
Not open
Not supported on iPad
Open alternatives (HTML5, CSS3, SVG, Canvas)

Things are changing
Youtube supports <video>
Google Maps 3 uses Geolocation API
Google Gears stalled waiting for HTML 5

http://www.flickr.com/photos/cooldesignz/1794226846/

Thanks!

Ignacio Coloma - icoloma@extrema-sistemas.com
http://extrema-sistemas.com
http://icoloma.blogspot.com

Developing web applications in 2010

More Related Content

What's hot

Similar to Developing web applications in 2010

More from Ignacio Coloma

Recently uploaded

Developing web applications in 2010