ABONAMENTE VIDEO REDACȚIA
RO
EN
NOU
Numărul 151
Numărul 150 Numărul 149 Numărul 148 Numărul 147 Numărul 146 Numărul 145 Numărul 144 Numărul 143 Numărul 142 Numărul 141 Numărul 140 Numărul 139 Numărul 138 Numărul 137 Numărul 136 Numărul 135 Numărul 134 Numărul 133 Numărul 132 Numărul 131 Numărul 130 Numărul 129 Numărul 128 Numărul 127 Numărul 126 Numărul 125 Numărul 124 Numărul 123 Numărul 122 Numărul 121 Numărul 120 Numărul 119 Numărul 118 Numărul 117 Numărul 116 Numărul 115 Numărul 114 Numărul 113 Numărul 112 Numărul 111 Numărul 110 Numărul 109 Numărul 108 Numărul 107 Numărul 106 Numărul 105 Numărul 104 Numărul 103 Numărul 102 Numărul 101 Numărul 100 Numărul 99 Numărul 98 Numărul 97 Numărul 96 Numărul 95 Numărul 94 Numărul 93 Numărul 92 Numărul 91 Numărul 90 Numărul 89 Numărul 88 Numărul 87 Numărul 86 Numărul 85 Numărul 84 Numărul 83 Numărul 82 Numărul 81 Numărul 80 Numărul 79 Numărul 78 Numărul 77 Numărul 76 Numărul 75 Numărul 74 Numărul 73 Numărul 72 Numărul 71 Numărul 70 Numărul 69 Numărul 68 Numărul 67 Numărul 66 Numărul 65 Numărul 64 Numărul 63 Numărul 62 Numărul 61 Numărul 60 Numărul 59 Numărul 58 Numărul 57 Numărul 56 Numărul 55 Numărul 54 Numărul 53 Numărul 52 Numărul 51 Numărul 50 Numărul 49 Numărul 48 Numărul 47 Numărul 46 Numărul 45 Numărul 44 Numărul 43 Numărul 42 Numărul 41 Numărul 40 Numărul 39 Numărul 38 Numărul 37 Numărul 36 Numărul 35 Numărul 34 Numărul 33 Numărul 32 Numărul 31 Numărul 30 Numărul 29 Numărul 28 Numărul 27 Numărul 26 Numărul 25 Numărul 24 Numărul 23 Numărul 22 Numărul 21 Numărul 20 Numărul 19 Numărul 18 Numărul 17 Numărul 16 Numărul 15 Numărul 14 Numărul 13 Numărul 12 Numărul 11 Numărul 10 Numărul 9 Numărul 8 Numărul 7 Numărul 6 Numărul 5 Numărul 4 Numărul 3 Numărul 2 Numărul 1
×
▼ LISTĂ EDIȚII ▼
Numărul 151
Abonament PDF

White labeling: beneficii și dezvoltare

Raul Lukacs
Technical Lead @ BoatyardX



PROGRAMARE

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.

Cum dezvoltăm white labeling ?

Î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:

<body className=”mt-light mt-base  
   mt-base-customerName”>
  // APPLICATION CODE
</body>

Cum arată o componentă white labeled ?

Î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);
}

Ce facem cu logo și alte imagini ?

Î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ă.

Concluzie

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.

NUMĂRUL 150 - Technologiile SAP ABAP

Sponsori

  • Accenture
  • BT Code Crafters
  • Bosch
  • Betfair
  • MHP
  • BoatyardX
  • .msg systems
  • P3 group
  • Ing Hubs
  • Cognizant Softvision
  • Colors in projects