Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
64
here it .is ↜
-
Upload
jamie-matthews -
Category
Technology
-
view
1.579 -
download
0
description
Talk given at Five Pound App at The Skiff in Brighton on the 15th July 2009:http://fivepoundapp.com/meetup/18/
Transcript of Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
here it .is↜
1. hereit.is
2. Architecture
3. REST
4. CSS3
http://www.somehugeenormousurl.com/3fa3sdfasdca/tags/urls/test.php?
foo=2385158124&bar=acewcjlasjilejfalisj
http://tr.im/qXkQ
short url → long url → thing
short url → thing
http://twitpic.com/9arhr
http://maps.google.co.uk/maps?q=brighton&ie=UTF8&ll=50.81971,-0.136642&spn=0.095002,0.116558&z=13&iwloc=A
http://hereit.is/brighton
short url → thing
http://hereit.is/brighton →
Latitude: 50.819716Longitude: -0.136572Zoom: 12Bubble text: Brighton
Demo
Architecture
index.htmlabout.htmlcontact.htmlunicorns.html
GET unicorns.html
<html><head><title>Unicorns</title></head><body><h1>Unicorns!</h1></body></html>
index.phpabout.phpcontact.phpelephants.php
GET elephants.php
<html><head><title>Elephants</title></head><body><h1>Elephants for Bob!</h1></body></html>
index.phpabout.phpcontact.phpelephants.php
index.phpabout.phpcontact.phpanimals.phpantelopes/
antelopesarespringy.phphorns.php
aardvarks/adoptanaardvark.phptheyhavebignoses.php
lions/manes.phpteeth.phplionking/
disney.phpelephants/
index.phpmyelephants.phpsomeotherelephants.php
unicorns/unicornsareforhtmllosers.php
hyenas/hahaha.php
zebras/stripey.phphorses/
lessstripey.php
Sad panda.
Request
App
Response
App
Web application architectureor
how to rip off Django.
App
..but why didn’t you just use Django?
erm, good question.
MVCModel, view, controller
MVCModel, view, controller
Model, template, view(and one controller, sort of)
Front controller
Front controller‣ Figures out what to do with your
request (routing).
‣ url → view
Front controller
View ViewView
ViewsDjango:
[A view] “describes the data that gets presented to the user. It’s not necessarily how the data looks, but which data is presented.”
ViewsDjango:
“A view is simply a Python function that takes a Web request and returns a Web response.”
Viewshereit.is:
“A view is simply a PHP object that has a render() method that takes a Web request and returns a Web response.”
Front controller
View
Models
Models
‣ “representation of the data on which
the application operates.”
Models
‣ hereit.is has one model - the placemark, a representation of a location.
‣ Slug (url), latitude, longitude, zoom, bubble text.
Front controller
View
Models Template+
Templates
‣ How information is presented to the user. HTML with holes poked in it.
‣ Django has a lovely templating system.‣ hereit.is doesn’t (just PHP includes).
Front controller
+
View
Models Template +
View
Models Template
View
Models Template+
Request
Front controller
View
Models Template+
Response
REST
Web services allow computers to talk to each other
BEEP, E-Business XML, Hessian, JSON-RPC,
Qworum, SOAP, UDDI, WSDL, WSFL, BPEL, WSCL,
XINS, XLANG, XML-RPC, OMG WTF BBQ.
REST
‣ Representational State Transfer.‣ Nice and simple.‣ “The World Wide Web is the key
example of RESTful design.”
Resources
‣ The “things” (nouns) that are important to your application.
‣ Have unique urls.‣ Often (but not always) map to
database tables/models.‣ Interact using HTTP methods: GET,
POST, PUT, DELETE (verbs).
Representations
‣ How the resource is described.‣ HTML is a representation.‣ Other representations may be easier for
machines to understand.
hereit.is
‣ Designed around a RESTful architecture.
‣ One type of resource - the placemark.‣ Responds correctly to GET, POST,
HEAD, OPTIONS‣ Needs more work.
GET http://hereit.is/brighton<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>hereit.is - short urls for geographical locations</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Stylesheets --><link rel="stylesheet" href="/css/main.css" type="text/css" media="all" />
<!-- Map display scripts --><script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAcdB-etWpkJ7tBx3xRD6e5hRHLF8DnXNo3WfrkRC1RUZDQQmuaxR0xYg16J7sqocLaYWbfludrEpQiw"></script>
<script type="text/javascript">var placemark = {"slug":"brighton","latitude":"50.819716","longitude":"-0.136572","zoom":"12","bubble":"Brighton"}</script>
<script type="text/javascript" src="js/util.js"></script><script type="text/javascript" src="js/display_map.js"></script>
</head><body>
<h1>here it .is</h1> <h2>Names for Places.</h2>
<div id="beta_badge">beta</div>
<noscript><div class="error_message"><h3>Sorry!</h3><p>Your browser doesn't seem to support JavaScript, or JavaScript is turned off. You really need JavaScript to use hereit.is.</p></div></noscript>
<div id="map"></div>
<p class="gmaps_link"><a href="http://maps.google.com/?q=50.819716,-0.136572&z=12" title="View on Google Maps">Visit this location on Google Maps</a></p>
<!-- Google Analytics --><script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try {var pageTracker = _gat._getTracker("UA-8869088-1");pageTracker._trackPageview();} catch(err) {}</script>
<p id="credits">a <a href="http://bombcircle.net" title="bombcircle">bombcircle</a> production</p>
</body> </html>
GET http://hereit.is/brighton.json{ "type":"FeatureCollection", "features":[ { "type":"Feature", "geometry":{ "type":"Point", "coordinates":[ -0.136572, 50.819716 ] }, "properties":{ "id":"1", "description":"Brighton", "zoom":"12" } } ]}
See http://geojson.org/
GET http://hereit.is/brighton.kml
<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2"><Document><Placemark><description>Brighton</description><Point><coordinates>-0.136572,50.819716
</coordinates></Point>
</Placemark></Document>
</kml>
See http://code.google.com/apis/kml/documentation/
Demo
CSS3
Logo
Curved corners
Shadows
Logo
Curved corners
Shadows
100% image-free
Logo
Curved corners
Shadows
(except this bit, of course)
100% image-free
h1::before {content: "\219C";
}
div#map {-webkit-box-shadow: 5px 5px 10px #888;-moz-box-shadow: 5px 5px 10px #888;
}
div#content {-webkit-border-radius: 20px;-moz-border-radius: 20px;
}
Graceful DegradationAKA “it doesn’t look completely shit in IE.”
Roadmap
‣ iPhone (native or HTML5 geolocation)?‣ Admin?‣ Richer landing pages?‣ More complete API?‣ ... any suggestions?
FIN.http://j4mie.org
http://www.flickr.com/photos/wvs/2709609640/http://www.flickr.com/photos/brajeshwar/214854623/http://www.flickr.com/photos/oskay/265899766/http://www.flickr.com/photos/jacquedavis/2866832088/http://www.flickr.com/photos/j4mie/488151124/http://www.flickr.com/photos/j4mie/3560406460/http://www.flickr.com/photos/j4mie/3559584815/
