Symfony is not dead, thanks to VueJS
Few years ago, Laravel did the choice to use VueJS as its frontend language. And it was a great idea. Symfony, in the other side, never changed its mind and keep the PHP for everything. For me that sound like the death of this framework.
Why ?
Just because nowadays, who write Javascript (ES5) ? most of the companies i worked with, has already moved to ES6+, and some already use a full JS frontend. So Symfony was no more in the move. It was hard to use a Js framework with Symfony2+. And if you tryed to do so, you were quickly faced to limitation : hard to use the cli from the JS framework to use the dev server with the asset management of Symfony. So you never benefits from page reload when the assets are modified, nor the Hot Module Replacement which increase your productivity.
But Symfony has changed ! Yes, they did it.
They started a project named ‘Encore’. The aim is to simplify the usage of webpack and to integrate finely the asset management with Symfony. Some will clame that Encore will have limitation but if you want to compile SASS or LESS, and also Typescript or components from React or Vue, then it’s rather cool.
I was not sure it worked well, so i give it a try with Symfony 3.3 and Flex (waiting the Sf4.0 at the end of november).
composer create-project symfony/skeleton sf-flex-encore-vuejs
cd sf-flex-encore-vuejs
composer req encore annotations twig api profiler log
yarn add vue vue-router quasar-framework quasar-extras
yarn add --dev vue-loader vue-template-compiler vue-router babel-preset-es2017 sass-loader node-sass bootstrap@4.0.0-beta.2
yarn installI just did a simple application with 4 routes. The first 2 will just render some text. The idea was to write one Controller which doesn’t extends anything, so you can use it like you did with Silex (a dead micro-framework from sensio, the producer of Symfony), and one which extends the Symfony Controller and give you access to the Dependancy Injection (even if you can access it even in simple controller, just with auto wiring your services). The 2 others routes was to demonstrate that you can easily create a vuejs application (from scratch or from quasar framework) and use Symfony to deliver it.
‘Encore’ allows you to use a manifest.json (built with npm command declared in the package.json file) and then let you choose between building your asset from scratch, or using an asset server with Hot Module Replacement (only for vuejs).
# in the config/packages/framework.yaml
framework:
# feature is supported in Symfony 3.3 and higher : used by encore for example with npm run dev-server command
json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'// start the asset server
npm run dev-server-hot// start the web application server
php -S 127.0.0.1:80 -t public// open a browser on localhost/demo/vuejs
// modify a JS from the /assets/js/vuejs/components folder and look at the Hot Module Replacement
For sure, there must be some limitations, but this is a good job from Sensio’s team. If you want to build Angular2/4/5 application, there is no loader… So you will have to write one, and share it with the community ;-) But There is a React and VueJS Loader which will increase your productivity.
Here is the sample project (https://github.com/Rebolon/php-sf-flex-webpack-encore-vuejs). Read the README.md to run the app and understand how everything works. It also explain how to build your own stack with each composer and npm command i ran.
I will update the project adding a post route with vuejs/quasar forms. I’ll try to find a good way of managing CSRF token. If you have any clue for CSRF token with Single Page Application, you can comment this article !
