Symfony on steroids

Vue.js, Mercure, Panther
symfonycon.les-tilleuls.coop @dunglas
Kévin Dunglas
❏ Les-Tilleuls.coop’s Founder
❏ Symfony Core Team

Panther, Serializer, WebLink, PropertyInfo, autowiring…
❏ API Platform and Mercure creator
@dunglas
symfonycon.les-tilleuls.coop @dunglas
✍ Self-managed since 2011
35 people, 1,000% in 6 years
👷 ➡ jobs@les-tilleuls.coop
symfonycon.les-tilleuls.coop @dunglas
symfonycon.les-tilleuls.coop @dunglas
Agenda
A joind.in clone in 40 minutes?
1. A modern Symfony app (MakerBundle, Doctrine)
2. Integrating Vue.js (Encore, API Platform)
3. UI Testing (Panther)
4. Real time update (Mercure)
symfonycon.les-tilleuls.coop
Our final app: try it now!
symfonycon.les-tilleuls.coop @dunglas
MakerBundle FTW!
A modern Symfony app
symfonycon.les-tilleuls.coop @dunglas
Install the Website Skeleton
Symfony full stack (SF + Twig + Doctrine)
symfonycon.les-tilleuls.coop @dunglas
MakerBundle
❏ Code scaffolding
❏ Entities
❏ Controllers
❏ Forms and CRUD
❏ Users and security (auth, voter)
❏ Tests
❏ Commands
symfonycon.les-tilleuls.coop @dunglas
Updating the DB, creating a controller
symfonycon.les-tilleuls.coop @dunglas
The controller
symfonycon.les-tilleuls.coop @dunglas
Twig template: a partial
Twig Templates
symfonycon.les-tilleuls.coop @dunglas
Our basic website is ready, thanks MakerBundle!
symfonycon.les-tilleuls.coop @dunglas
A better UX thanks to Encore and API Platform
Integrating Vue.js
symfonycon.les-tilleuls.coop @dunglas
A modern feedback system
❏ Rate a talk, using a star based selector
❏ Post a comment
❏ No page reload, rich form, no form component
❏ Server-side: hypermedia API
❏ Client-side: web component (in JS)
symfonycon.les-tilleuls.coop @dunglas
Install API Platform
symfonycon.les-tilleuls.coop @dunglas
Tweaking the API
symfonycon.les-tilleuls.coop @dunglas
Vue.js
❏ Progressive framework for building interfaces
❏ Designed to be incrementally adoptable
❏ Focused on the view layer
❏ Can also power Single-Page Applications
symfonycon.les-tilleuls.coop @dunglas
Install Symfony Encore
symfonycon.les-tilleuls.coop @dunglasJoke stolen from @iamdevloper
You just installed 600+ packages,

welcome to the JS world 😉
symfonycon.les-tilleuls.coop @dunglas
Enable Vue, register our component
symfonycon.les-tilleuls.coop @dunglas
symfonycon.les-tilleuls.coop @dunglas
A Vue component
notation :

notation @

v-model
The View
The ViewModel
symfonycon.les-tilleuls.coop @dunglas
Loading the Vue component in Twig
symfonycon.les-tilleuls.coop @dunglas
Panther: the new feline on the block
😺end-2-end testing
symfonycon.les-tilleuls.coop @dunglas
symfonycon.les-tilleuls.coop @dunglas
Symfony Panther: an E2E testing tool
❏ Executes real web browsers (Chrome by default)
❏ Supports JavaScript, CSS, DOM…
❏ Uses the W3C WebDriver Protocol
❏ Implements the APIs of
❏ Symfony BrowserKit (you already know it!)
❏ Facebook’s PHP WebDriver
❏ Provide some extra methods:
❏ wait, execute JS, screenshot, click…
❏ Standalone lib, for testing and web scraping
symfonycon.les-tilleuls.coop @dunglas
Symfony Panther: developer-friendly
❏ Nothing to install (except Panther)
❏ Nothing to configure
❏ neither Selenium,
❏ nor a web server
❏ Panther just works!
symfonycon.les-tilleuls.coop @dunglas
Populating the database with Alice Fixtures
symfonycon.les-tilleuls.coop @dunglas
The Panther test
symfonycon.les-tilleuls.coop @dunglas
The JavaScript is executed!
symfonycon.les-tilleuls.coop @dunglas
As well as HTTP requests, you can even take screenshots!
symfonycon.les-tilleuls.coop @dunglas
The screenshot 📸, by Panther
symfonycon.les-tilleuls.coop @dunglas
Introducing the Mercure protocol
Real Time
symfonycon.les-tilleuls.coop
symfonycon.les-tilleuls.coop @dunglas
symfonycon.les-tilleuls.coop @dunglas
symfonycon.les-tilleuls.coop @dunglas
Installing MercureBundle
symfonycon.les-tilleuls.coop @dunglas
The API
symfonycon.les-tilleuls.coop @dunglas
symfonycon.les-tilleuls.coop @dunglas
The ViewModel
Subscribing to real time events
symfonycon.les-tilleuls.coop @dunglas
The missing parts
❏ Validation
❏ automated in 4.3? symfony/symfony#27735
❏ User and authentication
❏ make:user, make:auth (no FOSUserBundle please!)
❏ API Platform access control
❏ Deployment
❏ SymfonyCloud: symfony deploy 😻
❏ Managed Mercure.rocks (alpha)
symfonycon.les-tilleuls.coop @dunglas
One step further
❏ Admin SPA, for free
❏ api-platform.com/docs/admin
❏ Vue or React SPA, or native app, for free
❏ api-platform.com/docs/client-generator/vuejs/
We can help you!
symfonycon.les-tilleuls.coop @dunglas
Thanks! Any questions?

Symfony on steroids
: Vue.js, Mercure, Panther