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=1 3&iwloc=A

http://hereit.is/brighton

short url → thing Latitude: 50.819716 http://hereit.is/brighton Longitude: -0.136572 → Zoom: 12 Bubble text: Brighton

Demo

Architecture

index.html about.html contact.html unicorns.html

GET unicorns.html

<html> <head> <title>Unicorns</title> </head> <body> <h1>Unicorns!</h1> </body> </html>

index.php about.php contact.php elephants.php

GET elephants.php

<html> <head> <title>Elephants</title> </head> <body> <h1>Elephants for Bob!</h1> </body> </html>

index.php about.php contact.php elephants.php

index.php about.php contact.php animals.php antelopes/ antelopesarespringy.php horns.php aardvarks/ adoptanaardvark.php theyhavebignoses.php lions/ manes.php teeth.php lionking/ disney.php elephants/ index.php myelephants.php someotherelephants.php unicorns/ unicornsareforhtmllosers.php hyenas/ hahaha.php zebras/ stripey.php horses/ lessstripey.php

Sad panda.

App Request

App Response

App Web application architecture or how to rip off Django.

..but why didn’t you just use Django?

erm, good question.

MVC Model, view, controller

MVC Model, 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 View View

Views Django: [A view] “describes the data that gets presented to the user. It’s not necessarily how the data looks, but which data is presented.”

Views Django: “A view is simply a Python function that takes a Web request and returns a Web response.”

Views hereit.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).

Request Front controller View View View Models + Template Models + Template Models + Template

Response Front controller View Models + Template

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" />  <link rel="stylesheet" href="/css/main.css" type="text/css" media="all" />  <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>  <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>

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 Shadows Curved corners

Logo 100% imag free e- Shadows Curved corners

Logo 100% imag free e- (except this bit, of course) Shadows Curved corners

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 Degradation AKA “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/

Five Pound App talk: hereit.is, Web app architecture, REST, CSS3

0 comments

Notes on slide 1

1 Favorite