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

1,871 views

Published on

Talk given at Five Pound App at The Skiff in Brighton on the 15th July 2009:

http://fivepoundapp.com/meetup/18/

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,871
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

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

×