{"id":4254700,"date":"2022-07-13T11:25:41","date_gmt":"2022-07-13T09:25:41","guid":{"rendered":"https:\/\/www.deptagency.com\/insight\/wie-man-das-head-in-headless-in-angriff-nimmt\/"},"modified":"2022-11-10T13:06:03","modified_gmt":"2022-11-10T11:06:03","slug":"wie-man-das-head-in-headless-in-angriff-nimmt","status":"publish","type":"article","link":"https:\/\/www.deptagency.com\/de-dach\/insight\/wie-man-das-head-in-headless-in-angriff-nimmt\/","title":{"rendered":"Wie man das\u00a0 “Head” in Headless in Angriff nimmt"},"content":{"rendered":"
\n\t\n\t<\/svg>\n\t\t\t\n\t\t\tZur\u00fcck zu allen Artikeln\t\t<\/span>\n\t\n<\/button>\n\t\tWie man das\u00a0 “Head” in Headless in Angriff nimmt\t<\/h1>\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t<\/picture>\n\t\n\t<\/div>
\n\t\t\t\n\t\n\t
\n\t\tDirk Bl\u00f6\u00dfl\t\t
\n\t\tTechnical Director\n\t\t\t<\/div>\n<\/div>\n\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tDatum\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t13 July 2022\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n<\/div>\n\n\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t<\/picture>\n\t\n\t<\/div>\n\n
\n\t
\n\t\t

\n\t\t\tMit der Einf\u00fchrung von Headless haben die Projekte von DEPT\u00ae im Vergleich zu den vorherigen Jahren einen enormen Wandel erfahren. Auf der einen Seite sehen wir, dass die Unternehmen mehr Freiheit bei der Entwicklung von Websites haben, auf der anderen Seite verlieren die Content Manager:innen an Autonomie, wenn es darum geht, diese Websites zu f\u00fcllen. Nichtsdestotrotz konnten sich die zust\u00e4ndigen Content Manager:innen durch diesen Shift ein St\u00fcckchen Freiheit, unter anderem durch Page Builder oder andere Frameworks, zur\u00fcckholen.\u00a0\t<\/h2>\t<\/div>\n<\/div>\n\n
\n\t
\n\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\n\t\tEin headless Intermezzo\t<\/h2>\n\n\n\t\tBevor wir uns damit befassen, ein kurzes Intermezzo. Denn was genau ist nochmal \u201cHeadless\u201d? Bei einer herk\u00f6mmlichen E-Commerce-L\u00f6sung oder einem CMS befinden sich sowohl Frontend (Design) als auch Backend (Content) in einem einzigen System. Ein Headless-Setup trennt Frontend und Backend voneinander. Das CMS enth\u00e4lt nur Content, der auf verschiedenen Plattformen platziert werden kann. Das Backend ist in erster Linie eine API. Auf diese Weise k\u00f6nnen Blogs \u00fcber das Backend auf die Website gestellt werden, aber auch (zum Beispiel) auf mobile Apps. Nicht zuletzt deshalb hat sich Headless mittlerweile zur Best-Practice der E-Commerce-Systeme und Digital Experience Platforms (DXP) entwickelt. F\u00fchrende Anbieter wie Salesforce<\/a>, Adobe und Optimizely<\/a> gehen ebenfalls den Headless-Weg, und wenn Sie als innovativ angesehen werden wollen, haben Sie keine andere Wahl, als zu folgen.\t<\/p>\n\n\n\t\tWeniger Kontrolle \u00fcber die User Experience\t<\/h2>\n\n\n\t\tDas Aufkommen von Headless bedeutet, dass die Business Logik, die fr\u00fcher im Backend angesiedelt war, nun mehr und mehr im Frontend zu finden ist. Es hat ein Shift von Content-Manager:innen und Merchandiser:innen, die innerhalb eines CMS oder einer E-Commerce-Plattform die Kontrolle hatten, zu Developer:innen stattgefunden. Wenn Sie als Content-Manager:in etwas an einer Website \u00e4ndern wollen, m\u00fcssen Sie dies in vielen F\u00e4llen \u00fcber eine:n Frontend-Developer:in tun. F\u00fcr ein durchschnittliches Plattform-Implementierungsprojekt hat dies folglich die Nachfrage nach Frontend-Developer:innen erh\u00f6ht. Es ist daher nicht verwunderlich, dass Unternehmen mit der Tatsache zu k\u00e4mpfen haben, dass sie bei Frontend-Einrichtungen weniger Kontrolle \u00fcber die User Experience haben. Eine Erkenntnis, die vor allem f\u00fcr mittelst\u00e4ndische und gro\u00dfe Unternehmen schmerzlich sein kann.\t<\/p>\n\n\n\t\tZur Rettung\t<\/h2>\n\n\n\t\tViele Unternehmen befinden sich in einer Sackgasse, weil ihre Content-Teams weniger Kontrolle innerhalb des CMS haben und Vorschaufunktionen fehlen. Daf\u00fcr brauchen sie ja schlie\u00dflich Developer:innen. Zum Gl\u00fcck gibt es einige Anbieter, die diese Nische geschickt ausf\u00fcllen. Deren L\u00f6sungen beinhalten die Verwendung von Komponenten und die Anwendung von Server Drive UI<\/a>: eine Technik, die die Kontrolle \u00fcber das Frontend mehr in das Backend (CMS) bringt. Zu den L\u00f6sungen geh\u00f6ren:\t<\/p>\n\n\n\t\tFrontastic\u00a0<\/em>
Frontastic kombiniert die Geschwindigkeit und Flexibilit\u00e4t von Headless mit der Einfachheit eines sogenannten Website-Builders. \u00dcber einen Page-Builder, der aus Drag & Drop-Komponenten besteht, erm\u00f6glicht Frontastic Unternehmensteams, ohne die Komplexit\u00e4t von Codes zu arbeiten. Dar\u00fcber hinaus bietet es die M\u00f6glichkeit, Vorlagen zu erstellen, Weiterleitungen hinzuzuf\u00fcgen, die URL-Struktur zu verwalten, SEO zu optimieren und vieles mehr. Kurz gesagt, Frontastic bietet im Vergleich zu anderen Frontend-Frameworks eine Vielzahl von Funktionen.

Salesforce Commerce Cloud PWA Kit<\/em>
Das Commerce Cloud PWA Kit ist eine Art Storefront-Technologie f\u00fcr Headless, die die Salesforce Commerce APIs und React.js nutzt. Diese Progressive Web App erm\u00f6glicht einen reibungslosen \u00dcbergang Ihres Online-Shops zu einer Headless-Commerce-Architektur. Das PWA-Kit l\u00e4uft auf der Managed Runtime von Salesforce mit einer Betriebszeit von 99,9 % und l\u00e4sst sich leicht an eine Vielzahl von Marken und Unternehmen anpassen. Dar\u00fcber hinaus wird das Kit gem\u00e4\u00df einer laufenden Roadmap entwickelt, um weitere Salesforce-Funktionen zu integrieren.

Deity<\/em>\u00a0
Genau wie das Commerce Cloud PWA Kit ist Deity eine API-first Headless E-Commerce-Plattform, die auf React.js basiert. Mit Deity erhalten Sie eine Single Page App (SPA), aber dank dynamischer URL-\u00c4nderungen und zus\u00e4tzlichem serverseitigem Rendering f\u00fchlt sich das Navigieren \u00fcber den Browser nat\u00fcrlich an. Au\u00dferdem verf\u00fcgt Deity \u00fcber Konnektoren zu Magento 2, zu WordPress f\u00fcr CMS- und Blog-Funktionalit\u00e4ten und zu Algolia f\u00fcr die Katalogsuche. Weitere Vorteile sind der vollst\u00e4ndig funktionale Checkout \u00fcber Paypal und Kreditkartenzahlungen \u00fcber Adyen.

Vue storefront
<\/em>Vue-Storefront konzentriert sich weniger auf Page-Builder-Systeme und mehr auf Headless und Beschleunigung. Aus diesem Grund ist es ganz dem Headless E-Commerce gewidmet. Basierend auf Vue.js funktioniert Vue-Storefront als Progressive Web App mit Funktionalit\u00e4ten, die die E-Commerce Client Experience verbessern. Zum Beispiel liefert die Plattform ein paar Standard-Komponenten, so dass Unternehmen nicht bei Null anfangen m\u00fcssen, um eine Website zu erstellen und sich auf das konzentrieren k\u00f6nnen, was sie von ihrer Konkurrenz unterscheidet.

Bei den oben beschriebenen L\u00f6sungen (und noch mehr Frameworks, die wir nicht erw\u00e4hnt haben!) ist sicher auch etwas f\u00fcr Sie dabei. Neugierig, was am besten funktioniert? Kontaktieren Sie uns gerne.\u00a0\t<\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t