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 of history

4. Client
Server

5. Client
Server

6. Client
Server

7. What’s that??

8. What’s that??
It’s just a JavaScript

9. Client
Server

10. Client
Server

11. Client
Server

12. Client
Server

13. Client
Server

14. Why should I care?

15. Users like it

16. Users like it
You want to do it

17. Users expect it
You want to do it

18. Users expect it
You need to do it

19. It’s still just a JavaScript

20. But, but...
JavaScript is HARD

21. Sequential

22. Sequential

23. Sequential

24. Sequential

25. Sequential

26. Sequential

27. Sequential

28. Asynchronous

29. Asynchronous

30. Asynchronous

31. Asynchronous
Call me back

32. Asynchronous

33. Asynchronous

34. Asynchronous
Done !

35. Asynchronous

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. Callback nesting

43. Callback nesting
• Events

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. http://www.flickr.com/photos/bensonkua/3161323177/in/photostream/

48. Douglas Crockford

50. But, but...

51. But, but...
•Can be ugly

52. But, but...
•Can be ugly
•Tons of crappy code

53. But, but...
•Can be ugly
•Tons of crappy code
•Inconsistencies

54. But, but...
•Can be ugly
•Tons of crappy code
•Inconsistencies
•Weird stuff inside

55. But, but...
•Can be ugly •Huge community
•Tons of crappy code
•Inconsistencies
•Weird stuff inside

56. But, but...
•Can be ugly •Huge community
•Tons of crappy code •Easy to get help
•Inconsistencies
•Weird stuff inside

57. But, but...
•Can be ugly •Huge community
•Tons of crappy code •Easy to get help
•Inconsistencies •Low entry barrier
•Weird stuff inside

58. But, but...
•Can be ugly •Huge community
•Tons of crappy code •Easy to get help
•Inconsistencies •Low entry barrier
•Weird stuff inside •Is everywhere

59. http://www.flickr.com/photos/73935252@N00/181308667

60. The team needs discipline
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. is the perfect
complement

63. is the perfect
complement

64. Client side JS

65. Level I
Text
http://www.flickr.com/photos/lecates/307250887/

66. Assetic

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. Client
Server

70. Client
Server

71. Client
Server

72. Then Symfony...?

73. Then Symfony...?
Still does almost everything

74. •Small library
•Stable for JS 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. NelmioApiDocBundle

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. Server side JS

102. Client
Server

103. Client
Server

104. Client
Server

105. Client
Server

107. What for

108. What for
•Streaming data

109. What for
•Streaming data
•Soft realtime
•Chats
•Notifications

110. Challenges to face

111. Challenges to face
•Organization of a big code base

112. Challenges to face
•Organization of a big code base
•General lower level of abstraction

113. Challenges to face
•Organization of a big code base
•General lower level of abstraction
•Deployment
•Serving static files

114. Challenges to face
•Organization of a big code base
•General lower level of abstraction
•Deployment
•Serving static files

115. Use case:
Notifications

118. ♥

119. ♥

120. ♥

121. ♥

122. Websockets
io.sockets.on('connection', function (socket) {
socket.join('user1');
socket.broadcast.to('user1').emit('Hi user 1');
});

123. Dealing with secrets
http://www.flickr.com/photos/45940879@N04/6277724736

125. http
MQ

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

132. Deploy

133. Deploy

135. It’s just a JavaScript

136. Thanks
Nacho Martín
@nacmartin
nacho@limenius.com
http://www.flickr.com/photos/95572727@N00/2380543038