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
   

   View Slide

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
   

   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