Frontend architecture

• Single-page Apps
  • Defining a new Kolibri module
  • Creating a side nav entry
  • Content renderers
    • Kolibri Content hooks
• Layout of frontend code
• Shared core functionality
  • JS libraries and Vue components
  • Styling
  • Dynamic core theme
  • Bootstrapped data
  • Additional functionality
• Vue components
  • Design system
  • SVG Icons
• Frontend code conventions
  • Linting and auto formatting
  • Vue.js components
  • Styling anti-patterns
• Vuex
• HTML5 API
  • Standard Web APIs
  • SCORM
  • xAPI
  • Custom Navigation
    • Basic API
• Adding dependencies
• Unit testing
  • Style Guide
    • Naming Conventions
    • Use of renderComponent function
    • Add smoke tests
    • Use describe blocks
    • Avoid long and complex unit tests
    • Use default props
    • Explicitly declare props that are relevant to your unit test
    • Queries
    • Making use of VTL screen object
    • Prefer the userEvent package over fireEvent to simulate user interactions
    • Using testing-library/jest-dom
  • More References
• Testing template
  • Mocking Examples
    • Vue Router
    • Store
    • Composables
    • Mixins
    • Imports and Utility Functions
• Frontend build pipeline