Download as PDF, PPTX
Uploaded byLes-Tilleuls.coop
Symfony on steroids : Vue.js, Mercure, Panther
The document outlines a presentation on building modern applications using Symfony, Vue.js, Mercure, and Panther, showcasing how to create a joind.in clone within 40 minutes. It covers essential topics such as app structure, UI testing, real-time updates, and database interactions, emphasizing the ease of integrating various tools and frameworks. The presentation aims to provide developers with the necessary knowledge to leverage these technologies effectively in their projects.
More Related Content
Similar to Symfony on steroids : Vue.js, Mercure, Panther
Symfony on steroids : Vue.js, Mercure, Panther
- 1. Symfony on steroids Vue.js,Mercure, Panther
- 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-managedsince 2011 35 people, 1,000% in 6 years 👷 ➡ jobs@les-tilleuls.coop
- 4.
- 5. symfonycon.les-tilleuls.coop @dunglas Agenda A joind.inclone 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! Amodern Symfony app
- 8. symfonycon.les-tilleuls.coop @dunglas Install theWebsite Skeleton Symfony full stack (SF + Twig + Doctrine)
- 9. symfonycon.les-tilleuls.coop @dunglas MakerBundle ❏ Codescaffolding ❏ Entities ❏ Controllers ❏ Forms and CRUD ❏ Users and security (auth, voter) ❏ Tests ❏ Commands
- 12. symfonycon.les-tilleuls.coop @dunglas Updating theDB, creating a controller
- 13.
- 14.
- 15.
- 16. symfonycon.les-tilleuls.coop @dunglas Our basicwebsite is ready, thanks MakerBundle!
- 17. symfonycon.les-tilleuls.coop @dunglas A betterUX thanks to Encore and API Platform Integrating Vue.js
- 19. symfonycon.les-tilleuls.coop @dunglas A modernfeedback 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)
- 21.
- 23.
- 25. symfonycon.les-tilleuls.coop @dunglas Vue.js ❏ Progressiveframework for building interfaces ❏ Designed to be incrementally adoptable ❏ Focused on the view layer ❏ Can also power Single-Page Applications
- 26.
- 27. symfonycon.les-tilleuls.coop @dunglasJoke stolenfrom @iamdevloper You just installed 600+ packages, welcome to the JS world 😉
- 28. symfonycon.les-tilleuls.coop @dunglas Enable Vue,register our component
- 29.
- 30.
- 31.
- 32.
- 33. symfonycon.les-tilleuls.coop @dunglas Loading theVue component in Twig
- 35. symfonycon.les-tilleuls.coop @dunglas Panther: thenew feline on the block 😺end-2-end testing
- 36.
- 37. 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
- 38. 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!
- 39. symfonycon.les-tilleuls.coop @dunglas Populating thedatabase with Alice Fixtures
- 40.
- 41.
- 42. symfonycon.les-tilleuls.coop @dunglas As wellas HTTP requests, you can even take screenshots!
- 43. symfonycon.les-tilleuls.coop @dunglas The screenshot📸, by Panther
- 44. symfonycon.les-tilleuls.coop @dunglas Introducing theMercure protocol Real Time
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53. Subscribing to realtime events
- 54. symfonycon.les-tilleuls.coop @dunglas The missingparts ❏ 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)
- 55. symfonycon.les-tilleuls.coop @dunglas One stepfurther ❏ 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!
- 56.