$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by John Mertic

Other Decks in Technology

Transcript

  1. Four%Web%Technologies%
    you%should%be%looking%at%
    now!%
    John Mertic
    @jmertic
    https://joind.in/9951

    View Slide

  2. 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

    View Slide

  3. %
    Disclaimer:%
    This%talk%will%have%a%few%#fails%
    to%it.%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  4. There’s'
    gonna'be'
    more'than'4'

    View Slide

  5. View Slide

  6. Enjoy%the%ride%;D)%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  7. Q:%When%is%the%last%time%
    you%wrote%a%web%page?%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  8. View Slide

  9. View Slide

  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

    View Slide

  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

    View Slide

  12. Problem:%Talk%to%other%web%
    sites%in%a%machine%readable%
    way%%
    Screen scraping is evil
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  13. XMLDRPC%
    Making the web a series of functions
    John Mertic - @jmertic - https://joind.in/9951

    View Slide



  14. examples.getStateName


    40







    South Dakota



    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  15. SOAP%
    The ‘S’ stands for simple, which must have been some
    sort of sadistic joke.
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  16. John Mertic - @jmertic - https://joind.in/9951

    View Slide

  17. John Mertic - @jmertic - https://joind.in/9951

    View Slide

  18. John Mertic - @jmertic - https://joind.in/9951

    View Slide

  19. So%we%needed%something%
    different%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  20. REST%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  21. John Mertic - @jmertic - https://joind.in/9951

    View Slide

  22. REpresentational%State%
    Transfer%
    So simple it doesn’t even need a marketing logo
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  23. What%made%REST%
    different?%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  24. HATEOAS%
    Hypermedia As The Engine Of Application State
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  25. http://martinfowler.com/articles/richardsonMaturityModel.html
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  26. But%this%isn’t%a%REST%talk%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  27. Why%was%REST%really%
    impactful?%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  28. REST%enabled%us%to%interact%
    with%the%web%the%way%the%web%
    was%designed%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  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

    View Slide

  30. Make%things%sane%to%do%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  31. So%what%does%this%tell%us?%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  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

    View Slide

  33. Let’s%see%more%of%this%
    story…%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  34. Problem:%Data%is%changing,%
    and%I%need%to%know%about%it.%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  35. Choice%#1:%Polling%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  36. View Slide

  37. View Slide

  38. Why?%
    Just ask your DevOps team ;-)
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

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

    View Slide

  40. But%an%always%open%socket%
    seems%like%overkill…%
    You’re right, it is ;-)
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  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

    View Slide

  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

    View Slide

  43. Problem:%How%can%I%embed%
    things?%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  44. iFrames%
    Sigh…
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  45. John Mertic - @jmertic - https://joind.in/9951

    View Slide

  46. oEmbed%
    http://oembed.com/
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  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

    View Slide

  48. I get back
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  49. What%a%user%should%see…%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  50. But%we%aren’t%much%better%off…%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  51. Open%Graph%
    http://ogp.me/
    John Mertic - @jmertic - https://joind.in/9951

    View Slide








  52. >

    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  53. Sample%listing%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  54. Schema.org%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide


  55. Avatar
    Director: James Cameron (born August 16,
    1954)
    Science fiction
    Trailer

    John Mertic - @jmertic - https://joind.in/9951

    View Slide


  56. Avatar
    Director: James
    Cameron (born August 16, 1954)
    Science fiction
    Trailer

    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  57. Sample%listing%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  58. JSONDLD%
    http://json-ld.org/
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  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

    View Slide

  60. Why%is%this%better?%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  61. Content%D>%Vocabulary%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  62. Blob%D>%Object%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  63. Problem:%Wait,%now%how%is%
    this%supposed%to%live%in%my%
    app%again?%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  64. iFrames%
    Not again…
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  65. John Mertic - @jmertic - https://joind.in/9951

    View Slide

  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

    View Slide

  67. Web%Components%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  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

    View Slide

  69. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  70. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  71. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  72. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  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

    View Slide

  74. Example%LinkedIn%Workflow%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  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

    View Slide

  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

    View Slide

  77. LinkedIn%activity%arrives%…%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  78. %…%and%one%click%to%initiate%a%Call%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  79. Consistent%vocabularies%
    simplifies%adoption%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  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

    View Slide

  81. Q:%When%is%the%last%time%
    you%wrote%a%web%page?%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  82. Polling
    iFrames
    SOAP
    XML-RPC
    oEmbed
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  83. Open Graph
    Schema.org
    REST
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  84. John Mertic - @jmertic - https://joind.in/9951

    View Slide

  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

    View Slide

  86. Get%engaged!%
    John Mertic - @jmertic - https://joind.in/9951

    View Slide

  87. Thanks%for%coming!%
    John Mertic
    @jmertic
    https://joind.in/9951

    View Slide