Using require.js and Asynchronous Module Definition (AMD) possible in a Symfony2 project?

Question

I'm currently modernizing my workflow especially in the frontend part and started using require.js, qunit, backbone.js, underscore.js, etc. in some of my last project that didn't require a backend.

Coming from Symfony2 I'm used to normally write my templates in Twig and have Assetic make all the necessary magic like js/css minification, assets, etc. Research shows that Assetic isn't currently capable of serving javascript files the way require.js needs them.

Now I really like the idea behind RequireJS, Asynchronous Module Definition (AMD) and was wondering how I could profit from its awesomeness in a Symfony2 project. The most sensible approach imho would be to reduce the Symfony2 project to simply serve necessary data, e.g. by providing RESTful interfaces. This would furthermore result in a complete decoupled frontend <> backend that could be developed and tested more independently.

My question is: Wouldn't I lose some of the goodies Symfony2 gives me like the complete form handling (CSRF protection, validation, etc.) and security? Has anyone done this already and is able to share some insights? Are there some drawbacks/pitfalls to look for? And…is it worth it? ;-)

Answer 1

In my master twig template I defined (e.g. {% block js %}) the javascript section like this

<script type="text/javascript">
var config = {
    getCoreBundleName: function() {
        return 'openframeworkcore';
    },
    getPath: function(bundleName, filePath) {
        return bundleName + '/components/' + filePath;
    },
    getCorePath: function(filePath) {
        return this.getPath(this.getCoreBundleName(), filePath);
    }
};

require.config({
    baseUrl: '{{ app.request.getBasePath() }}/bundles/',
    paths: {
        core: 'openframeworkcore/core/js/core',
        bootstrap: config.getCorePath('bootstrap/dist/js/bootstrap')
    },
    shim: {
        bootstrap: {
            deps: ['jquery']
        },
        fancybox: {
            deps: ['jquery', 'jquery-mousewheel']
        },
        angular: {
            exports: 'angular'
        },
        restangular: {
            deps: ['underscore', 'angular']
        },
        'jquery-ui': {
            deps: ['jquery']
        }
    }
});

// loads the core.js
require(['core']);
</script>

Im my case I used restangular. A framework that extends angularjs with rest methods. But it only provides some helper method to communicate restful.

On the other hand you restangular work perfect together with Symfony2

/**
 * @Route("/create")
 * @Method({"GET"})
 * @Template()
 */
public function createAction(Request $request)
{
    $entityManager = $this->getDoctrine()->getManager();
    $form = $this->createForm(new BoardType());

    return array(
        'form' => $form->createView()
    );
}

I've already combine requirejs with Symfony2 For further question not hesitate to ask me.

Cheers