Symfony2 And Single Webpage Applications using a framework like AngularJS

Question

(If this is not the right place to post this kind of question I'd happily post it somewhere else)

I'm trying to build an interactive web application to manage company resources. I have experience with Symfony2 but I kind of hit a wall with this new application.

I'd like to make this application quite interactive on the client side. Almost a full single webpage application. My previous web applications would normally just use a typical MVC pattern with CRUD pages.

In those simple applications I would have

/employees/
/employees/create
/employees/detail/45
/employees/update/45
/employees/delete/45

Using symfony in this kind of application would give me a lot of advantages:

• Routing
• Security (CSRF tokens)
• FormTypes and Form handling
• Validation
• Integration with Doctrine
• Twig

Especially functionality like this in Twig was very refreshing (since my models were build as Doctrine entities):

<p>{{ employee.getCurrentTask().description }}</p>

The problem I'm facing now is that I feel like Symfony2 isn't really build for single webpage applications. As soon as I try to add some Ajax functionality I'm faced with these problems:

• CSRF tokens invalid
• Too much non reusable view/presentation logic in jQuery
• Adding data-attributes in html to get id's etc...

I then looked into Knockout.js and Angularjs but then I feel like lose all of the advantages of Doctrine and Twig. I have to rebuild my models on the client side anyway and have to maintain them in two different locations then.

So I came up with this idea:

• Use Symfony2 models and controllers to persist data to the database but let controllers in symfony just send out JSON and receive JSON (FOSRestBundle maybe?)
• Use a framework like AngularJS or KnockoutJS to rebuild that JSON data on the client side to use 2-way binding.

But then how would I tackle the issues like Doctrine2 Relationships, Form Validation, CSRF which Symfony already solved but are unusable if I use a frontend js framework?

All suggestions are welcome!

Answer 1

Some words about JSON, Serialization and Models

Simon, I faced exactly the same questions and problems. First like ken already mentioned. You don't need to rebuild any model. Better use FosRestBundle and/or JMS Serializer. It turns you entities with relations into JSON objects. This objects are transferred via api to your frontend and you can work with them just like in twig, when you use angular.js like this

{[{ user.username }]}

is as same as in twig. But remember that you have to set custom brackets for angular because by default it uses the same as twig.

Routing

You talk of a single page application, so symfony's routing is kept on a low level to have few page refresh. Instead you have to use routing of your frontend framework, because I am only familiar with angular.js, I give an angular example:

app.config(function($routeProvider, $interpolateProvider) {

    //here you go, custom brackets
    $interpolateProvider.startSymbol('{[{');
    $interpolateProvider.endSymbol('}]}');

    $routeProvider.when('/user', {
        controller: UserController, 
        templateUrl: Routing.generate('suser_list')
    }).when('/ticket', {
        controller: TicketController, 
        templateUrl: Routing.generate('ticket_list')
    });
});

When you hit a link like

<a href="#/ticket">Go to tickets</a>

AngularJs will know which frontend controller to trigger. Pretty great stuff, without page reload. Also have a look at FosJSRoutingBundle. It allows you to generate symfony routes in javascript, I use them to link js controllers with html templates where data is pushed in.

FormTypes, Form handling, Validation

Well, when you use a frontend framework like angularjs, your symfony form types are pretty useless. But I am not sure. Remember data is pushed and pulled via api as json, I think this would be a hard job for form types to handle this kind of compexity.

For validation you can use angular's live validation or have you symfony's validation in the backend, no problem. It might be a good thing to use both, client and server side validation.

Twig

Twig is out of the race. All data is rendered on the client side, and not pre rendered on server side like with twig. But that is only the case if your application is really a single page application. Of course you can use twig, but it will only refresh if you reload the entire page.

Integration with Doctrine

You can still use doctrine in the backend. Do you have a specific question regarding doctrine and SPA?

Answer 2

You don't need to rebuild the model in client. I normally just create a service in angularjs that provides json data. Data manipulation still happens server side using ajax.

For forms that requires csrf, I normally just send the html rendered by twig via json. Or you can serialize $form->createView() with jms serializer. However you will need some client script to transform the json data to actual form controls.