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

Symfony2, Backbone.js & socket.io

Symfony live Paris 2013

@[email protected]

app.wisembly.com/sflive



2011, September


PHP

MySQL


PHP

MySQL

Doctrine 2

Symfony 2

Twig


PHP

MySQL

Doctrine 2

Symfony 2

Twig

jQuery

Twig js

Assetic


PHP

MySQL

Doctrine 2

Symfony 2

Twig

jQuery

Twig js

Assetic

Underscore.js

Backbone.js


PHP

MySQL

Doctrine 2

Symfony 2

Twig

jQuery

Twig js

Assetic

Underscore.js

Backbone.js

TOO MUCH!


Client

Server


Client

Server

PHP

MySQL

Doctrine 2

Symfony 2

Twig REST


Client

Server

PHP

MySQL

Doctrine 2

Symfony 2

Twig

HTML

jQuery

Underscore.js

Backbone.js

REST


Client

Server

PHP

MySQL

Doctrine 2

Symfony 2

Twig

HTML

jQuery

Underscore.js

Backbone.js

RESTLONG POLLING!


Users want fast & smooth SaaS apps


Users want fast & smooth SaaS appsUsers want multiplateform SaaS apps



Users want dynamic & interactive SaaS apps




You should do so!




You should do so!

BUT HOW?


?


HELL

NO!?


Nowadays


small / lightweight / stable



easy to learn, easy to extend



easy to learn, easy to extend

great resources:

layoutManager

relational


Models Models


Models Models

Collections Repositories


Models Models


Views Controllers


Models Models


Views Controllers

Templates Views


Models Models


Views Controllers

Templates Views

Routing Routing


Models Models


Views Controllers

Templates Views

Routing RoutingREST + PUSH


BazingaExposeTranslationFOSJsRouting

FOSRestBundleJMSSerializer


1 - MAKE AN API


MUST READ

http://fr.slideshare.net/nachomartin/symfony-javascript-combining-the-best-of-two-worlds






Books = new Backbone.collection();Books.url = ‘/books’;

@nacmarti

n


Books = new Backbone.collection();Books.url = ‘/books’;

GET /books

Books.fetch();

@nacmarti

n


events: { ‘click .mybutton’:‘doStuffAndSave’ }

doStuffAndSave: function() {var book = Books.get(3);book.stuff();book.save();

}

@nacmarti

n


events: { ‘click .mybutton’:‘doStuffAndSave’ }

doStuffAndSave: function() {var book = Books.get(3);book.stuff();book.save();

}

PUT /books/3

@nacmarti

n


[ {“id”:1,

“name”:”guillaume”, “phone”: “0611010011”

...

}, {...},]

/** * @var integer $id * * @ORM\Column(name="id", type="integer") * @ORM\Id * @ORM\GeneratedValue(strategy="AUTO") */ private $id;

/** * @var string $name * * @ORM\Column(name="name", type="string", length=50, nullable=true) */ private $name;

/** * @var string $phone * * @ORM\Column(name="phone", type="string", length=20, nullable=true) */ private $phone;

...


II - MAKE A GOOD REST API


MUST READ 2

http://williamdurand.fr/2012/08/02/rest-apis-with-symfony2-the-right-way






JMSSerializer

or


class User implements UserInterface, EquatableInterface, ApiAbleInterface{

}

JMSSerializer

or


public function toArray(){ return [ 'id' => $this->getId(), 'name' => $this->getName(), 'email' => $this->getEmail(), ];}

class User implements UserInterface, EquatableInterface, ApiAbleInterface{

}

JMSSerializer

or


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); } }

FOSRestBundle

or


Entity EntityRepository

Entity Service

Controller

API Service


<?php

// ...

private function processForm(User $user) {

$form = $this->createForm(new UserType(), $user); $form->bind($this->getRequest());

if ($form->isValid()) {

$this->doYourStuff(); return $user; }

// ...

}

Use Validator and Form

@couac


/** * @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) {// ... } }


events: {‘bookUpdated’:‘update’,‘bookCreated’: ‘create’,‘bookDeleted’:‘delete’,

}

update: function(websocketData) {doStuff(websocketData);

},create: function(websocketData) {

doOtherStuff(websocketData);},delete: function(websocketData) {

stillDoOtherStuff(websocketData);}

@nacmarti

n


events: {‘bookUpdated’:‘update’,‘bookCreated’: ‘create’,‘bookDeleted’:‘delete’,

}

update: function(websocketData) {doStuff(websocketData);

},create: function(websocketData) {

doOtherStuff(websocketData);},delete: function(websocketData) {

stillDoOtherStuff(websocketData);}

FULL EVENT BASEDREAL TIME

@nacmarti

n


websocketData?

Who sends what?

Which port, which protocol?


Authenticate user againstPUSH server


sessionTokendomain



sessionTokendomain

RESTsessionToken

domain



sessionTokendomain

REST

rights

sessionTokendomain



REST

rights

sessionTokendomain

Authenticated!



PUSH: The «Classic» way

rights



RESTsessionToken

domain

rights



RESTsessionToken

domaindata

rights



RESTsessionToken

domaindata

websocketData

rights


• Slow: HTTP ajax round-trip

• !DRY: Double front processing (Ajax / Push)

• Push server complexity: authorizations


PUSH: The «Wisembly» way

RESTsessionToken

domaindata

websocketData

rights



RESTsessionToken

domain

websocketData

websocketData

rightssecret



RESTsessionToken

domain

websocketData

websocketData

websocketData

rightssecret



RESTsessionToken

domaindata

websocketData

websocketData

websocketData

rightssecret


Push «surprises»


Push «surprises»

• Must find always opened port


Push «surprises»


• Websocket protocol must go through firewalls


Push «surprises»


• Websocket protocol must go through firewalls

• Push may disconnect (very!) frequently and loose events (duh!)


• 80 always opened, but websocket very often blocked -> FAIL -> goto 443 w/ https


• 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)


The «Wisembly» way

hashN: { eventName, args }



hash1: { eventName, args }hash2: { eventName, args }

...hashN: { eventName, args }




hashN

hashN hashN



hashN: { eventName, args }...

hashN+M: { eventName, args }

hashN

hashM hashM





hashNRESTonReconect()since hashN

hashM hashM





hashNRESTonReconect()since hashN

hashN+1: { eventName, args }...


hashM hashM





RESTonReconect()since hashN

hashN+1: { eventName, args }...


hashM hashM

hashM


Great Ressources












http://wisembly.com/en/about#jobs

@guillaumepotier






Any Questions ?

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

Documents

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