Porsche Design System

Performance

Table of Contents

Architecture
Explanation
China CDN

The Porsche Design System components, marque, icons, fonts and styles are delivered by CDN (cdn.ui.porsche.com). This way all digital Porsche products share and use the cached and versioned assets independently.

Architecture#

Explanation#

Let's have a look at following applications and assume that all of these applications have integrated a Porsche Design System Button:

Porsche.com created with Vanilla JS

Porsche Finder created with React

My Porsche created with Angular

For example, when a user visits Porsche.com, the Porsche Design System button is loaded for the first time and then stored in the browser cache. If the same user later switches to the Porsche Finder or My Porsche application, which uses the same button, it becomes instantly available because it is already cached in the browser. This means fewer network requests and shorter loading times for the second and every subsequent application.

This way performance and consistency can be dramatically increased across all digital Porsche products using the Porsche Design System.

China CDN#

When requests are made from China, the CDN (cdn.ui.porsche.**com**) is configured to automatically forward those requests to a CDN hosted in China (cdn.ui.porsche.**cn**), which then serves the response. Why? Because local law requires it. This approach provides an easy way to use Porsche Design System assets without having to worry about performance in China or the rest of the world, and it works with zero configuration.

Because of the automatic forwarding strategy, the number of requests increases in China and the forwarding itself also adds a small amount of latency each time. That is why the Porsche Design System provides an optional way to define which CDN should load those assets in order to achieve maximum performance in China.

To achieve this, a global browser variable PORSCHE_DESIGN_SYSTEM_CDN was introduced which needs to be defined before initializing the Porsche Design System.

Usually the integrating team that is responsible for the application is in charge of configuring which cdn to use.

This means that widget teams shouldn't set it and might even override it.

Possible values that can be assigned:

auto (default - using RoW CDN and redirects to Chinese CDN automatically when necessary)

cn (forces using Chinese CDN directly) This gives the possibility for the consuming application to have either two dedicated builds for their application, one for China and one for RoW (rest of world) or following the build once, deploy many principle, it can be configured at start-up time.

Since handling the global configuration variable PORSCHE_DESIGN_SYSTEM_CDN isn't very nice and won't work in a SSR context, the porscheDesignSystem.load() function accepts a cdn: 'auto' | 'cn' option which will then set the PORSCHE_DESIGN_SYSTEM_CDN for backwards compatibility and therefore affecting other micro frontends within the same website or app.

The same can be achieved in all supported frameworks via the respective module or provider like

Angular: PorscheDesignSystemModule.load({ cdn: 'cn' })

React: <PorscheDesignSystemProvider cdn="cn" />

Vue: <PorscheDesignSystemProvider cdn="cn" />

Vanilla JS Example

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Porsche Design System</title>
    <script type="text/javascript" src="path-to-porsche-design-system.js"></script>
  </head>
  <body>
    <script>
      porscheDesignSystem.load({ cdn: 'cn' });
    </script>
  </body>
</html>

Angular Example (app.module.ts)

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { PorscheDesignSystemModule } from '@porsche-design-system/components-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [],
  imports: [BrowserModule, PorscheDesignSystemModule.load({ cdn: 'cn' })],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent],
})
export class AppModule {}

React Example (index.tsx)

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { PorscheDesignSystemProvider } from '@porsche-design-system/components-react';
import { App } from './App';

const root = createRoot(document.getElementById('root')!);
root.render(
<StrictMode>
  <BrowserRouter>
    <PorscheDesignSystemProvider cdn="cn">
      <App />
    </PorscheDesignSystemProvider>
  </BrowserRouter>
</StrictMode>
);

Vue Example (App.vue)

<script setup lang="ts">
  import { PorscheDesignSystemProvider } from '@porsche-design-system/components-vue';
</script>

<template>
  <PorscheDesignSystemProvider cdn="cn">
    <RouterView />
  </PorscheDesignSystemProvider>
</template>

Styles

In order to use the Chinese CDN for the Font-face definitions, the /cn import needs to be used, e.g.:

- @import '@porsche-design-system/components-{js|angular|react|vue}';
+ @import '@porsche-design-system/components-{js|angular|react|vue}/cn';

// Alternative: If your bundler requires an explicit .css extension, use this path instead
- @import '@porsche-design-system/components-{js|angular|react|vue}/index.css';
+ @import '@porsche-design-system/components-{js|angular|react|vue}/cn/index.css';

Partials

Also, all CDN related partials of the @porsche-design-system/components-{js|angular|react|vue}/partials packages have an option { cdn: 'auto' | 'cn' } to force preloading assets from Chinese CDN directly, e.g.:

<head>
  <%= require('@porsche-design-system/components-{js|angular|react|vue}/partials').getFontFaceStylesheet({ cdn: 'cn' })
  %>
</head>

Attention