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.
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
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
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
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
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
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
