hubble PWA Docs
PWA
Demo
Website
Github
PWA
Demo
Website
Github
  • What is hubble PWA?
    • Overview
    • Techstack
    • Requirements
    • Installation
    • Roadmap
    • Contact
    • Troubleshooting
  • Architecture

    • Shop Connector
    • File-based inheritance
    • Pages
    • Preinstalled Modules
    • User Session
    • Layouts
    • Components
  • Configuration
  • Theming

    • Default Theme
  • Shopware 6
    • How to set up Shopware 6 to work with hubble PWA
    • Shopware 6 Plugins
    • Shopware 6 Emotionworlds
    • i18n
    • Trade-offs
  • Module Development
    • Contribution Guide PWA
    • Tests
    • Hubble Coding Guidelines for Contributors
      • A component:
      • State management:
      • Independent:
      • Responsive:
      • Code Markup:
      • SEO:
      • Interface:
      • Documentation:
    • API Clients

Hubble Coding Guidelines for Contributors

A component:

  • is a Vue.js single file component (SFC)
  • uses properties to control the components' behaviour (configuration)
  • uses <MiscLink> for internal anchors to make use of multilanguage
  • imports child components dynamically
  • uses garbage collection to avoid memory leaks

State management:

  • uses pinia for managing states between components

Independent:

  • has as few dependencies as possible

Responsive:

  • is functional on all modern devices
  • uses the style section of a SFC

Code Markup:

  • use self-closing html tags in template
  • takes into account all rules defined via eslint / prettier when programming
  • uses ES6 JS Features

SEO:

  • can render all relevant content server-side to facilitate search engine crawling
  • contains valid HTML markup (only one H1 per page, meta descriptions, images alt tag, anchor rel tags)

Interface:

  • always provides feedback to the user for all interactions, e.g. a transition or animation at a speed of 0.2 - 0.3 seconds
  • displays a confirmation message when it comes to user input that triggers an API call that succeeds
  • displays an error message when it comes to user input that triggers an API call that fails
  • has a clear loading indicator and placeholders when an API call is made

Documentation:

  • inline documentation in english
Prev
Tests
Next
API Clients