current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 15 down vote favorite
14

(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!

share|improve this question

2 Answers 2

up vote 17 down vote accepted

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?

share|improve this answer
    
Just want to share that you can still use FormType just fine with no issue at all. When you receive data from REST request it can be parsed and then acts just like any other form submit. – mr1031011 Sep 25 '14 at 12:14
up vote 2 down vote

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.

share|improve this answer
    
Thanks for your input! But then you wouldn't be able to use all the magic that docs.angularjs.org/api/ngResource.$resource provides? – Simon Apr 11 '13 at 8:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.