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.

1. Development journey of the Shopware Administration
@klarstil

2. @klarstil

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. @klarstil
VueX
Vue.js
Twig.js
lodash
Autoprefixr
uuid
Webpack
Vue Router
Axios
SCSS
Symfony

5. @klarstil
ModuleShopware

6. Extensibility
@klarstil

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. @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. @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. @klarstil
Extending component logic & template

11. @klarstil

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. @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. @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. @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. Data handling
@klarstil

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. @klarstil
Repository SearchResult
EntityDefinition
Factory
Entity
Vue.js ComponentSave entity
Request
Changeset
GeneratorPayload
API
Server Administration
Data flow through the application

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. Maintainability
@klarstil

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. 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. 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. ...it's more than just a website
@klarstil

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. Thank you! Questions?
@klarstil
https://www.shopware.com/en/
https://docs.shopware.com/