Plugin Development in Shopware 6

We would like to give you an overview of the plugin development and provide you with a behind-the-scenes look how Shopware 6 works.

Transcript

1. @klarstil @last__sgt Shopware 6 Plugin Development @klarstil @last__sgt - Sebastian Seggewiß & Stephan Pohl -
2. Quick start in 5 minutes @klarstil From zero to hero @last__sgt
3. @klarstil First let’s create your plugin @last__sgt
4. @klarstil Take a look at your auto generated config @last__sgt
5. @klarstil A little template adjustment and… @last__sgt
6. @klarstil Your first plugin is done! @last__sgt
7. And what it does for you… @klarstil Our brand new plugin system @last__sgt
8. @last__sgt Plugin system facts you need to know - Changelogs are in a simple markdown structure - Uses the same database migrations as the core - Plugin config for easy configurations in the administration - Versioning is driven by Composer @klarstil Extensibility Stability Performance DX
9. @klarstil @last__sgt ...but what is a plugin? - Symfony bundle with lifecycle functionality (install, uninstall, activate, deactivate) - composer.json for versioning and meta data - PluginBaseClass as the entry point for your extension
10. Technology stack @klarstil @last__sgt Well-established standards
11. @klarstil @last__sgt Symfony Vue.js Twig FlySystem Enqueue ES6 JavaScript Webpack Bootstrap Swagger SCSS JWT
12. @klarstil @last__sgt Serverside aka Symfony - 99 console commands ready-to-use - Controllers for our API actions - EventDispatcher driven EventSystem - DependencyInjection out-of-the box - Cart process chain uses tagged services
13. Data flow through the application @klarstil @last__sgt Data handling and how it works
14. @klarstil Data e.g. Product EntityDefinition Entity EntityCollection @last__sgt Data flow through the application
15. @klarstil @last__sgt EntityDefinition EntityRepository API Data flow through the application
16. @klarstil @last__sgt Repository SearchResult EntityDefinition Factory Entity Vue.js Component Save entity Request Changeset Generator Payload API Server Administration Data flow through the application
17. @klarstil @last__sgt Sophisticated data handling - Entity scheme generated based on the defined server side entities - Automatic generation of repositories and entities - Changeset generator to minimize the payload - OpenAPI compatible format - Resolves associations between entities out-of-the box
18. Administration - the big picture @klarstil @last__sgt Shopware Vue.js
19. @klarstil @last__sgt Module system - Registration of module specific snippets out-of-the-box - Color-coded routing system & icon for your module by definition - Define routes & child routes as well as support for route middleware - Definition of a navigation entry into the main menu
20. @klarstil @last__sgt Module Routes Page component Vue.js Components Child Routes <router-view> component View component Routing & components handling General Component handling Client-side routing
21. @klarstil @last__sgt Component system - Register, extend & override components - 230 pre-defined components ready to use - Access the entire application using the third-party interface - Built-in dependency injection combined with Vue.js' "inject & provide" pattern
22. ...it's more than just a website @klarstil @last__sgt
23. @klarstil @last__sgt app Order Module Product Module Settings Module Customer Module CMS Module Media Module Login Module Vue.js Adapter Initializers Decorators Filters General Snippets Mixins Components Assets Icons General Routes Vue.js Plugins Data Layer Factories Dependency injection Workers core module Category Module Dashboard Module Helper
24. A closer look on the Storefront @klarstil @last__sgt
25. @last__sgt @klarstil A closer look on the Storefront - Using well-defined standards like Symfony, Twig & Bootstrap - Vanilla ES6 JavaScript plugins (jQuery optional) - Pre-processing using Webpack, SCSS & Autoprefixr - Hot-module reloading for a great DX
26. @klarstil Let's create your very own theme @last__sgt
27. @klarstil Changing SCSS variables... @last__sgt
28. @klarstil ...voilá, done! @last__sgt
29. If you don’t like it - change it! @klarstil @last__sgt Be that person
30. @klarstil @last__sgt Other things you can do - Extend the cart behavior by writing your own CartCollector & Processor - Implement your own payment method - Add filters to the storefront listing page - ...and much more!
31. Thank you, time for your questions! @klarstil @last__sgt Keep being awesome