{"id":144,"date":"2024-09-06T15:30:44","date_gmt":"2024-09-06T13:30:44","guid":{"rendered":"https:\/\/www.b2b-shop-system.de\/blog\/?p=144"},"modified":"2024-09-06T15:30:44","modified_gmt":"2024-09-06T13:30:44","slug":"vendure-ein-nextgen-shop-system-aus-wien","status":"publish","type":"post","link":"https:\/\/www.b2b-shop-system.de\/blog\/2024\/09\/06\/vendure-ein-nextgen-shop-system-aus-wien\/","title":{"rendered":"Vendure &#8211; ein nextGen Shop-System aus Wien"},"content":{"rendered":"\n<p><strong>Ich bin seit vielen Jahren als Softwareentwickler im Online-Shop Bereich t\u00e4tig.<br>Ich habe mich jetzt in ein neues Online-Shop-System verliebt.<\/strong><\/p>\n\n\n\n<p>Seit vielen Jahren basiert die Technik der bekannten Shop-Systeme auf der Programmiersprache PHP.<br>Dies sowohl f\u00fcr das Backend und das Frontend. Wobei im Frontend gerne auch Javascript in Verbindung mit Serverabfragen (AJAX)  eingesetzt wird. Aber im Grunde genommen ist PHP eine ziemlich veraltete Technik. PHP hat sich zwar in den letzten Jahren (mit PHP 7 und 8) noch einmal deutlich weiter entwickelt, aber das \u00e4ndert nichts an der Architektur einer PHP Anwendung: Die vom Webserver ausgelieferte Seite wird auf dem Server per PHP durch Zugriffe auf die Datenbank zusammengesetzt und an den Client gesendet.<br>Anwendungen mit sehr vielen gleichzeitigen Zugriffen sind nur \u00fcber eine Skalierung der Server vern\u00fcnftig darstellbar. Das hei\u00dft leistungsf\u00e4hige Server und\/oder sehr viele davon.<\/p>\n\n\n\n<p>Nehmen wir mal eine Anwendung, die sehr viele Benutzer hat, die sie gleichzeitig benutzen. Eine solche Anwendung ist z.B. Facebook. Hier wird eine andere Technik benutzt, die viele Vorteile bringt. Facebook hat eine Javascript Framework (REACT) entwickelt, welches ma\u00dfgebliche  Teile der Darstellung auf den Client verlagert und nur noch Datenfragmente vom Server liest. Dies bedeutet f\u00fcr den Server erheblich weniger Belastung und geht auch in der Regel viel schneller.  Insbesondere kann die Seite schon aufgebaut werden, wenn noch nicht alle Daten vorhanden sind. Das ist f\u00fcr den Benutzer erheblich angenehmer, als wenn er einen l\u00e4ngeren Zeitraum auf die komplette Seite warten muss.    <\/p>\n\n\n\n<p> Nun das hat sich wohl auch Herr Bromley aus Wien gedacht und hat vor einigen Jahren angefangen das Shop-System Vendure zu entwickeln. Es ist ein sogenanntes Headless Shop-System. Das bedeutet, dass es kein vordefiniertes Frontend gibt. Stattdessen sind die API-Calls definiert, die man benutzen kann, um Daten vom Backend abzufragen oder zu ver\u00e4ndern. Das Backend arbeite auf Basis von Node.js, also mit Javascript. Somit hat man die gleiche Programmiersprache sowohl im Browser als auch auf dem Server.<\/p>\n\n\n\n<p>Es handelt sich um ein Shop-System, dass nicht nur dem aktuellen Stand der Technik entspricht, sondern in vielen Punkten ein Vorreiter f\u00fcr die Technik von morgen ist.<br>Ich sage mal einige Schlagworte: Headless, GraphQL, TypeScript, Verkaufskan\u00e4le, benutzerdefinierte Felder, mehrsprachig, unterschiedliche Steuers\u00e4tze, Lagerverwaltung etc.<br>Die Software selbst ist kostenlos und die Lizenz basiert auf GPL3.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-37-15.553Z-1024x640.png\" alt=\"\" class=\"wp-image-147\" srcset=\"https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-37-15.553Z-1024x640.png 1024w, https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-37-15.553Z-300x188.png 300w, https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-37-15.553Z-768x480.png 768w, https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-37-15.553Z.png 1473w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Bild 1: Dashboard im Backend<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-39-07.741Z-1024x640.png\" alt=\"\" class=\"wp-image-148\" srcset=\"https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-39-07.741Z-1024x640.png 1024w, https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-39-07.741Z-300x188.png 300w, https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-39-07.741Z-768x480.png 768w, https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-39-07.741Z.png 1473w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Bild 2: Produkte bearbeiten<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-40-05.269Z-1024x640.png\" alt=\"\" class=\"wp-image-149\" style=\"aspect-ratio:1.6;width:877px;height:auto\" srcset=\"https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-40-05.269Z-1024x640.png 1024w, https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-40-05.269Z-300x188.png 300w, https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-40-05.269Z-768x480.png 768w, https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-40-05.269Z.png 1473w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Bild 3: Die Shopkategorien hei\u00dfen Collections<br><\/figcaption><\/figure>\n\n\n\n<p>Mein Kollege hat einen Demoshop auf Basis von Vendure und next.js erstellt. <br>Hier der <a href=\"https:\/\/www.shopspot.de\">Demoshop von ShopPilot<\/a> <\/p>\n\n\n\n<p>Und hier kann man auch die Performance dieser L\u00f6sung direkt sehen. Google Lighthouse zeigt folgendes f\u00fcr eine Produktdetailseite des Shops an.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"801\" height=\"820\" src=\"https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/performace.png\" alt=\"\" class=\"wp-image-155\" srcset=\"https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/performace.png 801w, https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/performace-293x300.png 293w, https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/performace-768x786.png 768w\" sizes=\"(max-width: 801px) 100vw, 801px\" \/><\/figure>\n\n\n\n<p>Die Performance, die Lighthouse misst, ist sehr wichtig f\u00fcr eine Website.  Hier sind einige Gr\u00fcnde, warum diese Messungen wichtig sind:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Benutzererfahrung<\/strong>: Eine schnelle und reibungslose Website sorgt f\u00fcr eine bessere Benutzererfahrung. Langsame Ladezeiten k\u00f6nnen Besucher frustrieren und dazu f\u00fchren, dass sie die Seite verlassen.<\/li>\n\n\n\n<li><strong>SEO<\/strong>: Google ber\u00fccksichtigt die Ladegeschwindigkeit und andere Performance-Metriken bei der Bewertung von Websites f\u00fcr die Suchergebnisse.&nbsp;Eine bessere Performance kann also zu einer besseren Platzierung in den Suchergebnissen f\u00fchren.<\/li>\n\n\n\n<li><strong>Conversion-Raten<\/strong>: Schnellere Websites haben oft h\u00f6here Conversion-Raten, da Benutzer eher geneigt sind, auf einer gut funktionierenden Seite zu bleiben und Aktionen durchzuf\u00fchren, wie z.B. Eink\u00e4ufe oder Anmeldungen.<a rel=\"noreferrer noopener\" href=\"https:\/\/web.dev\/articles\/discover-performance-opportunities-with-lighthouse\" target=\"_blank\"><\/a><\/li>\n<\/ol>\n\n\n\n<p id=\"learn-more-header\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ich bin seit vielen Jahren als Softwareentwickler im Online-Shop Bereich t\u00e4tig.Ich habe mich jetzt in ein neues Online-Shop-System verliebt. Seit<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[11],"class_list":["post-144","post","type-post","status-publish","format-standard","hentry","category-allgemein","tag-vendure"],"_links":{"self":[{"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/posts\/144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/comments?post=144"}],"version-history":[{"count":7,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/posts\/144\/revisions"}],"predecessor-version":[{"id":164,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/posts\/144\/revisions\/164"}],"wp:attachment":[{"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/media?parent=144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/categories?post=144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/tags?post=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}