Modern Web Technologies — Jerusalem Web Professionals, January 2011

Modern Web
Technologies (and why
you should care)
Reuven M. Lerner • reuven@lerner.co.il
Jerusalem Web Professionals
January 18th, 2011

Who am I?
• Web developer since 1993
• Software architect, lecturer, consultant,
technical advisor
• Linux Journal columnist since 1996
• Mostly Ruby on Rails + PostgreSQL, but
also Python, jQuery, MySQL, and lots
more...

How does the Internet
(TCP/IP) work?

“Socket”
Client Server
Port Port

(TCP/IP) work?

“Socket”
Client Server
Port Port
Client opens
connection

(TCP/IP) work?

“Socket”
Client Server
Port Port
Client opens Server accepts
connection connection

Protocols

• Communication standards built on top of
TCP/IP, typically text-based
• SMTP (e-mail)
• FTP (ﬁle transfer)
• NNTP (transfer of “news” articles)

WWW:
Three technologies
• Markup format:
HTML
• URL: protocol +
server + port + doc
• Protocol: HTTP

How the Web works

Browser Server

How the Web works
HTTP Request

Browser Server

How the Web works
HTTP Request

Browser Server

HTTP Response

How the Web works
HTTP Request

Browser Server

HTTP Response

Stateless — after the response is sent,
the connection is broken and forgotten

Simple request

Browser Server

Simple request
GET /

Browser Server

Simple request
GET /

Browser Server

200 OK
<html>
<head>...</head>
<body>...</body>
</html>

Not found?

Browser Server

Not found?
GET /blahblah

Browser Server

Not found?
GET /blahblah

Browser Server

404 Not found

Three things are certain:
Death, taxes, and lost data.
Guess which has occurred.

— David Dixon, Salon magazine contest

Submitting forms

Browser Server

Submitting forms
POST /login
name=reuven&password=secret

Browser Server

Submitting forms
POST /login

Browser Server

200 OK
<html>...
<p>Thank you!</p>
...</html>

Document = request

• If an HTML page contains images, then each
is retrieved in a separate HTTP request
• Page with 30 images = 31 HTTP requests
• Page with 20 images, 10 JavaScript ﬁles,
and 5 CSS ﬁles = 36 HTTP requests

Idea: Lie to the browser

• Don’t return a document to the user
• Rather, run a program when the user makes
a request, and send the program’s output
• If the output is in HTML, then the browser
will show it no differently than a static doc

Just in time production
• Wait as long as
possible to create
pages for the user
• Ideally, create them
when the user
requests them
• “Mass customization”

Dynamic document

Browser Server

Dynamic document
GET /

Browser Server

Dynamic document
GET /

Browser Server

200 OK
<html>
<head>...</head>
<body>...</body>
</html>

Dynamic document
GET /

Browser Server

200 OK
<html>
<head>...</head>
Program output
<body>...</body>
</html>

What we return
• Usually HTML
• Image (e.g., stock graphs, Google Analytics)
• Word/Excel doc (e.g., from Google docs)
• PDF (e.g., PDF reports)
• XML, JSON (for computers, not people)
• Basically, any deﬁned MIME type

APIs and mobile apps

Computer A Computer B
(browser) (server)

GET /

(browser) (server)

GET /

(browser) (server)

200 OK
<some-xml>
<talk>JWP</talk>
</some-xml>

GET /

Computer B
(server)

200 OK
<some-xml>
<talk>JWP</talk>
</some-xml>

What is a Web app?

• Receives its inputs via HTTP
• Sends its output via HTTP
• That’s it! A Web application can do
anything you want, within these limits

That’s it!

• Now you understand how the Web works.
• Really, that’s it.
• Go home.

OK, perhaps not...

• How do we write these programs?
• Where (and how) do we store user data?
• How have the underlying technologies
(URLs, HTTP, and HTML) advanced?

Early Web applications

• First server-side programs were in C
• They were compiled into binaries
• So you had the CGI source (cgi-src)
directory...
• ... and the CGI binary (cgi-bin) directory

“Scripting” languages
• No explicit compilation
• Cross platform
• Built-in, powerful text functions
• Do a lot in a little bit of code
• Perl, Python, PHP, Ruby
• Typically open source

Frameworks

• DRY (Don’t repeat yourself)
• Get rid of the drudgery
• Concentrate on your business, rather than
worrying about common Web issues

MVC paradigm
• Most modern frameworks use MVC
• From Smalltalk in the 1980s!
• Model — communicates with database
• View — HTML/JavaScript/CSS for user
• Controller — handles requests
• Clear division of labor

Web frameworks in
dynamic languages
• Programmer speed trumps execution
speed
• Community support
• Plugins for commonly requested features
• Create a domain-speciﬁc language (DSL)
for your speciﬁc needs

Ruby on Rails
• Ruby language
• Rails Web app framework (MVC)
• Designed for writing Web DSLs
• “Convention over conﬁguration”
• Thousands of little improvements
• ActiveRecord — ORM

Person model

class Person < ActiveRecord::Base
end

Where’s the deﬁnition?
• The computer takes care of it automatically
• ActiveRecord knows what columns you
have deﬁned, and what their types are
• (More on columns later)
• Only write things that cannot be
understood automatically

Not only Rails
• Python (Django)
• PHP (Symfony)
• Perl (Catalyst)
• Groovy (Grails)
• Even if you don’t use Ruby on Rails, you
have beneﬁtted from its “opinions”

Plugins
• Rails (and other systems) have open-source
plugins to handle common issues
• Authentication
• E-commerce
• Social networking
• Don’t write these yourself! Customize
existing code that has proved itself

Storage
• Applications are great!
• But what if we want to store information
about our users?
• Name, e-mail address, account balance
• We could use text ﬁles, but most people
will use a database

What is a database?

Store data
conﬁdently

Database

Retrieve data
ﬂexibly

Relational databases

Deﬁne tables,
store data in them

Database

Retrieve data from
related tables

Relational database

CREATE TABLE
INSERT SQL goes here
Database
UPDATE
DELETE

Relational databases

• Everything is stored in 2-dimensional tables
• Data should appear only once (normalized)
• “Join” tables to connect tables
• Technology is extremely robust, fail-safe
• Not all data is a good ﬁt for this paradigm

id ﬁrst_name last_name phone

1 Reuven Lerner 054-496-8405

2 Charlie Kalech 02-671-9918

id ﬁrst_name last_name email

1 Reuven Lerner reuven@lerner.co.il

2 Charlie Kalech charlie@j-town.com

person_id phone_number
1 054-496-8405
1 847-230-9795
2 02-671-9918
2 054-803-3356

2 501-629-8620




person_id phone_number_type_id phone_number id type
1 2 054-496-8405
1 1 847-230-9795 1 work
2 1 02-671-9918
2 mobile
2 2 054-803-3356

2 3 501-629-8620 3 fax

4 home




person_id phone_number_type_id phone_number id type
1 2 054-496-8405
1 1 847-230-9795 1 work
2 1 02-671-9918
2 mobile
2 2 054-803-3356

2 3 501-629-8620 3 fax

4 home

SELECT P.first_name, P.last_name, P.email,
PN.phone_number, PNT.type
FROM People P, Phone_Numbers PN,
Phone_Number_Types PNT
WHERE PN.person_id = P.id
AND PNT.id = PN.phone_number_type_id

Another language!
• SQL is the language of relational databases
• So a Web app will use a language (e.g.,
Ruby, Python, or PHP) + SQL
• Or use an ORM, which automatically
translates your language into SQL
Person.first.phone_number

Extending our diagram
Browser

HTTP Request
Browser

HTTP Request
Browser Server

HTTP Request
Browser Server

Database

HTTP Request
Browser Server

HTTP Response

Database

Popular databases

• PostgreSQL (my favorite)
• MySQL
• Microsoft SQL Server
• Oracle
• Most popular: SQLite!

Scaling problems
• Lots of requests?
• Optimize

Scaling problems
• Optimize
• Even more requests?
• Buy a bigger server

Scaling problems
• Optimize
• Even more requests?
• Buy a bigger server
• What next?
• Panic! (Or spend lots of money)

Sharding
• Split your data across multiple databases
• This works, but...
• Requires rewriting a lot of code
• Maintenance is a big issue
• Re-sharding as each server gets
overwhelmed can be expensive, time-
consuming

Cloud
• Don’t manage your own server!
• Rent a server by the hour, day, or month
• Lots of requests? Add more servers!
• You can even use a cloud database server
• No more scaling issues — let someone
else handle the headaches

Non-relational
databases
• Don’t store things in tables!
• Don’t pre-deﬁne a schema
• No SQL!
• Indeed, known as “NoSQL” databases
• Only common factor: No SQL, non-
relational

Examples
• Key-value stores
• e.g., Memcached, Redis, Tokyo Cabinet
• Columnar databases
• e.g., Cassandra
• Document databases
• e.g., MongoDB, CouchDB

MapReduce / Hadoop
• Google and Yahoo do it like this:
• Split data across many servers
• Run a function on all of those servers
• Collect the results
• Display to the user!
• (Too slow? Add more servers!)

NoSQL: Good news
• Often easier to administer, conﬁgure
• Scaling to multiple servers is a no-brainer
• No new programming language (SQL)!
• Better ﬁt for certain kinds of data
• Better performance than a relational DB
• Lots of options to choose from!

NoSQL: Bad news
• Speed is in the eye of the beholder
• Is “eventually consistent” good enough?
• Non-normalized data — ugh!
• Reporting can be harder
• Less tested than relational databases
• Can you trust your data to them?

Meanwhile...

• Our browsers are displaying HTML
• HTML had several problems:
• Standardized set of tags
• Making it easy for programs to parse
• Semantic, display content were mixed

HTML standards
• HTML — several versions, several
standards, none universally accepted
• XML — lets us create HTML-like
languages, for computer conversations
• XHTML — HTML for pedantic people
• It was a big mess!

HTML5
• Relaxes much of the formality of XHTML,
while remaining easy for computers to read
• Backward compatible to a large degree
• Adds a number of tags for better semantics
• Best of all: Lots of new JavaScript goodies
• More on this in a moment

HTML5 declaration

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

HTML5 declaration

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

New “email” tag

<input type=”text” name=”email” />
<input type=”email” name=”email” />

New “url” tag

<input type=”text” name=”url” />
<input type=”url” name=”url” />

New “date” tag

<input type=”date” name=”date” />

Color picker!

<input type=”color” name=”color” />

And more
• Validation — built-in validation of form
element inputs, via regular expressions
• No more JavaScript plugins!
• Sliders — more natural numeric inputs
• Canvas — draw any picture you might like,
and detect/change it with software
• Hints in text ﬁelds (e.g., “search”)

My favorite

• Private data in attributes!
• Any attribute starting with “data-” is
considered valid
• A great way to stash information inside of
HTML elements without violating standards

Oh, yeah
• These don’t all work.
• Many of them don’t work on any browser
• Most work on only some browsers.
• What to do? Wait. Or use Modernizr,
which uses JavaScript to detect features.
• If a feature isn’t there, you can fall back

CSS

• Cascading Style Sheets
• Split semantic markup from presentation
• One CSS ﬁle can apply to an entire site
• No more “style” tags in your text!
• Easy to move place things, create effects

Ids are unique

<p id=”important”>Agenda</p>

p#important {
font-size: 13p;
font-weight: bold;
}

Classes can repeat
<p class=”important”>Agenda</p>
<p class=”important”>Lunch</p>

p.important {
font-size: 13p;
font-weight: bold;
}

It gets better
• You can set styles for when the user’s
mouse hovers over or clicks on an element
• In other words: Cheap animation!
• Many uses of JavaScript (e.g., some menus)
can now be done with simple CSS
• You can make beautiful sites with CSS

CSS3: Cool effects

• Rounded corners
• Transparency
• Text shadows and drop shadows
• Gradients

CSS3: Cool selectors
• If you love regular expressions, then these
selectors will be second nature to you:
p[id=”foo”] { background: green}
p[id^=”foo”] { background: green}
p[id$=”foo”] { background: green}
p[id*=”foo”] { background: green}

Equals


Starts with

Ends with

Contains

OK, that’s nice.
• But really, the big news with HTML5
doesn’t have to do with HTML at all.
• Instead, it has to do with JavaScript.
• Remember JavaScript?
• It’s the programming language that we love
to hate. (At least, I used to.)

JavaScript
• Originally “LiveScript,” a language that
executes programs in the browser
• Renamed “JavaScript” when an unrelated
language (“Java”) stole the thunder
• Renamed (ofﬁcially) ECMAScript for
standardization purposes
• No one actually calls it this

HTML5 turns the
browser into a smart,
powerful, networked
application platform.
JavaScript makes it
possible.

Powerful? Huh?

• Didn’t I just say that I love to hate
JavaScript?
• And then I said that it was powerful?
• What gives?

JavaScript is
the new hotness
• Browsers are competing for fastest, best
• Google’s V8
• Mozilla’s TraceMonkey (and JägerMonkey)
• Safari’s Nitro
• IE’s Chakra
• JavaScript is faster, more stable than ever!

Also: frameworks
• Remove the drudgery of JavaScript
• Handle differences between browsers
• Make it easy to perform common tasks
• Lots of plugins available
• For me, it’s the difference between pain and
pleasure when working with JavaScript

JavaScript frameworks

• Dojo
• YUI
• MooTools
• Prototype
• jQuery (more on this in a bit)

Ajax
• One reason for JavaScript libraries: Ajax!
• Make HTTP requests from within the page
• No refresh! Just get results from the
server, and modify the page accordingly
• This has revolutionized our view of Web
pages

Ajax

Browser Server

Ajax
POST /login

Browser Server

Ajax
POST /login

Browser Server

200 OK
<html>...
<p>Thank you!</p>
...</html>

Ajax isn’t everything
• What if I want a chat application, or
something else that stays open?
• What if I want to execute more than one
JavaScript function at a time?
• What if I want to store things locally?
• HTML5 provides all this — and more!

Canvas
• A complete drawing area, in your browser!
• Use JavaScript to:
• Draw arbitrary shapes
• Detect the mouse
• Detect the drawing
• The end of Flash? Maybe...

Geolocation

• Your browser can know where you are!
• It can send this info to the server
• It’s not perfect, but still pretty good
• To avoid privacy issues, users are always
asked if their location should be shared

Inter-page
communication
• Modern Web apps can span multiple pages
• HTML5 makes it easy for two pages (from
the same server) to communicate
• The receiver knows which server sent the
data — so it can ﬁlter incoming messages,
as well as screen them for security

Web sockets
• This is potentially the biggest deal of all
• Ajax allows for server connections. But:
• High overhead
• Stateless
• Web sockets have low overhead, and they
stay open as long as you need!

Using Web sockets
var weatherSocket = new
WebSocket("ws://localhost:8080");

Using Web sockets
weatherSocket.onopen = function(e)
{ alert("Opened weather socket");};

Using Web sockets
weatherSocket.onmessage =
function(e) { alert("Got message: "
+ e.data);};

Using Web sockets
weatherSocket.onmessage =
function(e) { alert("Got message: "
+ e.data);};
weatherSocket.onclose = function(e)
{ alert("Closing socket..."); };

What can sockets do?
• Chat servers
• Stock feeds
• Teleconferencing
• Who knows?
• Remember, HTTP was only invented after
sockets had been around for 15 years

Web workers
• Execute more than one thing at a time
• In other words:You can run JavaScript
functions in the background
• Process text
• Open Web sockets
• Perform calculations

Local storage
• Now Web apps can store data
• A little database of name-value pairs
var foo = localStorage.getItem("bar");
localStorage.setItem("bar", foo);

Local storage

var foo = localStorage["bar"];

Local storage

var foo = localStorage["bar"];
localStorage["bar"] = foo;

Media

• Standard (well, sort of) ways to play audio
and video
• No more Flash!
• Problem: No one format is supported by all
browsers

jQuery
• jQuery has taken the world by storm
• Super-easy to use
• Extremely fast
• Open source (of course!)
• Easy to write plugins
• Lots of plugins are available

Basic jQuery
• $(CSS_SELECTOR) returns one or more
objects
• Now what?
• Execute something on those objects
• Hang a function on those objects, to
execute when a condition is met

Remember our CSS?

<p id=”important”>Agenda</p>

p#important {
font-size: 13p;
font-weight: bold;
}

Fire on events
$('p#important').click(function() {
alert("You clicked on me!");
});

Fire on events
});

$('p.important').hover(function() {

Fire on events
});

alert("Whew, they’re gone");

Fire on events
});

alert("Whew, they’re gone");
});

Plugins in jQuery
• jQuery’s syntax makes it trivial to do
complex operations
• Between powerful selectors and many
built-in functions, you can manipulate text,
HTML, and styles easily
• But even better — there are plugins that
do lots of things for you

Unobtrusive

• The jQuery is not in the HTML ﬁle
• This is called “unobtrusive JavaScript”
• Good HTML has no CSS, and no JavaScript

$.fn.ubbi = function(options) {
function ubbify(text) {
return text.replace(/([aeiou])/gi, 'ub$1');
}
return this.each(function() {
$(this).bind('mouseover', function() {
var original_text = $(this).html();
$(this).attr({originalText: original_text});
$(this).html(ubbify(original_text));
});
$(this).bind('mouseout', function() {
$(this).html($(this).attr("originalText"));
$(this).attr({originalText: ""});
});
});
};

Now activate it!

$(document).ready(function() {
$(".ubbi").ubbi();
});

jQuery issues
• Lots of plugins — which ones are good?
• Welcome to the world of open source!
• You’re still deﬁning functions
• Yes — and functions as data takes a while
to get used to
• Remember: JavaScript is programming, and
a different sort than most languages

Want a Web app?

• It used to be:
• “What operating system, language, and
database will I use?”

But today, it’s...
• What server language and framework?
JavaScript framework? Hosted or cloud?
• What type of database (relational, NoSQL)?
Which one? Hosted or cloud?
• Do we offer an API? A mobile app? Both?
• Which HTML5 features do we want to
use, and how do we gracefully degrade?

My brain is too small!
• Yes, there’s a lot to learn
• Most of it can wait a little bit
• There are oodles of tutorials
and books that can help you
• Besides a lot of this is still
highly transitional

Whew!

• There’s a lot to the modern Web
• It’s fun and exciting, and continues to move
forward at breakneck speed
• Understanding as many of these parts as
possible will help you make better
decisions, and better applications!

Any questions?

• Call me: 054-496-8405
• E-mail me: reuven@lerner.co.il
• Interrupt me: reuvenlerner (Skype/AIM)

Modern Web Technologies — Jerusalem Web Professionals, January 2011

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (6)

Semelhante a Modern Web Technologies — Jerusalem Web Professionals, January 2011

Semelhante a Modern Web Technologies — Jerusalem Web Professionals, January 2011 (20)

Mais de Reuven Lerner

Mais de Reuven Lerner (20)

Último

Último (20)

Modern Web Technologies — Jerusalem Web Professionals, January 2011

Notas do Editor