Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

John Mertic
November 08, 2013

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.

John Mertic

November 08, 2013

More Decks by John Mertic

Other Decks in Technology


  1. Who%am%I?% John Mertic •  Contact Info •  http://jmertic.wordpress.com •  Twitter:

    @jmertic •  [email protected] ( SugarCRM ) •  [email protected] ( 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
  2. <?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
  3. SOAP% The ‘S’ stands for simple, which must have been

    some sort of sadistic joke. John Mertic - @jmertic - https://joind.in/9951
  4. REpresentational%State% Transfer% So simple it doesn’t even need a marketing

    logo John Mertic - @jmertic - https://joind.in/9951
  5. $ 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
  6. 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
  7. Why?% Just ask your DevOps team ;-) John Mertic -

    @jmertic - https://joind.in/9951
  8. Choice%#2:%Websocket% Client Server Open Connection Send message Send message Send

    message John Mertic - @jmertic - https://joind.in/9951
  9. 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
  10. 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
  11. <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
  12. <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
  13. <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
  14. { "@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
  15. 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
  16. 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
  17. 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
  18. {! "@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
  19. 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