Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Development journey of the Shopware Administration
@klarstil
@klarstil
@klarstil
Extensibility
Easy-to-use data handling
Maintainability
DX
What was the goal of the admin panel?
- Extensibility...
@klarstil
VueX
Vue.js
Twig.js
lodash
Autoprefixr
uuid
Webpack
Vue Router
Axios
SCSS
Symfony
@klarstil
ModuleShopware
Extensibility
@klarstil
@klarstil
Extensibility in detail
- Ability to extend & override components
- Component template needs to be extensible to...
@klarstil
Component system
- Register, extend & override components
- 230 pre-defined components ready to use
- Access the ...
@klarstil
Templating system
- Component templates are written in Twig syntax
- Twig in the storefront & administration = fl...
@klarstil
Extending component logic & template
@klarstil
@klarstil
Module system
- Translations can be registered independently per module
- Color-coded UX system & icon for your ...
@klarstil
Injecting routes into an existing module
- Middleware pattern known from frameworks like Express.js
- Ability to...
@klarstil
Third-party interface & dependency injection
- Provides access to all parts of the application from every compon...
@klarstil
Webpack Building Pipeline
- PHP process provides list of installed extensions as a JSON file
- Custom Webpack plu...
Data handling
@klarstil
@klarstil
Sophisticated data handling
- Entity scheme generated based on the defined server side entities
- Automatic gener...
@klarstil
Repository SearchResult
EntityDefinition
Factory
Entity
Vue.js ComponentSave entity
Request
Changeset
GeneratorPa...
@klarstil
Define the data you want - Criteria system
- Repository factory which provides all endpoint to all registered
ent...
Maintainability
@klarstil
@klarstil
Credits: https://qz.com/646467/how-one-programmer-broke-the-internet-by-deleting-a-tiny-piece-of-code/
https://w...
Why is NPM a risk factor?
- Our software stack has to work for >5 years
- You never know if a package is getting abandoned...
Thin layer / wrapper pattern
- Wrapping third-party dependencies in factories / helpers
- We're defining the public API for...
...it's more than just a website
@klarstil
@klarstil
app
Order Module
Product Module
Settings Module
Customer Module
CMS Module
Media Module
Login Module
Vue.js Adap...
Thank you! Questions?
@klarstil
https://www.shopware.com/en/
https://docs.shopware.com/
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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/

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.

Views

Total views

64

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×