Successfully reported this slideshow.
Your SlideShare is downloading. ×

Development Journey of the Shopware Administration

Ad

Development journey of the Shopware Administration
@klarstil

Ad

@klarstil

Ad

@klarstil
Extensibility
Easy-to-use data handling
Maintainability
DX
What was the goal of the admin panel?
- Extensibility...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
Mule any pointstudio
Mule any pointstudio
Loading in …3
×

Check these out next

1 of 26 Ad
1 of 26 Ad

Development Journey of the Shopware Administration

Download to read offline

Stephan Pohl is a core developer at Shopware, Javascript enthusiast and as such, involved in the entire development and conception of the Shopware 6 administration panel. At Reacticon, he'll show you a development journey of the administration panel, the issues they faced and how they tackled them.

Stephan Pohl is a core developer at Shopware, Javascript enthusiast and as such, involved in the entire development and conception of the Shopware 6 administration panel. At Reacticon, he'll show you a development journey of the administration panel, the issues they faced and how they tackled them.

More Related Content

Development Journey of the Shopware Administration

  1. 1. Development journey of the Shopware Administration @klarstil
  2. 2. @klarstil
  3. 3. @klarstil Extensibility Easy-to-use data handling Maintainability DX What was the goal of the admin panel? - Extensibility - every part should be customizable by third- party developers - Easy-to-use data handling - no need to define models on the client, no additional overhead for developers - Great DX and a flat learning curve - Maintainability - tech stack has to work >5 years
  4. 4. @klarstil VueX Vue.js Twig.js lodash Autoprefixr uuid Webpack Vue Router Axios SCSS Symfony
  5. 5. @klarstil ModuleShopware
  6. 6. Extensibility @klarstil
  7. 7. @klarstil Extensibility in detail - Ability to extend & override components - Component template needs to be extensible too - Components need to access services, the data handling & helpers - Ability to inject routes in an existing module - Extensions needed to be injected into the application without compiling on production systems
  8. 8. @klarstil 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
  9. 9. @klarstil Templating system - Component templates are written in Twig syntax - Twig in the storefront & administration = flat learning curve - Partial overrides / extends are possible with {% block %} & {% parent %} - Data rendering is entirely Vue.js based - Vue.js with Runtime & Compiler with Twig.js for template compiling
  10. 10. @klarstil Extending component logic & template
  11. 11. @klarstil
  12. 12. @klarstil Module system - Translations can be registered independently per module - Color-coded UX system & icon for your module - Define routes & child routes as well as support for route middleware - Definition of a navigation entry for the main menu
  13. 13. @klarstil Injecting routes into an existing module - Middleware pattern known from frameworks like Express.js - Ability to add new child routes or replace existing routes - Allows to have a flexible way to intersect the registration process - Built on top of Vue Router
  14. 14. @klarstil Third-party interface & dependency injection - Provides access to all parts of the application from every components - Extensions can register their own services - Services can be decorated and providing middleware hooks - IoC DI built on top of Bottle.js
  15. 15. @klarstil Webpack Building Pipeline - PHP process provides list of installed extensions as a JSON file - Custom Webpack plugin injector adds extensions to the core Webpack configuration - Global third-party interface prevents bundling the same dependency twice - Ability to extend the Webpack configuration to add extension specific dependencies - Extensions getting bundled and will be injected at runtime in the bootstrapping
  16. 16. Data handling @klarstil
  17. 17. @klarstil 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 - You define the data and associations you would like to use
  18. 18. @klarstil Repository SearchResult EntityDefinition Factory Entity Vue.js ComponentSave entity Request Changeset GeneratorPayload API Server Administration Data flow through the application
  19. 19. @klarstil Define the data you want - Criteria system - Repository factory which provides all endpoint to all registered entities in the system - Criteria system which allows filtering and sorting - Associations can be loaded right away - Automatic mapping of errors to a VueX store for save requests
  20. 20. Maintainability @klarstil
  21. 21. @klarstil Credits: https://qz.com/646467/how-one-programmer-broke-the-internet-by-deleting-a-tiny-piece-of-code/ https://www.zdnet.com/article/another-one-line-npm-package-breaks-the-javascript-ecosystem/
  22. 22. Why is NPM a risk factor? - Our software stack has to work for >5 years - You never know if a package is getting abandoned - API changes / breaks of a package imply refactoring of your code base - Not every package is following semantic versioning @klarstilCredits: https://commons.wikimedia.org/wiki/File:Npm-logo.svg
  23. 23. Thin layer / wrapper pattern - Wrapping third-party dependencies in factories / helpers - We're defining the public API for the application code - Everything below the thin layer can be refactored without breaks - Packages can be switched out @klarstil
  24. 24. ...it's more than just a website @klarstil
  25. 25. @klarstil 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 ModuleHelper
  26. 26. Thank you! Questions? @klarstil https://www.shopware.com/en/ https://docs.shopware.com/

×