Four web technologies you should be looking at now! - Distill 2013

The pace of innovation is unparalleled over the past few years, with so many interesting trends emerging and technologies around with it. HTML5, REST, and a renewed focus on Javascript have laid the groundwork for solving some of the most important problems people looking to build scalable and easily integratable web apps.

In this talk, we'll look at four technologies we are seeing as key to driving a whole new class of web applications; OpenGraph, Shadow DOM, Websockets, and Webhooks.

Transcript

1. Four%Web%Technologies% you%should%be%looking%at% now!% John Mertic @jmertic
2. Who%am%I?% John Mertic •  Contact Info •  http://jmertic.wordpress.com •  Twitter: @jmertic •  jmertic@sugarcrm.com ( SugarCRM ) •  jmertic@php.net ( PHP ) •  Solutions Architect for SugarCRM •  http://www.sugarcrm.com •  http://developers.sugarcrm.com/ wordpress •  Twitter: @sugarcrmdev •  Secretary - OpenSocial Foundation •  http://www.opensocial.org •  Voting member - PHP-FIG •  http://www.php-fig.org •  Member - W3C Social Business Community Working Group •  http://www.w3.org/community/ socbizcg/
3. % Disclaimer:% This%talk%will%have%a%few%#fails% to%it.%
4. There’s gonna be more than 4
6. Enjoy%the%ride%;D)%
7. Q:%When%is%the%last%time% you%wrote%a%web%page?%
10. Q:%When%is%the%last%time% you%wrote%a%web%page?% We’ll come back to this later…
11. The%Web%as%our%minion% The%Web%as%our%ally% Doing things the way they were meant to be
12. Problem:%Talk%to%other%web% sites%in%a%machine%readable% way%% Screen scraping is evil
13. XMLDRPC% Making the web a series of functions
14. <?xml version="1.0"?> <methodCall> <methodName>examples.getStateName</methodName> <params> <param> <value><i4>40</i4></value> </param> </params> </methodCall> <?xml version="1.0"?> <methodResponse> <params> <param> <value><string>South Dakota</string></value> </param> </params> </methodResponse>
15. SOAP% The ‘S’ stands for simple, which must have been some sort of sadistic joke.
19. So%we%needed%something% different%
20. REST%
22. REpresentational%State% Transfer% So simple it doesn’t even need a marketing logo
23. What%made%REST% different?%
24. HATEOAS% Hypermedia As The Engine Of Application State
25. http://martinfowler.com/articles/richardsonMaturityModel.html
26. But%this%isn’t%a%REST%talk%
27. Why%was%REST%really% impactful?%
28. REST%enabled%us%to%interact% with%the%web%the%way%the%web% was%designed%
29. $ curl http://api.joind.in/ { "events":"http:\/\/api.joind.in\/v2.1\/events", "hot-events":"http:\/\/api.joind.in\/v2.1\/ events?filter=hot", "upcoming-events":"http:\/\/api.joind.in\/v2.1\/ events?filter=upcoming", "past-events":"http:\/\/api.joind.in\/v2.1\/ events?filter=past", "open-cfps":"http:\/\/api.joind.in\/v2.1\/events? filter=cfp" } Ask%questions%just%like%you% would%in%a%web%browser%
30. Make%things%sane%to%do%
31. So%what%does%this%tell%us?%
32. Capability%Maturity%Model% Initial (Chaotic) Repeatable Defined Managed Optimizing Read more at http://en.wikipedia.org/wiki/Capability_Maturity_Model
33. Let’s%see%more%of%this% story…%
34. Problem:%Data%is%changing,% and%I%need%to%know%about%it.%
35. Choice%#1:%Polling%
38. Why?% Just ask your DevOps team ;-)
39. Choice%#2:%Websocket% Client Server Open Connection Send message Send message Send message
40. But%an%always%open%socket% seems%like%overkill…% You’re right, it is ;-)
41. Choice%#3:%Webhook% Make subscription request Request validated and registered Trigger action back Receive web hook result Client Server
42. Learn%more%
      WebSocket.org - http://www.websocket.org/
      WebSocket API - http://dev.w3.org/html5/ websockets/
      Pubsubhubbub - https://code.google.com/p/ pubsubhubbub/
      HTTP Subscriptions Spec - https://github.com/progrium/http- subscriptions/blob/master/SPEC.md
      Webhooks in practice - http:// apidocs.mailchimp.com/webhooks/
43. Problem:%How%can%I%embed% things?%
44. iFrames% Sigh…
46. oEmbed% http://oembed.com/
47. I want https://twitter.com/#!/twitter/status/99530515043983360 I ask for https://api.twitter.com/1/statuses/oembed.xml?url=https%3A%2F %2Ftwitter.com%2F%23!%2Ftwitter%2Fstatus %2F99530515043983360
48. I get back
49. What%a%user%should%see…%
50. But%we%aren’t%much%better%off…%
51. Open%Graph% http://ogp.me/
52. <html xmlns:og="http://opengraphprotocol.org/schema/" > <head> <meta property="og:title" content="Korea veteran fails to make it to battle site where friend went down" /> <meta property="og:description" content="A decorated Korean War veteran from Massachusetts left North Korea on Monday without fulfilling his mission: to travel the Chosin Reservoir battleground where he was hoping to locate the remains of a friend who was the U.S. Navy's first black aviator." /> <meta property="og:type" content="article" /> <meta property="og:image" content="http:// a57.foxnews.com/global.fncstatic.com/static/managed/img/ 0/0/North%20Korea%20Armistice_Cham640.jpg" /> <meta property="og:url" content="http:// www.foxnews.com/world/2013/07/29/korea-veteran-fails-to- locate-remains-first-black-navy-aviator/" /> <meta property="og:site_name" content="Fox News" / > </head>
53. Sample%listing%
54. Schema.org%
55. <div> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span>Science fiction</span> <a href="../movies/avatar-theatrical- trailer.html">Trailer</a> </div>
56. <div itemscope itemtype ="http://schema.org/ Movie"> <h1 itemprop="name">Avatar</h1> <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span> <span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical- trailer.html" itemprop="trailer">Trailer</a> </div>
57. Sample%listing%
58. JSONDLD% http://json-ld.org/
59. { "@context": "http://json-ld.org/contexts/ person.jsonld", "@id": "http://dbpedia.org/resource/ John_Lennon", "name": "John Lennon", "born": "1940-10-09", "spouse": "http://dbpedia.org/resource/ Cynthia_Lennon" }
60. Why%is%this%better?%
61. Content%D>%Vocabulary%
62. Blob%D>%Object%
63. Problem:%Wait,%now%how%is% this%supposed%to%live%in%my% app%again?%
64. iFrames% Not again…
66. This%fails%because…%
     There’s no productivity gain
     There’s no workflow
     It’s a fricken mess
67. Web%Components%
68. What%do%we%get?%
      Templates
      Shadow DOM
      Custom HTML Elements
      Import other HTML documents
69. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
70. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
71. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
72. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
73. Why%is%this%good?%
      Clear definition of the object properties from the external resource
      Clear layer separation
      Removes the ugly
74. Application Browser Service Provider
75. Application Browser Service Provider
76. Learn%more%
      Polymer - http://www.polymer-project.org/
      Shadow DOM 101 - http://www.html5rocks.com/en/tutorials/ webcomponents/shadowdom/
77. Q:%When%is%the%last%time% you%wrote%a%web%page?%
78. Polling iFrames SOAP XML-RPC oEmbed
79. Open Graph Schema.org REST
81. A:%We%don’t%write%web$pages% anymore.%We%build$web$ objects%designed%to%interact$ with$other$web$objects$
82. Get%engaged!%
83. Thanks%for%coming!% John Mertic @jmertic