Un produs sau un serviciu white label este creat de către o companie, fără branding cu scopul de a putea fi rebranduit și vândut către alte companii ca produs propriu. Aceasta practică duce la eficientizarea costurilor, reducerea riscurilor și la o scalabilitate crescută. Compania care folosește un produs sau serviciu white labeled nu mai este nevoită să investească în dezvoltare și poate penetra noi piețe fără a fi nevoie de a face cercetare și dezvoltare.
În continuare vom vorbi despre cum am aplica white labeling unei aplicații de UI, indiferent de tehnologia aleasă. În primul rând, când vine vorba de white labelling trebuie să discutăm despre styles (culori, fonturi, etc) și despre assets (logo, imagini pentru conținut etc).
Soluția adoptată de noi pentru unul dintre clienții noștri a fost să extragem tot ce ține de partea de styling a aplicației într-un pachet separat de npm. Acest lucru ne oferă avantaje majore, precum refolosirea acelorași styles fără să fie nevoie de dezvoltare suplimentară în diferite proiecte aflate sub aceeași umbrelă de branding. De asemenea, dezvoltarea brandingului pentru un client anume se poate atribui altei echipe și se lucrează versionat și independent de produsul white labeled de bază.
Concret, aplicația va instala un nou pachet NPM, o să îl numim MorphTheme, dintr-un repository privat și acesta va conține toate stilurile pentru brandingul de bază și cele particulare pentru fiecare client.
După instalarea pachetului, la build time se vor injecta în body clasele de css pentru a se putea aplica tema în aplicație, cu următoarea regulă mt-{themeMode} mt-base mt-base-{themeName}, unde:
themeMode - definește tema de bază: light sau dark;
<body className=”mt-light mt-base
mt-base-customerName”>
// APPLICATION CODE
</body>mt-light - încarcă tokenii primitivi;
mt-base - încarcă tokenii specifici componentelor;
În continuare, vom analiza structura unei componente tabs și cum se aplică soluția white labeling propusă peste ea.
În codul sursă de mai jos este structura html a componentei:
<div className=”tabs”>
<div className=”tabs-bar”>
<a href=”#tab1”
className=”tabs-bar__item tabs-bar__item--selected”>
Tab 1
</a>
<a href=”#tab2” className=”tabs-bar__item”>
Tab 2
</a>
<a href=”#tab3” className=”tabs-bar__item”>
Tab 3
</a>
</div>
</div>Pornind de la această structură aplicăm stilurile claselor de css folosite în componentă, folosind tokens din librăria de theming precum în exemplul de mai jos:
.tabs {
.tabs-bar {
background-color:
var(--mt-base-comp-tabs-color-bg);
border-bottom:
1px solid var(--mt-base-comp-tabs-color-border);
&__item {
color:
var(--mt-base-comp-tabs-color-link-enabled);
&--selected {
color:
var(--mt-base-comp-tabs-color-link-selected);
background:
var(--mt-base-comp-tabs-color-border-selected);
}
}
}
}Cum arată acești tokeni în librăria de theming? În imaginea următoare ne putem forma o mică ideea despre cum arată o astfel de librărie unde sunt definite culorile primitive, culorile specifice componentelor și, bineînțeles, culorile specifice unui client, fiindcă vorbim despre un produs white labeled.
:root,
.mt-light {
/* Primitive colors */
--mt-primitive-color-gray-100: rgb(242, 245, 248);
--mt-primitive-color-gray-200: rgb(222, 228, 232);
--mt-primitive-color-gray-700: rgb(87, 103, 117);
--mt-primitive-color-gray-1100: rgb(20, 29, 36);
--mt-primitive-color-teal-700: rgb(0, 118, 143);
/* Base colors */
--mt-sem-color-surface-00:
var(--mt-primitive-color-gray-100);
--mt-sem-color-border-01:
var(--mt-primitive-color-gray-200);
--mt-sem-color-text-secondary:
var(--mt-primitive-color-gray-700);
--mt-sem-color-text-primary:
var(--mt-sem-color-theme-neutral-1050);
--mt-sem-color-border-selected: var(--mt-primitive-color-teal-700);
}
.mt-base,
.mt-light.mt-base {
/* Components colors */
--mt-base-comp-tabs-color-bg:
var(--mt-sem-color-surface-00);
--mt-base-comp-tabs-color-border:
var(--mt-sem-color-border-01);
--mt-base-comp-tabs-color-link-enabled:
var(--mt-sem-color-text-secondary);
--mt-base-comp-tabs-color-link-selected:
var(--mt-sem-color-text-primary);
--mt-base-comp-tabs-color-border-selected:
var(--mt-sem-color-border-selected);
}
.mt-base.mt-base-customerThemeName,
.mt-light.mt-base.mt-base-customerThemeName {
/* Customer specific colors */
--mt-primitive-color-org-customerName-red-100:
rgb(255, 250, 250);
--mt-primitive-color-org-customerName-red-800:
rgb(171, 18, 24);
/* Customer specific components colors overrides */
--mt-base-comp-tabs-color-bg:
var(--mt-primitive-color-org-customerName-red-800);
--mt-base-comp-tabs-color-link-selected:
var(--mt-primitive-color-org-customerName-red-100);
}În materie de assets, noi am ales stocarea lor în aplicația de bază white labeled și injectarea url-urilor locale ca props în componentele aplicației de UI.
Bineînțeles, procesul de bundle pentru fiecare client elimină asseturile nedorite pentru a păstra o dimensiune a bundle-ului optimă.
Un produs white labeled este o soluție flexibilă și eficientă pentru diverse businessuri, iar implementarea și mentenanța nu trebuie să fie atât de dificile.