Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
•
1 like•1,216 views
Talk given at Five Pound App at The Skiff in Brighton on the 15th July 2009: http://fivepoundapp.com/meetup/18/
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
Similar to Five Pound App talk: hereit.is, Web app architecture, REST, CSS3 (20)
Recently uploaded
Recently uploaded (20)
Five Pound App talk: hereit.is, Web app architecture, REST, CSS3
- 2. 1. hereit.is 2. Architecture 3. REST 4. CSS3
- 4. http://www.somehugeenormousurl.com/ 3fa3sdfasdca/tags/urls/test.php? foo=2385158124&bar=acewcjlasjilejfalisj
- 6. short url → long url → thing
- 8. short url → thing
- 13. short url → thing Latitude: 50.819716 http://hereit.is/brighton Longitude: -0.136572 → Zoom: 12 Bubble text: Brighton
- 15. Demo
- 16. Architecture
- 23. <html> <head> <title>Elephants</title> </head> <body> <h1>Elephants for Bob!</h1> </body> </html>
- 25. 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
- 26. Sad panda.
- 27. App Request
- 28. App Response
- 29. App Web application architecture or how to rip off Django.
- 30. ..but why didn’t you just use Django?
- 33. MVC Model, view, controller Model, template, view (and one controller, sort of)
- 34. Front controller
- 35. Front controller ‣ Figures out what to do with your request (routing). ‣ url → view
- 36. Front controller View View View
- 37. 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.”
- 38. Views Django: “A view is simply a Python function that takes a Web request and returns a Web response.”
- 39. 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.”
- 40. Front controller View Models
- 41. Models ‣ “representation of the data on which the application operates.”
- 42. Models ‣ hereit.is has one model - the placemark, a representation of a location. ‣ Slug (url), latitude, longitude, zoom, bubble text.
- 43. Front controller View Models + Template
- 44. 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).
- 45. Request Front controller View View View Models + Template Models + Template Models + Template
- 46. Response Front controller View Models + Template
- 47. REST
- 48. 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.
- 49. REST ‣ Representational State Transfer. ‣ Nice and simple. ‣ “The World Wide Web is the key example of RESTful design.”
- 50. 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).
- 51. Representations ‣ How the resource is described. ‣ HTML is a representation. ‣ Other representations may be easier for machines to understand.
- 52. hereit.is ‣ Designed around a RESTful architecture. ‣ One type of resource - the placemark. ‣ Responds correctly to GET, POST, HEAD, OPTIONS ‣ Needs more work.
- 53. 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>
- 54. 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/
- 55. 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/
- 56. Demo
- 57. CSS3
- 58. Logo Shadows Curved corners
- 59. Logo 100% imag free e- Shadows Curved corners
- 60. Logo 100% imag free e- (except this bit, of course) Shadows Curved corners
- 61. 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; }
- 62. Graceful Degradation AKA “it doesn’t look completely shit in IE.”
- 63. Roadmap ‣ iPhone (native or HTML5 geolocation)? ‣ Admin? ‣ Richer landing pages? ‣ More complete API? ‣ ... any suggestions?