7. Architect: Web Email Client
Entirely Web Based Email Client
Clicking a folder displays the
contents of the folder
Loading the application displays
Clicking the compose button
displays a modal window to
write a new email
Clicking on any of the messages
displays the content of the
11. Web APIs
Application Programming Interface (API).
Can use any data format—normally JSON is preferred.
Aim to provide data to Applications, rather than full web-pages.
Should use HTTP Verbs Semantically
18. Cross Origin Resource Sharing
Browser includes origin header stating where the JS is from
API decides http://www.example1.com is OK
Response includes Access-Control-Allow-Origin header
Browser allows request to ﬁnish when it sees the allow header
19. CORS Pitfalls
Recent addition to HTTP spec
All [new] API’s should support it, but don’t expect browser’s to
CORS is the way of the future and the proper way to share
resources, but still to unreliable.
20. JSON with Padding (JSONP)
Exploits a loop-hole in browser security
Supported by all browsers and is commonly used.
Plan on using only as a patch until CORS support is better.
Only supports making GET requests
Browser creates script tag with API Resource as src
Browsers have no problem with this
Server responds with JSON wrapped in a function call.
Browser executes code, resulting in function call with object passed as a
jQuery’s $.getJSON does this automatically by adding callback=? to the URL
25. i = 0
i = 0
f (x) ->
x + (i + 1);
f (x) ->
x + (++i);
26. GET: Request data from the server. Request is read-only and
POST: Save data from the client to the server. Request involves a write
and is not idempotent.
HEAD: Same as GET, but only return the HTTP Headers.
27. PUT: Replace existing data with data from the client. Request involves
writes, but is idempotent.
PATCH: Replace part of the existing data with data from the client.
Request involves writes, but is idempotent.
DELETE: Delete the speciﬁed data. Request involves writes, but is
28. Which verb would be correct?
Request the body of an email from the server
Send a new email
Delete an email
Save a new message draft
Update an existing message draft
Move an email to a new folder
30. jw.org Bible API
Lists available Bible Editions and Languages
Contains english and vernacular language names
Contains links to Books Endpoint
Lists available books in the given language/edition
Verse Range Endpoint
Returns rendered verse range
Verse ID is 8 digits: <booknum><chapterNum><verseNum>
Supports ranges with: <VerseID>-<VerseID>
33. New Requirements
Add selects for:
Editions within a language
Books and chapters within an edition
All select ﬁlters should automatically update other select boxes’ values
What kind of protocol is HTTP?
What’s a Web API?
What are HTTP Verbs?
How do JS Apps access Web
What are each of the HTTP
Verbs used for?
What can AJAX be used for?
What’s the Same Origin Policy?
How does JS handle
How do you get around it?