Symfony2, Backbone.js & socket.io - SfLive Paris 2k13 - Wisembly

1. Symfony2, Backbone.js & socket.io Symfony live Paris 2013 @guillaumepotier guillaume@wisembly.com

2. app.wisembly.com/sﬂive app.wisembly.com/sﬂive

3. 2011, September app.wisembly.com/sﬂive

4. MySQL PHP app.wisembly.com/sﬂive

5. Twig Symfony 2 Doctrine 2 MySQL PHP app.wisembly.com/sﬂive

6. Twig js jQuery Assetic Twig Symfony 2 Doctrine 2 MySQL PHP app.wisembly.com/sﬂive

7. Backbone.js Underscore.js Twig js jQuery Assetic Twig Symfony 2 Doctrine 2 MySQL PHP app.wisembly.com/sﬂive

8. Backbone.js Underscore.js Twig js jQuery H ! UC Assetic O M Twig TO Symfony 2 Doctrine 2 MySQL PHP app.wisembly.com/sﬂive

9. Client Server app.wisembly.com/sﬂive

10. Client Twig REST Symfony 2 Server Doctrine 2 MySQL PHP app.wisembly.com/sﬂive

11. Backbone.js Underscore.js Client jQuery HTML Twig REST Symfony 2 Server Doctrine 2 MySQL PHP app.wisembly.com/sﬂive

12. Backbone.js Underscore.js Client jQuery ! HTML ING L L PO NG L O Twig REST Symfony 2 Server Doctrine 2 MySQL PHP app.wisembly.com/sﬂive

13. Users want fast & smooth SaaS apps app.wisembly.com/sﬂive

14. Users want fast & smooth SaaS apps Users want multiplateform SaaS apps app.wisembly.com/sﬂive

15. Users want fast & smooth SaaS apps Users want multiplateform SaaS apps Users want dynamic & interactive SaaS apps app.wisembly.com/sﬂive

16. Users want fast & smooth SaaS apps Users want multiplateform SaaS apps Users want dynamic & interactive SaaS apps You should do so! app.wisembly.com/sﬂive

17. Users want fast & smooth SaaS apps Users want multiplateform SaaS apps Users want dynamic & interactive SaaS apps W ? You shouldO so! do T H B U app.wisembly.com/sﬂive

18. app.wisembly.com/sﬂive

19. ? app.wisembly.com/sﬂive

20. E L L H ! N O ? app.wisembly.com/sﬂive

22. Nowadays app.wisembly.com/sﬂive

24. small / lightweight / stable app.wisembly.com/sﬂive

25. small / lightweight / stable easy to learn, easy to extend app.wisembly.com/sﬂive

26. small / lightweight / stable easy to learn, easy to extend great resources: layoutManager relational app.wisembly.com/sﬂive

27. Models Models app.wisembly.com/sﬂive

28. Models Models Collections Repositories app.wisembly.com/sﬂive

29. Models Models Collections Repositories Views Controllers app.wisembly.com/sﬂive

30. Models Models Collections Repositories Views Controllers Templates Views app.wisembly.com/sﬂive

31. Models Models Collections Repositories Views Controllers Templates Views Routing Routing app.wisembly.com/sﬂive

32. Models Models Collections Repositories Views Controllers S H ViewsP U Templates + RE ST Routing Routing app.wisembly.com/sﬂive

33. FOSJsRouting BazingaExposeTranslation JMSSerializer FOSRestBundle app.wisembly.com/sﬂive

35. 1 - MAKE AN API app.wisembly.com/sﬂive

36. MUST READ http://fr.slideshare.net/nachomartin/symfony- javascript-combining-the-best-of-two-worlds app.wisembly.com/sﬂive

37. ar tin nacm @ Books = new Backbone.collection(); Books.url = ‘/books’; app.wisembly.com/sﬂive

38. ar tin nacm @ Books = new Backbone.collection(); Books.url = ‘/books’; Books.fetch(); GET /books app.wisembly.com/sﬂive

39. ar tin nacm @ events: { ‘click .mybutton’:‘doStuffAndSave’ } doStuffAndSave: function() { var book = Books.get(3); book.stuff(); book.save(); } app.wisembly.com/sﬂive

40. ar tin nacm @ events: { ‘click .mybutton’:‘doStuffAndSave’ } doStuffAndSave: function() { var book = Books.get(3); book.stuff(); book.save(); } PUT /books/3 app.wisembly.com/sﬂive

41. /** * @var integer $id * * @ORMColumn(name="id", type="integer") * @ORMId [ { * @ORMGeneratedValue(strategy="AUTO") “id”:1, */ “name”:”guillaume”, private $id; “phone”: “0611010011” /** ... * @var string $name * }, * @ORMColumn(name="name", type="string", {...}, length=50, nullable=true) ] */ private $name; /** * @var string $phone * * @ORMColumn(name="phone", type="string", length=20, nullable=true) */ private $phone; ... app.wisembly.com/sﬂive

42. II - MAKE A GOOD REST API app.wisembly.com/sﬂive

43. MUST READ 2 http://williamdurand.fr/2012/08/02/rest-apis- with-symfony2-the-right-way app.wisembly.com/sﬂive

44. JMSSerializer or app.wisembly.com/sﬂive

45. JMSSerializer or class User implements UserInterface, EquatableInterface, ApiAbleInterface { } app.wisembly.com/sﬂive

46. JMSSerializer or class User implements UserInterface, EquatableInterface, ApiAbleInterface { public function toArray() { return [ 'id' => $this->getId(), 'name' => $this->getName(), 'email' => $this->getEmail(), ]; } } app.wisembly.com/sﬂive

47. FOSRestBundle or app.wisembly.com/sﬂive

48. FOSRestBundle or /** * @Route("{keyword}/quote/{id}", name="api3_quote_get", options={"expose"=true}) * @Method({"GET", "OPTIONS"}) */ public function getQuote(EventInterface $event, $id) { try { $quote = $this->get('api3.quote')->get($id); return $this->container->get('api3.response')->newSuccessResponse($quote- >toArray(), 200); } catch (NoResultException $e) { return $this->container->get('api3.response')->newErrorResponse('No quote found', ErrorCode::NO_QUOTE, 404); } } app.wisembly.com/sﬂive

55. Controller Entity Service API Service Entity EntityRepository app.wisembly.com/sﬂive

56. Use Validator and Form ouac @c <?php // ... private function processForm(User $user) { $form = $this->createForm(new UserType(), $user); $form->bind($this->getRequest()); if ($form->isValid()) { $this->doYourStuff(); return $user; } // ... } app.wisembly.com/sﬂive

57. /** * @Route("event/{keyword}/poll/{id}", name="api3_poll_edit", requirements={"id" = "d+"}, options={"expose"=true}) * @Method({"POST", "PUT", "OPTIONS"}) */ public function editPollAction(EventInterface $event, Request $request, $id) { try { $poll = $this->get('api3.poll')->get($event, $id); $poll = $this->get('api3.poll')->edit($poll, $request); return $this->container->get('api3.response')->newSuccessResponse($poll- >toArray(), 201); } catch (NoResultException $e) { // ... } catch (AccessDeniedException $e) { // ... } catch (Exception $e) { // ... } } app.wisembly.com/sﬂive

65. ar tin nacm @ events: { ‘bookUpdated’:‘update’, ‘bookCreated’: ‘create’, ‘bookDeleted’:‘delete’, } update: function(websocketData) { doStuff(websocketData); }, create: function(websocketData) { doOtherStuff(websocketData); }, delete: function(websocketData) { stillDoOtherStuff(websocketData); } app.wisembly.com/sﬂive

66. ar tin nacm @ events: { ‘bookUpdated’:‘update’, ‘bookCreated’: ‘create’, ‘bookDeleted’:‘delete’, } update: function(websocketData) { doStuff(websocketData); }, create: function(websocketData) { doOtherStuff(websocketData); }, delete: function(websocketData) { stillDoOtherStuff(websocketData); } REAL TIME FULL EVENT BASED app.wisembly.com/sﬂive

67. websocketData? Who sends what? Which port, which protocol? app.wisembly.com/sﬂive

70. Authenticate user against PUSH server app.wisembly.com/sﬂive

71. Authenticate user against PUSH server sessionToken domain app.wisembly.com/sﬂive

72. Authenticate user against PUSH server sessionToken domain REST sessionToken domain app.wisembly.com/sﬂive

73. Authenticate user against PUSH server sessionToken domain rights REST sessionToken domain app.wisembly.com/sﬂive

74. Authenticate user against PUSH server Authenticated! rights REST sessionToken domain app.wisembly.com/sﬂive

75. PUSH: The «Classic» way rights app.wisembly.com/sﬂive

76. PUSH: The «Classic» way REST sessionToken domain rights app.wisembly.com/sﬂive

77. PUSH: The «Classic» way REST sessionToken data domain rights app.wisembly.com/sﬂive

78. PUSH: The «Classic» way REST sessionToken data domain rights app.wisembly.com/sﬂive

79. PUSH: The «Classic» way websocketData REST sessionToken data domain rights app.wisembly.com/sﬂive

80. • Slow: HTTP ajax round-trip • !DRY: Double front processing (Ajax / Push) • Push server complexity: authorizations app.wisembly.com/sﬂive

81. PUSH: The «Wisembly» way websocketData REST sessionToken data domain rights app.wisembly.com/sﬂive

82. PUSH: The «Wisembly» way websocketData REST sessionToken domain websocketData secret rights app.wisembly.com/sﬂive

83. PUSH: The «Wisembly» way websocketData REST sessionToken domain websocketData websocketData secret rights app.wisembly.com/sﬂive

84. PUSH: The «Wisembly» way websocketData REST sessionToken data websocketData domain websocketData secret rights app.wisembly.com/sﬂive

85. Push «surprises» app.wisembly.com/sﬂive

86. Push «surprises» • Must ﬁnd always opened port app.wisembly.com/sﬂive

87. Push «surprises» • Must find always opened port • Websocket protocol must go through firewalls app.wisembly.com/sflive

88. Push «surprises» • Must find always opened port • Websocket protocol must go through firewalls • Push may disconnect (very!) frequently and loose events (duh!) app.wisembly.com/sflive

90. • 80 always opened, but websocket very often blocked -> FAIL -> goto 443 w/ https app.wisembly.com/sﬂive

91. • 80 always opened, but websocket very often blocked -> FAIL -> goto 443 w/ https • Implement disconnection mechanism and lost events in case of socket.io «degraded» protocol (xhr polling, jsonp polling) app.wisembly.com/sﬂive

92. The «Wisembly» way hashN: { eventName, args } app.wisembly.com/sﬂive

93. The «Wisembly» way hashN: { eventName, args } app.wisembly.com/sﬂive

94. The «Wisembly» way hashN hashN hashN hash1: { eventName, args } hashN: { eventName, args } hash2: { eventName, args } ... hashN: { eventName, args } hashN: { eventName, args } hashN: { eventName, args } app.wisembly.com/sﬂive

95. The «Wisembly» way hashM hashM hashN hashN: { eventName, args } ... hashN+M: { eventName, args } app.wisembly.com/sﬂive

96. The «Wisembly» way hashM hashM hashN REST onReconect() since hashN hashN: { eventName, args } ... hashN+M: { eventName, args } app.wisembly.com/sﬂive

97. The «Wisembly» way hashM hashM hashN REST onReconect() since hashN hashN: { eventName, args } ... hashN+M: { eventName, args } hashN+1: { eventName, args } ... hashN+M: { eventName, args } app.wisembly.com/sﬂive

98. The «Wisembly» way hashM hashM hashM REST onReconect() since hashN hashN: { eventName, args } ... hashN+M: { eventName, args } hashN+1: { eventName, args } ... hashN+M: { eventName, args } app.wisembly.com/sﬂive

99. Great Ressources http://fr.slideshare.net/nachomartin/symfony-javascript- combining-the-best-of-two-worlds http://williamdurand.fr/2012/08/02/rest-apis-with- symfony2-the-right-way app.wisembly.com/sﬂive

100. @guillaumepotier http://wisembly.com/en/about#jobs app.wisembly.com/sﬂive

101. Any Questions ? app.wisembly.com/sﬂive

Symfony2, Backbone.js & socket.io - SfLive Paris 2k13 - Wisembly

Related slideshows

More Related Content