Frontend architecture

• Single-page Apps
  • Defining a new Kolibri module
  • Creating a side nav entry
  • Content viewers
    • Kolibri Content hooks
• Layout of frontend code
• Shared core functionality
  • JS libraries and Vue components
  • Styling
  • Dynamic core theme
  • Bootstrapped data
    • URLs and API Endpoints
  • Additional functionality
• Vue components
  • Component Reuse Hierarchy
  • SVG Icons
• Composables
  • When to Use Composables
  • Composable Conventions
    • File naming and location
    • Function structure
  • Shared State Pattern
  • Provider/Inject Pattern
  • Testing Composables
  • Common Composable Patterns
    • Resource fetching
    • Polling
    • Lifecycle management
  • Using @vueuse/core
  • Migration from Vuex
  • Best Practices
  • Examples in the Codebase
• Frontend code conventions
  • Linting and auto formatting
  • Vue.js components
  • Styling anti-patterns
  • RTL-friendly styling quick reference
• Vuex
  • Migration to Composables
• HTML5 API
  • Standard Web APIs
  • SCORM
  • xAPI
  • Custom Navigation
    • Basic API
• Adding dependencies
• Unit testing
  • Testing Library
  • What Should Be Tested
  • Test File Organization
  • Basic Examples
  • Style Guide
    • Naming Conventions
    • Use of renderComponent function
    • Add smoke tests
    • Use describe blocks
    • Avoid long and complex unit tests
    • Reference translation keys, not hardcoded strings
    • Avoid using stubs
    • 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