Webbens Arkitektur

431 views
321 views

Published on

Slides in swedish from a presentation I held at Valtech Days 2009 on the architecture of the web. I discus HTTP, resource and service application design.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
431
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webbens Arkitektur

  1. 1. Webbens arkitektur Delade ytor,oberoende djup
  2. 2. TemaWebben som plattform.● Nätverk av resurser● Öppna format● Uniformt APIHållbarhet (skalbarhet).
  3. 3. Innehåll● Identifikation● Representation● Form● Funktion● Komposition● Feeds● Maskineri
  4. 4. Vem? Niklas Lindström, Valtech<niklas.lindstrom@valtech.se>
  5. 5. Det kommer attbyggas om.Bygg förombyggbarhet.
  6. 6. SyfteMaterial — förstå vad som är:● fasta delar● klister
  7. 7. ÄndamålKunna:● byta utseende● koppla ihop med andra webbapplikationer● byta ut indexering/sökmotor— utan att redigera om alla artiklar!
  8. 8. StrategiHållbara ting med:● tydliga former● entydiga relationerFöränderliga funktioner.
  9. 9. 101Obs! Detta är fundamentet.Rika klienter/-beteenden byggs med fördelovanpå detta.
  10. 10. 2 sekunder historiaInternet: nätverk av datorerWebben: nätverk av dokument
  11. 11. En webbplats ärEn samling pusselbitar.Kombineras med andra pusselbitar "hur somhelst":● länkning!
  12. 12. "Startsidan"En mötesplats. Skyltar.Ingen webbplatsbehållare.
  13. 13. Beständiga delarPrimära resurser:● har en eller flera representationer● kan visas i: vyer/tjänster (virtuellt)● samverkan: länkar
  14. 14. Exponera vad du har, inte hur du åstadkommerdet.
  15. 15. Tänk i resurser● de primära byggblocken● det som ska vara beständigt● dessa länkas samman.. samlingar/kategorier är också resurser.
  16. 16. Ordnade behov1) Användning, bestämmer form på..2) Data, som används av..3) Funktioner, vilka underlättar #1.
  17. 17. Identifikation
  18. 18. NamnURI:er är namn på resurser.Kan hämtas: HTTP
  19. 19. URI:n ärNyckeln i strategin.För beständighet: mynta hållbara namn.
  20. 20. Hållbara namnEn webbsidas publika namn — URI — ska hållalika länge som sidan själv.Åratal? Decennier?
  21. 21. Intern-ID eller "sammansatt nyckel"?Ska vara intakta efter byte av:● datalager● publiceringsplattformFinns behov av förutsägbarhet?
  22. 22. NamnsammansättningDomännamnet = grundläggande kontext.● typ● ursprung (publiceringskälla)● datum● "primär etikett" (titel/namn..)
  23. 23. Mindre brahttp://example.com/publisher.jsp?article=x123http://examplecom/CMSVendor/display_product.aspx?oid=23779&viewstate=list&format=html● irrelevant information● hårdkopplad till underliggande lösning
  24. 24. Bra URI:erhttp://example.com/book/23779 http://example.com/book/23779.html http://example.com/book/23779.jsonhttp://example.com/books http://example.com/books.html http://example.com/books.atomhttp://example.com/book/23779/related
  25. 25. Representation
  26. 26. Primära resurser● Digitala verk (ren information, olika mediaformat)● Saker i världen● Koncept (kategori, grupp, modell, ...)
  27. 27. Virtuella resurserVyer, t.ex.:● expanderad information (relaterade ting)● "dekorerat"● kompositioner● genererade format/responser
  28. 28. Tjänster? Resultat.● sökningar, filtreringar● sammanställningar
  29. 29. DokumentInneboende egenskaper:● ariklar, personer, produkter● {titel, datum}, {namn, roller}, ...● relationer: namngivna länkar!
  30. 30. Listor● titel, typ, ...● Länkar till dokument.● Paginering: länkar till andra listor.
  31. 31. TjänsterParameteriserade resurser.D.v.s genererade dokument.
  32. 32. Allt detta kan ha URI:erKan hämtas.En del av dem kan också:● uppdateras● raderas● "ta emot data"
  33. 33. Form
  34. 34. HypertextSyntax:● HTML● XML● JSON
  35. 35. Modeller● HTML: XHTML 1, HTML5● Atom: feed-format (med plats för nya egenskaper och relationer)● JSON: sparsam semantik● RDF: DC, FOAF, SIOC, CC, SKOS, OWL, ...
  36. 36. API för virtuella resurs-URI:erHTML-formulär!● parametervärden för parameteriserade resurser● posta "paket" som kan bli nya resurser.. WADL..
  37. 37. EkonomiskVar "upplyst lat".Återuppfinn ingenting i onödan.
  38. 38. Överlevnad Permanent Objects, Disposable Systems [The California Digital Library, Maj 2009]System kommer och går..
  39. 39. "Now here is the curious thing. There is so much data available on Webpages, that there is a market for tools that reverse engineer thatprocess.""These are tools that read pages, and with a bit of human advice,recreate the database object." [Tim Berners-Lee, 1998]
  40. 40. GoogleVarför klarar sig google så bra?● De har koll på sin data.● De har koll på DIN data..
  41. 41. Funktion
  42. 42. RESTDet uniforma API:t.● GET● POST● PUT● DELETE
  43. 43. Hypertext as the engine of application state.
  44. 44. HTTPÅtkomst/transport.Protokollet är:● enkelt● tillräckligt
  45. 45. Content negotiationcurl -L -H Accept:application/xhtml+xml http://example.org/about...HTTP/1.1 200 OKContent-Location: http://example.org/about.xhtml
  46. 46. Komposition
  47. 47. Din resursarkitektur● Vad är primärt?● Vad är beräknat (vilka parametrar)?● Vilka externa resurser ("tjänster") vill du använda?
  48. 48. Hur bygga ut?Vad beror dina resurser på:hur många lådor på rad / i hög?Vad beror dina funktioner på:hur mycket sladdar i lådorna?
  49. 49. Databasmotorer är optimeringar!Gör inte ditt material beroende av dem.Dina värdeskapande tjänster däremot..?● kan förändras på alla möjliga vis!
  50. 50. Case: indexering"Sökmotorer"En tjänst på din information, inte på ditt maskineri.● bland dina egna virtuella resurser● google, yahoo, siteseeker...
  51. 51. Hur är indexeringen integrerad?● Hur tar den emot dina resurser?● Hur serverar den dem?Länkar!● Format: uniformt nog att vara utbytbar?
  52. 52. Våga pröva nyttBygg inte allt i samma låda.Använd andras lådor:● statistik● kommentarer, feedback● bilderböcker, länksamlingar
  53. 53. RO över ån efter vatten?Indexera dig själv!Fristående webbapplikationer för olika delar avsamma webbplats... Men tänk på komplexiteten.
  54. 54. SeparationEnkelt är bättre än komplext.Komplext är bättre än komplicerat."Hur mkt sladdar i lådorna?"
  55. 55. Feeds
  56. 56. FeedsDet är fantastiskt hur mycket man kan göra medfeeds!● en resurs som listar resurser.
  57. 57. För alla behovPrimäraRepresenterar en "behållare".VirtuellaSökresultat (kategorifilter, "sökord" ..)
  58. 58. Paginerade resurslistorLänkar till andra listor (andra tillstånd).● nästa● föregående
  59. 59. RepresentationerEn resurs, flera format:● kategorisida (html)● feed (atom)<head> ... <link rel="alternate" type="application/atom+xml" href="/categories/article,tech/feed.atom" /></head>
  60. 60. Atom<feed xmlns="http://www.w3.org/2005/Atom"> <id>http://spreadsheets.google.com/feeds/.../full</id> <title type="text">Available Spreadsheets - somebody@...</title> <updated>2009-10-21T16:12:37Z</updated> <link rel="self" type="application/atom+xml" href="/feeds/spreadsheets/private/full"/> <link rel="alternate" type="text/html" href="http://docs.google.com"/> <entry>...</entry> <entry>...</entry> ...</feed>
  61. 61. GData<entry> <id>http://spreadsheets.google.com/feeds/.../o1234.1</id> <category scheme="..." term="...#spreadsheet"/> <author> <name>somebody</name> <email>somebody@gmail.com</email> </author> <title type="text">Mötesplanering 1</title> <updated>2009-10-21T16:12:37Z</updated> <content type="text">Mötesplanering 1</content> <link rel="alternate" type="text/html" href="/ccc?key=o1234.1"/> <link rel="self" type="application/atom+xml" href="/feeds/spreadsheets/private/full/o1234.1"/> <link rel="...#worksheetsfeed" type="application/atom+xml" href="/feeds/worksheets/o1234.1/private/full"/></entry>
  62. 62. Länkad data på webben öppnar upp enorma möjligheter.
  63. 63. Initiativ med momentum idag:● Atom (OpenSearch, GData, AtomPub, CMIS..)● Yahoo och Google indexerar microformat, RDFa..● Dataliberation.org (Google)● TBL: "Open Data Now!"
  64. 64. Open Government Data Now!● US: data.gov● UK: data.gov.uk● Australien: data.australia.gov.auPå gång:● Sweden: opengov.se, e-delegationen..● med mera!
  65. 65. Maskineri
  66. 66. KlisterInstrumentellt.
  67. 67. Kolosser"Men den är julättanvänd."
  68. 68. Lättviktigaramverk
  69. 69. Django, Rails, Grails, ...● Tämligen tunna lager.● Principiellt enkla att anpassa, utöka, kombinera med annat, bytas ut.● Specar inte mer än nödvändigt för att servera resurser.
  70. 70. Tunna lagerNära mellan databas och http — för det primära.
  71. 71. TydligtLätt att se vad som knåpas ihop till en resurs:● primär data● associationer● funktioner
  72. 72. Håll det enkeltBygg inte "på djupet": koppla resurser så direktsom möjligt.
  73. 73. En komplex, avancerad inre arkiktektur..● Är mindre relevant än resursarkitekturen.● Hög risk om ytorna är direkt beroende av (plattformstekniska) detaljer.
  74. 74. Spaghetti är spaghetti● Högnivåkod kan också bli hopplös att underhålla!● Om det växer oregerligt — frångår webbens principer..
  75. 75. TillämpningSe till att din URI-rymd:● kopplar till resurser● är lätt att åstadkomma● är lätt att användaLåt inte plattformen styra!
  76. 76. Enkelhet, tunnhet● objekt   — [relation] →   objekt● dokument   — [länk] →   dokument
  77. 77. Hur ska det kännas?Som om lösningen består av små, tydliga recept(för resurser).Där webbsidor bakas ihop av:● primär resursdata● funktioner på data● listor ur indexOch sedan kläs i presentation (mallar).
  78. 78. Speca(Webbtestramverk: Selenium, Windmill, Twill,Cucumber, http-bibliotek...)Körbara specar som dokumentation på API:t!Tydliggör vad som är:● form● beteende
  79. 79. OrtogonaltI protokollet (HTTP):● överföring (inkl. checksummor)● autentisering (identitet)● kryptering (SSL)I data: rättigheterPå data (format-beroende): signering
  80. 80. Summering
  81. 81. Webbens arkitektur● Identifikation: URI:er● Representation: öppna format, länkad hypertext● Åtkomst: HTTP● Funktion: REST● Komposition: länka alla slags resurserRecept för hållbarhet.
  82. 82. Tack!
  83. 83. Bilder från fotografer på Flickr (CC)Architecture #1Box Fitting Img Gallery of ComputationLego buildingThe_Colossuses #2soaringNot In Gotham CityMexican Architecture

×