{"id":4083,"date":"2020-09-20T08:20:42","date_gmt":"2020-09-20T08:20:42","guid":{"rendered":"https:\/\/swisstomato.ch\/2020\/09\/20\/vergleich-von-backend-und-frontend\/"},"modified":"2020-09-20T08:20:42","modified_gmt":"2020-09-20T08:20:42","slug":"vergleich-von-backend-und-frontend","status":"publish","type":"post","link":"https:\/\/swisstomato.ch\/de\/2020\/09\/20\/vergleich-von-backend-und-frontend\/","title":{"rendered":"Vergleich von Backend und Frontend"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Wenn wir \u00fcber Computerprogrammierung, Code oder Webentwicklung sprechen, ist uns der Fachjargon nicht immer sehr vertraut, aber bestimmte Ausdr\u00fccke kommen regelm\u00e4ssig vor. \u00abBackend\u00bb und \u00abFrontend\u00bb geh\u00f6ren dazu, zwei Begriffe, die man immer \u00f6fter h\u00f6rt, aber was genau ist das? Was repr\u00e4sentiert es und wozu dient es?<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15301\" src=\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2020\/10\/pexels-anthony-shkraba-4348401-scaled.jpg\" alt=\"backend and frontend\" width=\"2560\" height=\"1713\" \/><\/p>\n<h2><span style=\"font-weight: 400;\">Backend und Frontend gibt es \u00fcberall<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In der IT-Entwicklung entwickeln wir <\/span><i><span style=\"font-weight: 400;\">Anwendungen<\/span><\/i><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Diese Anwendungen k\u00f6nnen die Form einer <a href=\"\/?page_id=6614\" target=\"_blank\" rel=\"noopener noreferrer\">Website<\/a> (Beispiel: die Website der Digital-Agentur Swiss Tomato), einer Webanwendung (Beispiel: Google Drive) und einer mobilen Anwendung bzw. App (Beispiel: Waze) annehmen.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Um zu funktionieren, ben\u00f6tigt eine <a href=\"\/?page_id=6520\" target=\"_blank\" rel=\"noopener noreferrer\">Anwendung<\/a> oder Website sehr oft das, was in der Fachsprache als Backend und Frontend bezeichnet wird. Oft liest man: \u00abDas Frontend ist das, was der Endbenutzer (Sie) sieht, und das Backend ist das, was wir nicht sehen\u00bb, aber was bedeutet das?<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Backend und Frontend in sehr vereinfachter Form<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Zum besseren Verst\u00e4ndnis dieser beiden Konzepte wenden wir uns f\u00fcr einen Moment von den Fachbegriffen ab und nehmen ein Beispiel aus dem Alltag: Postdienste.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Stellen Sie sich folgende Situation vor: Ich muss einen Brief an eine Firma senden, und diese Firma muss mir einen Brief zur\u00fccksenden, um auf meine Anfrage zu antworten.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In diesem Beispiel repr\u00e4sentiert der Brief, den ich senden muss, meine Suche nach Informationen auf einer Website (oder in einer Webanwendung).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Nun schl\u00fcsseln wir die verschiedenen auf mein Senden des Briefes erfolgenden Aktionen und Schritte vom Senden bis zum Empfang der Antwort der Firma auf meine Anfrage auf.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15304\" src=\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2020\/10\/pexels-markus-spiske-1089438-scaled.jpg\" alt=\"backend and frontend\" width=\"2560\" height=\"1707\" \/><\/p>\n<h3>W\u00e4hrend der verschiedenen Phasen sind mehrere Akteure beteiligt:<\/h3>\n<ul>\n<li><span style=\"font-weight: 400;\">der Postbote<\/span><\/li>\n<li><span style=\"font-weight: 400;\">der Briefkasten<\/span><\/li>\n<li><span style=\"font-weight: 400;\">das Sortierzentrum<\/span><\/li>\n<li><span style=\"font-weight: 400;\">der Z\u00e4hler<\/span><\/li>\n<li><span style=\"font-weight: 400;\">die Schubladen, in denen die Post aufbewahrt wird<\/span><\/li>\n<li><span style=\"font-weight: 400;\">der Brief<\/span><\/li>\n<\/ul>\n<h3>Zerlegen wir nun den Vorgang in Schritte:<\/h3>\n<p><span style=\"font-weight: 400;\">Wenn ich meinen Brief per Post sende, sind alle physischen Interaktionen, die ich habe, w\u00e4hrend die Post in meinen H\u00e4nden ist, der Frontend-Teil des Vorgangs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Der gesamte Routing- und Verarbeitungsteil meines Briefs (an dem ich nicht direkt beteiligt bin) hingegen repr\u00e4sentiert den Backend-Teil des Vorgangs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Jetzt sollten Sie den oben zitierten Satz \u00abDie Vorderseite ist das, was wir sehen, und die R\u00fcckseite ist das, was wir nicht sehen\u00bb besser verstehen: Wir k\u00f6nnen den Brief sehen, wenn wir ihn aufgeben, wir k\u00f6nnen den Briefkasten und den Postboten sehen; es stellt den Frontend-Teil dar. Wenn aber der Brief sortiert, gespeichert, in der Routing-Phase usw. ist, was wir nicht sehen, repr\u00e4sentiert das den Backend-Teil der Organisation.<\/span><\/p>\n<h2>Und konkret f\u00fcr eine Anwendung oder eine Website<\/h2>\n<p><span style=\"font-weight: 400;\">Die gleichen Konzepte finden sich im Lebenszyklus einer Website oder einer Anwendung:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ich sehe die Website, die ich mit gerade ansehe. Um mit der Website zu interagieren, klicke ich auf Links oder f\u00fclle Formulare aus, die ich sehe <\/span><span style=\"font-weight: 400;\">\u2013<\/span><span style=\"font-weight: 400;\"> das ist das Frontend.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Sobald meine Klickaktion abgeschlossen ist, arbeitet meine Website oder Anwendung unabh\u00e4ngig: Sie empf\u00e4ngt meine Anfrage, sucht nach den von mir angeforderten Informationen (dazu konsultiert sie die Datenbank und analysiert \/ sichert die Daten) und sendet sie dann an mich zur\u00fcck <\/span><span style=\"font-weight: 400;\">\u2013<\/span><span style=\"font-weight: 400;\"> das ist der Backend-Teil.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Sobald das Backend die Informationen zur\u00fccksendet, kann ich sie erneut ansehen und damit interagieren <\/span><span style=\"font-weight: 400;\">\u2013<\/span><span style=\"font-weight: 400;\"> ich bin zur\u00fcck im Frontend.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hier erkennen wir, dass diese beiden Facetten einer Website oder einer Anwendung essenziell sind (genau wie das Sortierzentrum und der Postbote bei den Postdiensten), dass einer nicht ohne den anderen auskommt und dass es, wie beim Postdienst, nicht dieselbe Person ist, die die Post ausliefert und sortiert.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Genauso ben\u00f6tigen wir bei der Entwicklung einer Anwendung oder einer Website einen Frontend-Entwickler und einen Backend-Entwickler.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-15307\" src=\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2020\/10\/pexels-lukas-574071-scaled.jpg\" alt=\"backend developer\" width=\"2560\" height=\"1695\" \/><\/p>\n<h2>Und welche Rollen spielen die \u00abSprachen\u00bb in all dem?<\/h2>\n<p>Sie k\u00f6nnen Ihre Post mit dem Unternehmen Post AG (La Poste) senden, aber Sie k\u00f6nnen auch eine andere Firma ausw\u00e4hlen, wie z. B. DHL, Fedex usw. Jedes Unternehmen hat seine eigenen Services, Frontend- und Backend-Methoden.<\/p>\n<p>Nun, in der IT-Entwicklung ist es dasselbe, aber wir nennen es Sprachen. Zum Entwickeln im Backend k\u00f6nnen Sie beispielsweise PHP, Java, Ruby usw. Verwenden\u2026 Zum Entwickeln des Frontend-Teils nutzen wir haupts\u00e4chlich <a href=\"https:\/\/www.javascript.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript<\/a>, HTML oder CSS.<\/p>\n<p><a href=\"\/?p=15300#contact-us\" target=\"_blank\" rel=\"noopener noreferrer\">Treffen Sie unsere Experten<\/a> f\u00fcr Webdesign in Z\u00fcrich und Genf und unsere App-Developer bei Swiss Tomato und entdecken Sie, wie Verbesserungen in Ihrer digitalen Aufstellung ihr Unternehmen ver\u00e4ndern k\u00f6nnen!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wenn wir \u00fcber Computerprogrammierung, Code oder Webentwicklung sprechen, ist uns der Fachjargon nicht immer sehr vertraut, aber bestimmte Ausdr\u00fccke kommen regelm\u00e4ssig vor. \u00abBackend\u00bb und \u00abFrontend\u00bb geh\u00f6ren dazu, zwei Begriffe, die man immer \u00f6fter h\u00f6rt, aber was genau ist das? Was repr\u00e4sentiert es und wozu dient es? Backend und Frontend gibt es \u00fcberall In der IT-Entwicklung [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2840,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"acf":{"first_post_thumbnail":4087,"post_thumbnail":4093,"home_slider_image":4099,"custom_class":""},"featured_image_big_url":"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/06\/pexels-markus-spiske-1089438_2_1_1117x564-1.jpg","featured_image_url":"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/06\/pexels-markus-spiske-1089438_2_1_1117x564-1.jpg","date_formatted":" 20, 2020","month_number":"9","_links":{"self":[{"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/posts\/4083"}],"collection":[{"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/comments?post=4083"}],"version-history":[{"count":0,"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/posts\/4083\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/media\/2840"}],"wp:attachment":[{"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/media?parent=4083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/categories?post=4083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/tags?post=4083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}