1.
Progressively enhance
your Symfony 4 app

2.
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

3.
symfonycon.les-tilleuls.coop @dunglas
✍ Self-managed since 2011
35 people, 1,000% in 6 years
👷 ➡ jobs@les-tilleuls.coop

4.
symfonycon.les-tilleuls.coop @dunglas

5.
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)

6.
symfonycon.les-tilleuls.coop
Our final app: try it now!

7.
symfonycon.les-tilleuls.coop @dunglas
MakerBundle FTW!
A modern Symfony app

8.
symfonycon.les-tilleuls.coop @dunglas
Install the Website Skeleton
Symfony full stack (SF + Twig + Doctrine)

9.
symfonycon.les-tilleuls.coop @dunglas
MakerBundle
❏ Code scaffolding
❏ Entities
❏ Controllers
❏ Forms and CRUD
❏ Users and security (auth, voter)
❏ Tests
❏ Commands

10.
symfonycon.les-tilleuls.coop @dunglas
Updating the DB, creating a controller

11.
symfonycon.les-tilleuls.coop @dunglas
The controller

12.
symfonycon.les-tilleuls.coop @dunglas
Twig template: a partial

13.
Twig templates

14.
symfonycon.les-tilleuls.coop @dunglas
Our basic website is ready, thanks MakerBundle!

15.
symfonycon.les-tilleuls.coop @dunglas
A better UX thanks to Encore and API Platform
Integrating Vue.js

16.
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)

17.
symfonycon.les-tilleuls.coop @dunglas
Install API Platform

18.
symfonycon.les-tilleuls.coop @dunglas
Tweaking the API

19.
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

20.
symfonycon.les-tilleuls.coop @dunglas
Install Symfony Encore

21.
symfonycon.les-tilleuls.coop @dunglasJoke stolen from @iamdevloper
You just installed 600+ packages,
welcome to the JS world 😉

22.
symfonycon.les-tilleuls.coop @dunglas
Enable Vue, register our component

23.
symfonycon.les-tilleuls.coop @dunglas

24.
symfonycon.les-tilleuls.coop @dunglas
A Vue component

25.
notation :
notation @
v-model
The View

26.
The ViewModel

27.
symfonycon.les-tilleuls.coop @dunglas
Loading the Vue component in Twig

28.
symfonycon.les-tilleuls.coop @dunglas
Panther: the new feline on the block
😺end-2-end testing

29.
symfonycon.les-tilleuls.coop @dunglas

30.
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

31.
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!

32.
symfonycon.les-tilleuls.coop @dunglas
Populating the database with Alice Fixtures

33.
symfonycon.les-tilleuls.coop @dunglas
The Panther test

34.
symfonycon.les-tilleuls.coop @dunglas
The JavaScript is executed!

35.
symfonycon.les-tilleuls.coop @dunglas
As well as HTTP requests, you can even take screenshots!

36.
symfonycon.les-tilleuls.coop @dunglas
The screenshot 📸, by Panther

37.
symfonycon.les-tilleuls.coop @dunglas
Introducing the Mercure protocol
Real Time

38.
symfonycon.les-tilleuls.coop

39.
symfonycon.les-tilleuls.coop @dunglas

40.
symfonycon.les-tilleuls.coop @dunglas

41.
symfonycon.les-tilleuls.coop @dunglas
Installing MercureBundle

42.
symfonycon.les-tilleuls.coop @dunglas
The API

43.
symfonycon.les-tilleuls.coop @dunglas

44.
symfonycon.les-tilleuls.coop @dunglas

45.
The ViewModel

46.
Subscribing to real time events

47.
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)

48.
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!

49.
symfonycon.les-tilleuls.coop @dunglas
Thanks! Any question?