Download as PDF, PPTX
![[
Response
{“id”:1,
“name”:”nacho”,
“password”: “X$$%$X”,
“email”:”nacho@limenius.com”,
“profile”: {
“id”:3,
“phone”: “666666666”}
}
},
{...},
]](https://image.slidesharecdn.com/sfjs-130210085335-phpapp01/85/Symfony-Javascript-Combining-the-best-of-two-worlds-91-320.jpg)
![Response
[ {“id”:1,
“name”:”nacho”,
“email”:”nacho@limenius.com”,
“phone”: “666666666”
},
{...},
]](https://image.slidesharecdn.com/sfjs-130210085335-phpapp01/85/Symfony-Javascript-Combining-the-best-of-two-worlds-95-320.jpg)
![[
Response
{“id”:1,
“name”:”nacho”,
“password”: “X$$%$X”,
“email”:”nacho@limenius.com”,
“profile”: {
“id”:3,
“phone”: “666666666”}
}
},
{...},
]](https://image.slidesharecdn.com/sfjs-130210085335-phpapp01/75/Symfony-Javascript-Combining-the-best-of-two-worlds-91-2048.jpg)
![Response
[ {“id”:1,
“name”:”nacho”,
“email”:”nacho@limenius.com”,
“phone”: “666666666”
},
{...},
]](https://image.slidesharecdn.com/sfjs-130210085335-phpapp01/75/Symfony-Javascript-Combining-the-best-of-two-worlds-95-2048.jpg)
Uploaded byIgnacio Martín
Symfony & Javascript. Combining the best of two worlds
This document discusses combining Symfony and JavaScript. It provides a brief history of client-server interactions and explains how JavaScript is now commonly used on the client side. It acknowledges challenges with JavaScript like asynchronous behavior but notes the large community and low barrier to entry. It advocates using Symfony to build APIs and leveraging JavaScript frameworks like Backbone for the front end. It also discusses rendering views with Twig.js and using server-side JavaScript for tasks like streaming data.
More Related Content
Similar to Symfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worlds
- 1. Symfony & JavaScript Combining the best of two worlds Nacho Martín @nacmartin
- 2. Symfony & JavaScript Combining the best of two worlds Nacho Martín @nacmartin
- 3. A bit ofhistory
- 4.
- 5.
- 6.
- 7.
- 8. What’s that?? It’s just a JavaScript
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. Why should Icare?
- 15.
- 16. Users like it Youwant to do it
- 17. Users expect it Youwant to do it
- 18. Users expect it Youneed to do it
- 19. It’s still justa JavaScript
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. Asynchronous Call me back
- 32.
- 33.
- 34. Asynchronous Done !
- 35.
- 36. for(var i =1; i <= 5; i++) { console.log(i); }
- 37. 1 for(var i =1; i <= 5; i++) { 2 console.log(i); 3 } 4 5
- 38. for(var i =1; i <= 5; i++) { setTimeout(function() { console.log(i); }, 100); }
- 39. 6 for(var i =1; i <= 5; i++) { setTimeout(function() { 6 console.log(i); 6 }, 100); } 6 6
- 40. for(var i =1; i <= 5; i++) { (function() { var j = i; setTimeout( function() { console.log(j); }, 100); })(); }
- 41. for(var i =1; i <= 5; i++) { (function() { 1 var j = i; setTimeout( 2 function() { 3 console.log(j); 4 }, 100); })(); 5 }
- 42.
- 43.
- 44. Callback nesting • Events •Async.js
- 45. “this” gotcha var o= {}; o.prop = {}; var o.f1 = function(){ var that = this; this.prop.active = false; var activate = function(){ that.prop.active = true; }; activate(); };
- 46. “this” gotcha var o= {}; o.prop = {}; var o.f1 = function(){ var that = this; this.prop.active = false; var activate = function(){ that.prop.active = true; }; activate(); };
- 47.
- 48.
- 50.
- 51.
- 52. But, but... •Can beugly •Tons of crappy code
- 53. But, but... •Can beugly •Tons of crappy code •Inconsistencies
- 54. But, but... •Can beugly •Tons of crappy code •Inconsistencies •Weird stuff inside
- 55. But, but... •Can beugly •Huge community •Tons of crappy code •Inconsistencies •Weird stuff inside
- 56. But, but... •Can beugly •Huge community •Tons of crappy code •Easy to get help •Inconsistencies •Weird stuff inside
- 57. But, but... •Can beugly •Huge community •Tons of crappy code •Easy to get help •Inconsistencies •Low entry barrier •Weird stuff inside
- 58. But, but... •Can beugly •Huge community •Tons of crappy code •Easy to get help •Inconsistencies •Low entry barrier •Weird stuff inside •Is everywhere
- 59.
- 60. The team needsdiscipline compromise readablity http://www.flickr.com/photos/39865537@N03/4395203300 http://www.flickr.com/photos/73935252@N00/181308667
- 61. Pick your battles http://www.flickr.com/photos/43322231@N07/5589147122
- 62.
- 63.
- 64.
- 65. Level I Text http://www.flickr.com/photos/lecates/307250887/
- 66.
- 67. FOSJsRouterBundle PHP /** * @Route("/foo/{id}/bar", name="my_route_to_expose", options={"expose"=true}) */ public function exposedAction($foo) JS Routing.generate('my_route_to_expose', { id: 10 }); // /foo/10/bar
- 68. Level II http://www.flickr.com/photos/49766155@N07/4945673508 Text
- 69.
- 70.
- 71.
- 72.
- 73. Then Symfony...? Still doesalmost everything
- 74. •Small library •Stable forJS world •Active •Open Source •Popular
- 75. • Models • Models • Collections • Repositories • Views • Controllers • Templates • Views • Routing • Routing
- 76. View Model Model
- 77. View Books=new Backbone.collection(); Model Model Books.url = ‘/books’; Books.fetch()
- 78. View Books=new Backbone.collection(); Model Model Books.url = ‘/books’; Books.fetch() GET /books
- 79. View Books=new Backbone.collection(); Model Model Books.url = ‘/books’; Books.fetch() GET /books
- 80. View Books.on(‘reset’, this.render); Books=new Backbone.collection(); Model Model Books.url = ‘/books’; Books.fetch() GET /books
- 81. View Books.on(‘reset’, this.render); Books=new Backbone.collection(); Model Model Books.url = ‘/books’; Books.fetch() GET /books
- 82. View Books.on(‘reset’, this.render); Books=new Backbone.collection(); Model Model Books.url = ‘/books’; Books.fetch() GET /books
- 83. View Model Model
- 84. events: { ‘click.mybutton’: ‘doStuffAndSave’} View Model Model
- 85. events: { ‘click.mybutton’: ‘doStuffAndSave’} View Model Model
- 86. events: { ‘click.mybutton’: ‘doStuffAndSave’} View doStuffAndSave: function() { var book = Books.get(3); book.stuff(); Books.get(3).save(); } Model Model
- 87. events: { ‘click.mybutton’: ‘doStuffAndSave’} View doStuffAndSave: function() { var book = Books.get(3); book.stuff(); Books.get(3).save(); } Model Model
- 88. events: { ‘click.mybutton’: ‘doStuffAndSave’} View doStuffAndSave: function() { var book = Books.get(3); book.stuff(); Books.get(3).save(); } Model Model PUT /books/3
- 89. Build an API http://www.flickr.com/photos/kaptainkobold/3203311346/
- 90. FOSRestBundle /** * @View() * GET /users */ public function getUsersAction() { return $this->getDoctrine()->getRepository('myBundle:User')->findAll(); }
- 91. [ Response {“id”:1, “name”:”nacho”, “password”: “X$$%$X”, “email”:”nacho@limenius.com”, “profile”: { “id”:3, “phone”: “666666666”} } }, {...}, ]
- 92. JMSSerializer MyBundleUser: exclusion_policy: ALL properties: id: expose: true name: expose: true email: expose: true
- 93. JMSSerializer MyBundleUser: exclusion_policy: ALL properties: id: expose: true name: expose: true email: expose: true callback_methods: pre_serialize: serializeProfile
- 94. JMSSerializer public function serializeProfile() { $this->phone = $this->profile->getPhone(); $this->profile = null; }
- 95. Response [ {“id”:1, “name”:”nacho”, “email”:”nacho@limenius.com”, “phone”: “666666666” }, {...}, ]
- 96. Deserialize forms •SimpleThingsFormSerializeBundle •Symfony-cmf/CreateBundle •http://williamdurand.fr/2012/08/02/ rest-apis-with-symfony2-the-right- way/
- 97.
- 98. Twig.js Twig
- 99. Twig.js Backbone Twig
- 100. Twig.js {% javascripts "@MyBundle/Resources/views/tmpl.html.twig" filter="twig_js, ?yui_js" %} <script language="javascript" src="{{ asset_url }}"> </script> {% endjavascripts %}
- 101.
- 102.
- 103.
- 104.
- 105.
- 107.
- 108.
- 109. What for •Streaming data •Softrealtime •Chats •Notifications
- 110.
- 111. Challenges to face •Organizationof a big code base
- 112. Challenges to face •Organizationof a big code base •General lower level of abstraction
- 113. Challenges to face •Organizationof a big code base •General lower level of abstraction •Deployment •Serving static files
- 114. Challenges to face •Organizationof a big code base •General lower level of abstraction •Deployment •Serving static files
- 115.
- 118.
- 119.
- 120.
- 121.
- 122. Websockets io.sockets.on('connection', function (socket){ socket.join('user1'); socket.broadcast.to('user1').emit('Hi user 1'); });
- 123.
- 125.
- 126. The pusher way secret secret
- 127. The pusher way so ck et id secret secret
- 128. The pusher way id & e so ck am ck so l n et et ne id an ch secret secret
- 129. ke y:s ign at u secret ch re an ne so l n ck am et e id & so ck et id The pusher way secret
- 130. secret & The pusher way e am re l n tu ne na an sig ch y: ke id et ck so id & e et ck am so l n ne rean ch secret u at ign y:s ke
- 131.
- 132.
- 133.
- 135. It’s just aJavaScript
- 136. Thanks Nacho Martín @nacmartin nacho@limenius.com http://www.flickr.com/photos/95572727@N00/2380543038