Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and Panther
7 likes43,624 views
The document outlines a presentation on enhancing a Symfony 4 application using tools like MakerBundle, Vue.js, Panther, and Mercure. It discusses the integration of these technologies to create a modern app, including features like real-time updates and UI testing. The session concludes with resources and support for building and deploying the application.
Progressively enhance your Symfony 4 app using Vue, API Platform, Mercure and Panther
- 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 👷 ➡ [email protected]
- 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
- 11. symfonycon.les-tilleuls.coop @dunglas Updating the DB, creating a controller
- 13. symfonycon.les-tilleuls.coop @dunglas Twig template: a partial
- 14. Twig templates
- 15. symfonycon.les-tilleuls.coop @dunglas Our basic website is ready, thanks MakerBundle!
- 17. symfonycon.les-tilleuls.coop @dunglas A better UX thanks to Encore and API Platform Integrating Vue.js
- 18. 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)
- 20. symfonycon.les-tilleuls.coop @dunglas Install API Platform
- 24. 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
- 26. symfonycon.les-tilleuls.coop @dunglasJoke stolen from @iamdevloper You just installed 600+ packages, welcome to the JS world 😉
- 27. symfonycon.les-tilleuls.coop @dunglas Enable Vue, register our component
- 29. symfonycon.les-tilleuls.coop @dunglas A Vue component
- 30. notation : notation @ v-model The View
- 31. The ViewModel
- 32. symfonycon.les-tilleuls.coop @dunglas Loading the Vue component in Twig
- 34. symfonycon.les-tilleuls.coop @dunglas Panther: the new feline on the block 😺end-2-end testing
- 36. 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
- 37. 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!
- 38. symfonycon.les-tilleuls.coop @dunglas Populating the database with Alice Fixtures
- 40. symfonycon.les-tilleuls.coop @dunglas The JavaScript is executed!
- 41. symfonycon.les-tilleuls.coop @dunglas As well as HTTP requests, you can even take screenshots!
- 42. symfonycon.les-tilleuls.coop @dunglas The screenshot 📸, by Panther
- 43. symfonycon.les-tilleuls.coop @dunglas Introducing the Mercure protocol Real Time
- 51. The ViewModel
- 52. Subscribing to real time events
- 53. 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)
- 54. 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!
- 55. symfonycon.les-tilleuls.coop @dunglas Thanks! Any question?