True North PHP 2013 - Four Web Technologies you should be looking at now!

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 integrate-able 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, Web Sockets, and Webhooks.

Transcript

1. Four%Web%Technologies% you%should%be%looking%at% now!% John Mertic @jmertic https://joind.in/9951
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 •  President - OpenSocial Foundation •  http://www.opensocial.org •  Voting member - PHP-FIG •  http://www.php-fig.org
3. % Disclaimer:% This%talk%will%have%a%few%#fails% to%it.% John Mertic - @jmertic - https://joind.in/9951
4. There’s' gonna'be' more'than'4'
6. Enjoy%the%ride%;D)% John Mertic - @jmertic - https://joind.in/9951
7. Q:%When%is%the%last%time% you%wrote%a%web%page?% John Mertic - @jmertic - https://joind.in/9951
10. Q:%When%is%the%last%time% you%wrote%a%web%page?% We’ll come back to this later… John Mertic - @jmertic - https://joind.in/9951
11. The%Web%as%our%minion% The%Web%as%our%ally% Doing things the way they were meant to be John Mertic - @jmertic - https://joind.in/9951
12. Problem:%Talk%to%other%web% sites%in%a%machine%readable% way%% Screen scraping is evil John Mertic - @jmertic - https://joind.in/9951
13. XMLDRPC% Making the web a series of functions John Mertic - @jmertic - https://joind.in/9951
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> John Mertic - @jmertic - https://joind.in/9951
15. SOAP% The ‘S’ stands for simple, which must have been some sort of sadistic joke. John Mertic - @jmertic - https://joind.in/9951
16. John Mertic - @jmertic - https://joind.in/9951
17. John Mertic - @jmertic - https://joind.in/9951
18. John Mertic - @jmertic - https://joind.in/9951
19. So%we%needed%something% different% John Mertic - @jmertic - https://joind.in/9951
20. REST% John Mertic - @jmertic - https://joind.in/9951
21. John Mertic - @jmertic - https://joind.in/9951
22. REpresentational%State% Transfer% So simple it doesn’t even need a marketing logo John Mertic - @jmertic - https://joind.in/9951
23. What%made%REST% different?% John Mertic - @jmertic - https://joind.in/9951
24. HATEOAS% Hypermedia As The Engine Of Application State John Mertic - @jmertic - https://joind.in/9951
25. http://martinfowler.com/articles/richardsonMaturityModel.html John Mertic - @jmertic - https://joind.in/9951
26. But%this%isn’t%a%REST%talk% John Mertic - @jmertic - https://joind.in/9951
27. Why%was%REST%really% impactful?% John Mertic - @jmertic - https://joind.in/9951
28. REST%enabled%us%to%interact% with%the%web%the%way%the%web% was%designed% John Mertic - @jmertic - https://joind.in/9951
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% John Mertic - @jmertic - https://joind.in/9951
30. Make%things%sane%to%do% John Mertic - @jmertic - https://joind.in/9951
31. So%what%does%this%tell%us?% John Mertic - @jmertic - https://joind.in/9951
32. Capability%Maturity%Model% Initial (Chaotic) Repeatable Defined Managed Optimizing Read more at http://en.wikipedia.org/wiki/Capability_Maturity_Model John Mertic - @jmertic - https://joind.in/9951
33. Let’s%see%more%of%this% story…% John Mertic - @jmertic - https://joind.in/9951
34. Problem:%Data%is%changing,% and%I%need%to%know%about%it.% John Mertic - @jmertic - https://joind.in/9951
35. Choice%#1:%Polling% John Mertic - @jmertic - https://joind.in/9951
38. Why?% Just ask your DevOps team ;-) John Mertic - @jmertic - https://joind.in/9951
39. Choice%#2:%Websocket% Client Server Open Connection Send message Send message Send message John Mertic - @jmertic - https://joind.in/9951
40. But%an%always%open%socket% seems%like%overkill…% You’re right, it is ;-) John Mertic - @jmertic - https://joind.in/9951
41. Choice%#3:%Webhook% Make subscription request Request validated and registered Trigger action back Receive web hook result Client Server John Mertic - @jmertic - https://joind.in/9951
42. Learn%more% O  WebSocket.org - http://www.websocket.org/ O  WebSocket API - http://dev.w3.org/html5/ websockets/ O  Pubsubhubbub - https://code.google.com/p/ pubsubhubbub/ O  HTTP Subscriptions Spec - https://github.com/progrium/http- subscriptions/blob/master/SPEC.md O  Webhooks in practice - http:// apidocs.mailchimp.com/webhooks/ John Mertic - @jmertic - https://joind.in/9951
43. Problem:%How%can%I%embed% things?% John Mertic - @jmertic - https://joind.in/9951
44. iFrames% Sigh… John Mertic - @jmertic - https://joind.in/9951
45. John Mertic - @jmertic - https://joind.in/9951
46. oEmbed% http://oembed.com/ John Mertic - @jmertic - https://joind.in/9951
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 John Mertic - @jmertic - https://joind.in/9951
48. I get back John Mertic - @jmertic - https://joind.in/9951
49. What%a%user%should%see…% John Mertic - @jmertic - https://joind.in/9951
50. But%we%aren’t%much%better%off…% John Mertic - @jmertic - https://joind.in/9951
51. Open%Graph% http://ogp.me/ John Mertic - @jmertic - https://joind.in/9951
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> John Mertic - @jmertic - https://joind.in/9951
53. Sample%listing% John Mertic - @jmertic - https://joind.in/9951
54. Schema.org% John Mertic - @jmertic - https://joind.in/9951
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> John Mertic - @jmertic - https://joind.in/9951
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> John Mertic - @jmertic - https://joind.in/9951
57. Sample%listing% John Mertic - @jmertic - https://joind.in/9951
58. JSONDLD% http://json-ld.org/ John Mertic - @jmertic - https://joind.in/9951
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" } John Mertic - @jmertic - https://joind.in/9951
60. Why%is%this%better?% John Mertic - @jmertic - https://joind.in/9951
61. Content%D>%Vocabulary% John Mertic - @jmertic - https://joind.in/9951
62. Blob%D>%Object% John Mertic - @jmertic - https://joind.in/9951
63. Problem:%Wait,%now%how%is% this%supposed%to%live%in%my% app%again?% John Mertic - @jmertic - https://joind.in/9951
64. iFrames% Not again… John Mertic - @jmertic - https://joind.in/9951
65. John Mertic - @jmertic - https://joind.in/9951
66. This%fails%because…% O There’s no productivity gain O There’s no workflow O It’s a fricken mess John Mertic - @jmertic - https://joind.in/9951
67. Web%Components% John Mertic - @jmertic - https://joind.in/9951
68. What%do%we%get?% O  Templates O  Shadow DOM O  Custom HTML Elements O  Import other HTML documents John Mertic - @jmertic - https://joind.in/9951
69. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ John Mertic - @jmertic - https://joind.in/9951
70. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ John Mertic - @jmertic - https://joind.in/9951
71. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ John Mertic - @jmertic - https://joind.in/9951
72. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ John Mertic - @jmertic - https://joind.in/9951
73. Why%is%this%good?% O  Clear definition of the object properties from the external resource O  Clear layer separation O  Removes the ugly John Mertic - @jmertic - https://joind.in/9951
74. Example%LinkedIn%Workflow% John Mertic - @jmertic - https://joind.in/9951
75. O Publish actionable updates into Sugar activity stream from LinkedIn O Allow metadata to drive the Activity Stream O Sugar app retains control of UX O Integration is configured, not custom coded LinkedIn%Workflow%Scenario% John Mertic - @jmertic - https://joind.in/9951
76. {! "@context": "http://activitystrea.ms/spec/2.0",! "type" : "post",! "@id" : "urn:sugarcrm:123",! "generator" : "urn:linkedin"! "title": "Connect with Akshay about his new job",! "actor": {! "type": "person",! "displayName": "Akshay Joshi",! "@id" : "akshayjoshi"! },! "object": {! "type": "job",! "title": "Student Computing Consultant"! "@id" : "urn:waterloo/jobs/scc"! },! "actions" : [! {! "@context" : "http://schema.org/CommunicateAction", ! "recipient" : "akshayjoshi",! "about" : {! "name" : "New Job"! }! }! ]! }! (Speculative)%activity%entry% example% Based on activitystrea.ms, JSON-LD, schema.org action vocabularies Or inject schema.org microdata into HTML content associated with this activity! John Mertic - @jmertic - https://joind.in/9951
77. LinkedIn%activity%arrives%…% John Mertic - @jmertic - https://joind.in/9951
78. %…%and%one%click%to%initiate%a%Call% John Mertic - @jmertic - https://joind.in/9951
79. Consistent%vocabularies% simplifies%adoption% John Mertic - @jmertic - https://joind.in/9951
80. Learn%more% O  Polymer - http://www.polymer-project.org/ O  Shadow DOM 101 - http://www.html5rocks.com/en/tutorials/ webcomponents/shadowdom/ John Mertic - @jmertic - https://joind.in/9951
81. Q:%When%is%the%last%time% you%wrote%a%web%page?% John Mertic - @jmertic - https://joind.in/9951
82. Polling iFrames SOAP XML-RPC oEmbed John Mertic - @jmertic - https://joind.in/9951
83. Open Graph Schema.org REST John Mertic - @jmertic - https://joind.in/9951
84. John Mertic - @jmertic - https://joind.in/9951
85. A:%We%don’t%write%web$pages% anymore.%We%build$web$ objects%designed%to%interact$ with$other$web$objects$ John Mertic - @jmertic - https://joind.in/9951
86. Get%engaged!% John Mertic - @jmertic - https://joind.in/9951
87. Thanks%for%coming!% John Mertic @jmertic https://joind.in/9951