A Symfony Flex hybrid app sharing state object with Twig, React and Vue
NOTE: This is a port of the original app from Symfony 3 to Symfony Flex. Details in article: Porting a Symfony 3 application to Flex
This is a sample app that provides a working example concept of simply sharing a state object between the Twig template rendering engine as well as JavaScript view layers Vue and React.
This introduces no complexity of server side rendering for decent performance, but SSR can be done as an enhancement for improved performance and SEO: Introduction to React.js Components and Server Side Rendering in PHP, Testing React.js isomorphic rendering with php-v8js and the Symfony Microkernel
This will just handle the sharing of initial state on page load and you'll need to then take over your state management in your front end using some kind of tools for that, e.g. MobX, Redux. There is also a simple API backend that also returns the same object and keeps things predictable for developers.
The application comes complete with an SQLite database and built JavaScript clients to keep overhead of installation minimal. The application itself is simple enough to figure out with basic understanding of OO PHP and Symfony, so it's better just to take a look for yourself to see if this feels like a good idea or not.
Installation
Clone app:
$ git clone [email protected]:janit/symfony-hybrid-flex-port.git
Set local environment variables
$ cp .env.dist .env
Install dependencies:
$ composer install
Install front end build tools (You'll need to have Node, NPM and Yarn installed)
$ yarn
Build Stylesheets and the TypeScript app with Symfony Encore:
$ yarn run encore production
Run:
$ ./bin/console server:run
Open app in browser: http://localhost:8000
Docker installation
There is a Docker-compose setup included that runs PHP-FPM and Nginx web server. It is based on this example from Kevin Dunglas and was used for some PHP 7.1 vs 7.2 benchmarks.
Currently the installation requires that you build the front end assets with Symfony Encore manually, but once this is done you should be able to boot the environment with Docker Compose:
$ docker-compose up
The app will be available at http://localhost:8086
GraphQL API
In an update to the application there was an addition to the application that provides support for a GraphQL API using the Overblog GraphQL bundle.
In development mode the GraphiQL client is available in the URL http://localhost:8000/graphiql and there are two endpoints created:
- apartment(id: Int): Apartment
- apartment_list(limit: Int): ApartmentList
You can learn more about the process of adding GraphQL in this article: Adding a GraphQL API to your Symfony Flex application
JavaScript builds
There are three separate client implementations included, React, Vue.js and Vanilla JavaScript (via TypeScript). If you want to try modifications to the behaviour of the clients you'll need to do some build setup:
Vue.js
No Vue there is build process, just start editing src/AppBundle/Resources/public/js/vue/app.js. Note that example uses some the ES6+ syntax is not supported natively everywhere, so you'll need an up-to-date browser.
React
The React app is built using nwb, a fast way to get started with contemporary (as of February 2017) JavaScript builds.
Install nwb globally:
$ npm install -g nwb
Enter directory and run build:
$ cd src/AppBundle/Resources/public/js/react
$ react build app.js
The built filename changes by default, so unless you tweak config, you'll need to edit app/Resources/views/base.html.twig to the current one.
JavaScript / TypeScript
The vanilla JavaScript app is written in TypeScript, which adds type information and some other syntax on top of the JavaScript language.
The build of the TypeScript app is now done using Symfony Encore. You can use the dev mode with watch for automatic builds when developing:
$ ./node_modules/.bin/encore dev --watch
Note: You can also use Encore to run Webpack dev server for live reloads, etc. More information in the Symfony documentation: Using webpack-dev-server and HMR