In the future we want to offer a complete new experience for the shop administration. Every user has to do very individual tasks to keep an online shop up and running. Therefore the administration panel must be very intuitive to fit every users needs. It should support your daily work so you can concentrate on the important things. Currently we are prototyping with new technologies to create a future-proof platform for a new shop administration.
After we gathered your valuable feedback at the official #MeetNext event we used the chance to update this document with the latest information which were also introduced at the event. In the coming weeks we will process all your feedback and will update this document if necessary.
Currently we are working on a concept for the data handling on the client side. We want the data logic to be completely separated from the view layer. On the other hand the data handling has also to fit the usability so that the user has a good understanding of when data is saved etc.
We want to give you a short overview of our technological goals we want to achieve with the new administration.
For the client-side rendering and routing we decided to use the Vue.js framework. We think it combines the best of all worlds, for example the component based structure and the fast stateful rendering. It combines many good concepts of other popular frameworks. Check out the detailed guides and documentation on the official website.
For the business and data logic we created a service layer. The communication with the new api is done by different api services which can perform the typical CRUD operations. These services are used by the so called repositories which hold the business logic. The repositories can directly be used as mixins in Vue.js to get instant access to the data. All the data from a repository is automatically available in the data binding of your component so you can start using it in your template right away.
The api services are using the HTTP client to communicate with the api. Here we are using axios.js which is a lightweight tool to handle HTTP requests.
For the state and event management we are still in the concept phase. The solution will also depend on the usability concept. Possible solutions could be a flux model for the state handling and a global event bus.
A big challenge in Shopware still is the multi-level inheritance system where plugins can extend or override different parts of a template or the logic of a component in arbitrary manner. The possibility that more than one plugin can make changes in the same part of the application brings in a very high level of complexity. As we decided to dispense the server-side PHP process for the administration we had to find a capable solution for this on the client-side. The range of possible solutions is not very wide and we do not want to bend around the Vue.js framework either.
To avoid race conditions and keep the template inheritance logic away from the rendering we decided to create a bootstrapping process which collects all extensions and overrides before they get served to the rendering. Therefore we created the ComponentFactory which holds all registered components and their changes. After the initial bootstrapping process is completed the factory delivers the processed components to a view adapter which prepares the components for the rendering framework.
We use LESS as the CSS preprocessor because again it is the same technology we are already using in the storefront. But this is just our choice for the core. In your plugins you will serve the styling always as compiled CSS so it doesn't matter which technology you want to use to achieve this. As you have Webpack at hand you can use all common technologies for preprocessing.
Our product design team will develop a new design system for the administration. All components will be created from this new design system. For the logical structure we decided to orientate towards the Atomic Design principle by Brad Frost. In our opinion the principle suits the concept of "composing with components" very well so the design system will go hand in hand with the technological solution of the Vue.js framework.
It will be possible to easily create new modules for the administration by creating a
manifest.js file which defines the important information of a module. Next to navigation entries, search commands and keyboard shortcuts you define new routes for the different views of a module. These routes are the entry points to the module and will render the corresponding page components, which define the largest type of component in the atomic design hierarchy. So the different views of a module are build by page components existing of other components from the core library or your own custom components.
So the main entry point where the data and business logic takes place is a repository. The repository will use the corresponding api service to gather data for a specific entity type from the api. The repository will then wrap the data struct in a thin data proxy which will be used for all actions on that data. The proxy is just a small wrapper around the data providing some fancy background magic. To the outside the proxy exposes just a simple object containing the data which can be passed directly to the data binding. The reactive data binding then can change the data inside the proxy accordingly. The proxy itself can create simple changesets which can be directly used to send them back to the api to update entities with a patch request.
The nice thing about the repositories is, that you can use them as a mixin in your Vue.js components, which will already provide the complete data binding of the corresponding entity. So you can directly jump into your template an use the data. No extending of models or entity fields needed. When you want to implement your own business logic you can override single methods of the mixin directly in your component. For advanced control you can also use the api service directly to perform your own requests. All services are available via the dependency injection of the Vue.js framework.
The usage of Webpack and the Vue.js framework offers very helpful tooling for developers which can facilitate your daily work.
For developing you can spawn a dev-server right from your CLI. This will also start a file watcher which will update the page directly when you make any changes. The nice thing about this is, that the application will keep its state also after refreshing. So you automatically stay at the same place where you're working at. The watcher also offers automatic linting using ESLint and will show a nice overlay with helpful error messages.
The Vue.js framework offers a nice extension for the chrome developer console. Here you have a reference to the original component structure and can inspect each component to get live information about its state, events and several other information. This can be a really helpful tool during development.
We're using Webpack to bundle all the parts of the administration interface into one handy bundled file for deployment but that's not all. We're using it to expose parts of the application into the global scope to provide an unified interface to interact with the application on the beginner user level. The style definition is written in LESS which will be transformed to plain CSS using Webpack too.
Please keep in mind that Webpack is only used as a tool for development. The application for the administration gets build and is delivered as one complete package. No compiling or build process is necessary in a normal installation of Shopware.
Now it's your turn to check out the current development state. We published a branch on GitHub which contains all the changes regarding our research topics.