¶ Intro
Moin zufolge 11 und einfach komplex. Hier sind wieder Burkhard und Gerrit Ja, Moin Moin aus Hamburg schön, dass ihr wieder da seid, dem kann ich mich nur
anschließen. Jetzt sind schon 10 folgen rum und wir kriegen wir Hörerinnen und Hörer ist richtig cool bleibt dabei macht richtig Spaß. Heute haben wir auch wieder ein Thema mitgebracht, weil wir uns viel damit beschäftigt haben, Burkhard eher technisch ich eher als Anwender und das ist das Thema Webseiten oder Websites Webanwendungen noch konkreter. Wollen wir das Thema Single Page Applications uns heute genau angucken? Richtig richtig genau?
Was Single Page Applications sind und was es noch für andere Arten von Webanwendungen Websites gibt das würden wir dann im ersten Teil anschauen, dann später ein bisschen in die Technik gucken was steckt eigentlich hinter einer Website? Ich glaube, HTML javascript, CSS, also Kram haben wir ein bisschen auseinander und dann nachher nochmal die vor und Nachteile der einzelnen Technologien.
Das ist das Ziel für heute. Alles klar, ich bin fertig, ja, du bist fertig, ja geht los OK schon ganz gespannt. Dann stellen wir doch mal vor, was eine Single Page Application ist. Ich hab den Begriff des ersten Mal gehört, muss ich sagen. Ja, eine sogenannte SPA. Die Abkürzung ist auch ganz geläufig.
Single Page application. Ja ist eine Art Web Inhalte zu verteilen, eine Art von mindestens 2 wichtigen ich also ganz, ganz offensichtlich gibt es eine Multi Page application, was ich jetzt gerade mal weg, also mal ganz kurz gesagt was passiert, wenn ich Single page application, wenn ich in meinem Browser l ein tippe, um mir eine Webseite erstmal sag ich mal so anzeigen zu lassen. Dann jetzt fang ich an.
Mit der Multi Page Application passiert typischerweise so was so was soll ich mal historisch immer, dass mir der Server, den ich quasi anrufe durch die UL, eine Webseite zurückliefert und was heißt Webseite also ein Prinzip? Ein Dokument, was nach HTMHTML Praxis quasi formatiert ist.
¶ HTML und CSS
HTML ist die Hyper Text Markup Language. Die hat mir jetzt noch in der Folge, aber HTML habe ich schon mal gehört, aber du kannst ja auch nochmal erklären.
Ja, wir machen es kurz also HT ist eigentlich keine Programmiersprache, sondern eine Mark App language, man sagt und das HT steht für Hypertext und das heißt eigentlich nichts anderes, als dass ich die Möglichkeit habe links zu setzen, also von einer Seite auf die nächste und das ist ja im Prinzip so die Grundidee des Internets, ne sich von einer Seite auf die nächste und navigieren kann springen kann und wir dann quasi Informationen zusammenziehen kann.
Da wäre ich sogar unabhängig von irgendwelchen Suchmaschinen, wenn man es so sieht ne genau und das hat es eigentlich nur. Ja, es ist im Prinzip Textueller, textueller Inhalt und Markup heißt quasi ich bereite den quasi auf beim HTML quasi semantisch. Ich kann halt sagen. Das hier ist eine Überschrift es gibt die sogenannten Tags.
Kann man zum Beispiel sehen bei jeder Webseite, man kann sagen zeig mir mal den den Source Code der Webseite an den Wahlen Browser sehen ist ja schon alles aufgehübscht und aufbereitet, also schon das interpretierte HTML. Und wenn ich sehen will, wie es tatsächlich aussieht in Schrift, ja f 12 drücken ja, dann bist du aber schon bei der Entwicklertools bist du noch einen Schritt weiter?
Ich stehe nicht für den Quelltextanzeigen, da gibt es gleich nochmal extra Knopf und dann siehst du tatsächlich einfach nur roh. HTML aussieht, was da gerade und dann siehst du Sachen wie ganz oft, wieso? Kleiner, größer Zeichen und in diesem kleiner größer Zeichen versteckt sich so wie h 1 h 2 div oder P und so weiter und das sind die sogenannten Tags, die ja kategorisieren, die quasi den Inhalt ich würde mal sagen semantisch.
In h 1 h 2 steht zum Beispiel heading 1 heading 2 also Überschrift ganz oben Überschrift also sub Überschrift und so weiter und sofort, wie man es im Prinzip man kann es sich so vorstellen, weil wenn ich ein Word Dokument ordentlich mache, dann tue ich ja auch nicht nur den Text hin und mach dann irgendwann mal was z, sondern sage ich ja auch hier pass mal auf, dass eine Überschrift und so weiter also ich gebe dem Ganzen dem ganzen textuellen Inhalt der Semantik
ja und ich kann auch es gibt ja auch irgendwie konfiguriere ich den Text ja auch in gewisser Weise ja ja, also was ich in Word. Zum Beispiel etwas Fett mache es wäre, wenn ich es direkt in HDL ausdrücke, ohne diese bei diesen Button clicked machen müsste ich davor und dahinter ein gewisses Setzen, damit dieser Text, der zwischen diesen 2 Tags wiederum ist einfach fett gedruckt wird, kann ich nur sagen, dass ich halt b ne, also kleiner B größer und dann kommt der Text den du
dann halt haben willst, dann musst du diesen Tag wieder schließen, ne, das sind sogenannte Tags mit Inhalt und es gibt auch Voice tags wo du wo du sagst OK, da ist gar kein quasi gar keinen Content drin, sondern nur die sogenannten Attribute. Es gibt auch also also jetzt dieser Bold zum Beispiel, wenn ganz schlicht gesagt hier steht für genau und i steht für Italic. Da gibt es ein paar. Normalerweise haben die Namen schon irgendwie, sie haben irgendwas damit zu tun mit dem,
was du tun willst. Es gibt welche, die schließen sich die schließen sich immer alle, aber manchmal brauchst du nur quasi einen Tag, den du öffnest und schließt und hast keinen Content. Das nennt sich sogenannte Text, zum Beispiel beim Image. Da hast du dann das Image, hat quasi nur ein Attribut, denn dann steht halt noch in dem Tag
drin. SRC source für die Quelle des Images. Da gibt es natürlicherweise L an und dann schließt du den, ohne dass weiterer Inhalt ist so gut, jetzt sind wir jetzt schon wieder HTML in Tiefe so ne, aber das wollen wir gar nicht sprechen. Aber ich war glaube ich an der Stelle.
Du sagtest, man ruft von einem Server HTML Files ab genau und genau und dann kann man sich so vorstellen, dass der Server dann im einfachsten Falle bringt er mir diese dieses HTML file zurück in meinem Browser hab ich übers Netzwerk runtergeladen und dann ist der Browser ist quasi eine Art rendering Maschine der interpretiert das halt gleich diesen Markt Text und zeigt mir, dass dann schon gefährlich an quasi so dass ich, dass ich eine
schöne Seite irgendwie uns heute kennt bekomme, so dass ich nicht mehr diese tags sehe, sondern der Text einfach.
Geholt und ich hab nicht den Text davor ganz genau ganz genau und dann muss im Prinzip kann man HTML jetzt nicht alleine, also s kategorisiert den Text, den Inhalt und so wie du dann auch bei Word sagt zum Beispiel ich möchte, dass halt alle Überschriften von h 1 zum Beispiel diese Art von T haben diese Größe haben und dann von mir aus noch unterstrichen sind oder fett gedruckt oder irgendwas also ich sag mal das Layout die tatsächliche Optik, die klebst du quasi mit an
diesem Tag das kannst du beim HTML auch machen. Das nennt sich dann CSS. Cascading Style, Sheets und jetzt weiter drauf auszugehen ist, dass quasi die die Art und Weise, wie du ausdrückst wie die wie die Styling sein soll, von Gewissen tags für mich Wiederholungen alle natürlich
die zuhören. Im HTML sag ich h 1 das war jetzt eine Header 1 werden also meine Überschrift einer sein und in dem Cascading Stylesheet im CSS hab ich jetzt definiert was bedeutet h 1 also genau in einer gewissen Schriftart einer gewissen Größe ganz genau in in was auch immer in leuchtend grün ja, hast du richtig verstanden ja, genau ganz vereinfacht dargestellt ja, du kannst dich im CSS halt auf Tags beziehen und ganze Textzeilen du kannst dich auch auf andere Sachen
beziehen im CSS du kannst also zum Beispiel auch. Obwohl du quasi einen Tag hast, zum Beispiel P für Paragraph kannst du sagen, diese eine bestimmte Paragraph, der soll halt anders gestaltet werden als alle anderen PS.
In dem HTML Dokument und dann gibt es wieder verschiedene Mittel und Wege das denen zu identifizieren, zum Beispiel über eine ID also du kannst dann quasi innerhalb des Tages bestimmte Attribute setzen, dann schreibst du halt quasi rein, ich sag mal so kleiner p und dann kommt ein Attribut in dem Falle ID gleich und dann gibst du irgendeine D my specific
Paragraph oder Irgendsowas? Machst du hast du den Text und dann kannst du dich im CSS auf diese ID berufen und sagen dieses P aber bitte irgendwie dunkelgrün? Während alle anderen P irgendwie grün sind und so weiter OK war.
Das ist total ausgefeiltes System, das ist also da gibt es ganz viele Wege und Mittel das auszudrücken, aber es ist halt gehört zum Standard, der der Webseiten Stylings und Aufbaus ja genau kann man also sagen kann man das so sagen H Inhalt einer Website, zum Beispiel. Während CSS immer das Styling das kann man genauso sagen. Und jetzt fangen wir an, wo wir angefangen hatten, also ich rufe den Server auf und dann kommt eine HTML Seite mit hinterlegtem Styling, also mit dem CSS.
Typischerweise ist DSS Shirt mit und das wird mir dann direkt angezeigt vom Browser und im und wenn ich dann genau, dann kriege ich inhalier also Texte und so weiter und dann kann ich auch links bekommen oder oder Buttons. Ja die wo ich dann noch nicht den Button drücke, oder zum Beispiel Menü ne und wenn ich das jetzt auswählen, dann will ich quasi neuen Inhalt sehen, weil ich irgendwo hin navigiere
¶ Multi-Page Application (MPA)
zum Beispiel ja. Und in der alten Welt war es dann so, dass jeder einzelne Klick jeder Link, den du aufrufst, wie deine neue Anfrage gegen Server macht.
Und dann wieder vom Server ne neue entsprechend des links was ich angeklickt hab ne neue HTML Seite angezeigt bekommst und dann neue Inhalt so und dann deswegen ist das Multipage weil im Prinzip einen Webauftritt unter einer Domain quasi verschiedene auf dem Server verschiedene Seiten hinterlegt hat und je nachdem wo ich so klicke bekomme ich halt diese Seite vom Server angezeigt, so mal die Anwendung ne aufn Server
ist eigentlich immer eintippen. Dann schau ich so n Anruf an dem Server, der gibt mir dann die Seite zurück, da gibt es noch mehr Kommunikation zwischen, aber das passiert im Grunde ja passiert ne ganze Menge mehr. Aber ja genau und wenn ich dann auf einen kleinen Unterseite dieser Domain zum Beispiel ist passiert genau das gleiche und das nimmst s Tipps für dich, aber wenn du da guckst, dann siehst du genau wenn du den Link
klickst. Manchmal sieht man auch schon als Vorschau wenn du über einen Link hast einen modernen Browser siehst du schon was ist das für ne UL, die dann aufgelöst wird, wenn nicht also aufgelöst werden wird? Noch nicht, aber sie kann sich schon sehen was ist, wenn ich ihn zurück Button klicke, rufe ich dann wieder die Seite davor nochmal neu auf oder ist die noch irgendwo zwischengeladen?
Nee, du rufst sie tatsächlich in dieser alten Welt rufst du einfach die Seite wieder vor auf genau dann das macht deinen Browser für dich, der merkt sich einfach nur die Historie deiner aufgerufenen ULS ja, und ob du die jetzt so eingetippt hast oder ob die quasi für dich eingetippt wurden, weil du nen Link oder den Button gedrückt hast. Da ist mal irrelevant genau ja, das man kennt das noch klappen.
Bei älteren Anwendungen hast du das so ne manchmal, wenn du Form so ne Form ausfüllt zum Beispiel und mittendrin bist und rufst du machst den Browser weg, dann kann das zu Chaos führen, weil da im Prinzip. Wenn du jetzt den Wecker nicht viel Magie gemacht ist verliert, verliert er quasi die Informationen über die aktuelle Seite samt der Informationen deiner also samt des ausgefüllten oder angefangen ausgefüllten Forms. Und dann ist das alles weg und
wieder vor allem ärgerlich. Genau so und jetzt? Single Page Application und wollte eigentlich sprechen, das ist jetzt ein bisschen anders. Im Prinzip kann man sagen du also, es fängt genauso an wie der multipage du hast also UL, die du aufrufst und wenn du aber diese UL aufrufst, dann passiert was anderes dann kommt nämlich dann kommt nämlich nicht nur eine einzige Seite zurück. Sondern ein ganzes Bündel von Informationen und und bei Single Page Application.
Ich würde dich ich verdammt noch mal dazu zu sagen es ist halt HTMLCSS und Java Script, also eine Programmiersprache im
Bündel was zurückkommt? Und was dann passiert ist, dass quasi die Rollen so n bisschen wechseln, also in diesem Bündel steckt diese ganze Informationen drin wie bei den Multi Page Applications beim Server hinterlegt sind, aber dieses Bündel ist quasi kriegst quasi deswegen heißt Application also quasi eine ganze Anwendung. Diese ganze Logik der verschiedenen Seiten, die zur Verfügung stehen und so weiter ist in diesem Bündel mit drin und dein Browser kann quasi
Seiten wechseln, obwohl es keinen neuen Aufruf gegen den Server gibt, weil das alles in diesem Bündel mit drin steckt. Ja, das ist wieso? Ein Programm ja und oftmals ist aber schon optional siehst du auch im Browser, dass sich die
¶ Single-Page Application (SPA)
UL ändert, das ist aber quasi Fake, also das kann man programmieren. Programmieren durch javascript quasi dass der Browser so tut, als hätte es geändert, aber im Hintergrund passiert tatsächlich keinen kein Netzwerkaufruf gegen den Server, sondern es wird halt einfach von innen heraus quasi die Seite gewechselt und sofort ja. Ist das ein krasser Unterschied zu dem wie das Halt
funktioniert? Ja, mit dem Multipage ja kannst du dir schon vorstellen bei dem was ich gesagt hab glaub ich, was das alles für Konsequenzen Konsequenzen gar nicht so sehr also beziehungsweise Geschwindigkeit könnte eine Konsequenz sein, dass die einfach optimiert wird, weil ich ja nicht diese Kommunikation zwischen Client und Server habe. Genau genau diesen Faktoren a also es hat das warum sollte ich das sonst machen und in welchen Fällen soll ich das machen?
Ja, du hast Applications jetzt nochmal betont, gerade eine klassische Website ist ja eher oder ganz klassisch. Statisch, dann immer interaktiver und immer funktionaler auch. Aber wir haben auch viele Bars gesprochen oder haben ein eigenes Produkt, das sind ja doch Applications, der auch auftreten oder daherkommen.
Webseite ja, genau das stimmt ja, aber du hast quasi schon beantwortet so n bisschen ne also wenn ich wenn ich nur statischen Content habe und der Inhalt einer Webseite quasi vom Use case mich schon zufriedenstellt und ich beim Klick quasi wieder neue statische Informationen erwarte und dann ist das auch völlig in Ordnung so zu tun. Immer dann, wenn du. Wie soll ich sagen, wenn du so ne Art kontinuierliches Weiterarbeiten ermöglichen möchtest? Wie ist eine Anwendung?
Da hast du Dragon Drops zum Beispiel irgendwas von A nach B willst du da sehen, dann arbeitest du mit dem gedopten Element und fühlst irgendwas aus und so weiter, dann ist das halt viel eleganter zu realisieren. In der Single Page Application.
Weil man sich quasi andauernd diesen diesen Cycle diesen Server Client cycle spart und auch vor allen Dingen das viel einfacher bleibt in State, das ist jetzt ein Fachwort, aber statt quasi Anwendung State also was was ist gerade aktuell zu sehen, das zu maintain quasi ist viel einfacher Single Page application weißt du sowieso schon alles lokal ist das hab ich nicht verstanden ehrlich gesagt den States maintain ist müssen wir irgendwie in der Informatik ist halt ja
vielleicht kannst du das noch mal wenn einzusetzen versuchen ja, ich versuchs mal nochmal schöner.
Formulieren ja, ich mach mal ich ja also erstmal ist es ja so, dass man sich vorstellen muss der Server ist ja quasi es gibt ja nur einen Server für den Webauftritt, aber es gibt n Nutzer die drauf gucken ja also wenn wir jetzt Anwendungen könntest du ja klicken und die Website angucken und nicht auch und wir benutzen den gleichen Server und dann machst du aber was sehr individuelles du fühlst irgendwas aus Dresden Jobs irgendwas von a nach b ich drauf irgendwas von a nach C so und
das und der Server. Wenn es jetzt bei Multipage ist. Der Server muss sich ja quasi alles dieses merken. Du hast von A nach b ja, ich hab ich hab irgendwo meine Email Adresse eingetippt ja, das ist halt meine und du hast deine eingetippt ja genau und wenn und wenn es und wenn es nicht schon abgeschlossen ist, dass wir die eintippen abschicken und der Prozess beendet, sondern wenn noch mehr kommt, dann muss ja der Server ständig. Das nennt sich State.
Er muss halt wissen OK, der Gerrit ist ja gerade da oder wenigstens die Session von Garrett, dass wir der Fachbegriff ja ist gerade da und der macht jetzt weiter und ich muss ihn quasi im jetzt im Mai Page links auf der nächsten Seite. Muss ich quasi diese Informationen, die ihr vorher eingegeben hat, wieder laden und schon voraus füllen in das HTML, was dann die nächste Seite widerspiegelt, kann man alles machen.
Ist aber auch schon, wie ich sage ist, schon bisschen aufwendig dann brauchst du irgendwie Datenbank im Hintergrund oder guck ich dann vorliest und so weiter und sofort das ist ja während der Single Page Application was ich gesagt ist nämlich wichtig es wird quasi in den Klienten in den Browser die Anwendungen reingeladen.
Damit ist es schon ist der Drops schon gelutscht, weil wenn du initial quasi Single Page application drauf drauf klickst, bekommst du in deinem Browser das ganze Programm und es gibt Mittel und Wege, wie man ziemlich einfach.
Die ganzen Informationen zum Beispiel die E Mail Adresse eingetippt hast, die speichert dann lokal dein Browser für dich, das ist sowieso schon in deinem Client dem Server ist das an der Stelle völlig Wurst und für mich ich habe das auch runtergeladen und in meinem Browser steht halt meine Email Adresse und das nennt sich dann quasi State ist quasi der State ist quasi deine e Mail Adresse, dann in dem Fall ja so und den kann ich mir dann viel einfacher merken, weil der ist ja quasi
schon getrennt dadurch, dass wir in unseren verschiedenen Klienten vorgehalten bekommen ne, genau das war super, ja. So, so gibt es in NOK cool, ja manchmal nicht so einfach den ganzen Kram und aber da, wo wir da sind, wird ja gesagt Sicherheit und so können wir jetzt gerade noch einen Punkt machen wir das verstanden hat? Die Interaktion mit dem Server ist dann nämlich bei einer Single Page Application erstmal
viel geringer. Mein erster Klick bei der Single Page Application lädt natürlich ein viel dickeres Datenbündel runter und das ist dann langsamer. Das ist genau das kann, dass sie kritisch, und das wird in Frameworks ständig optimiert. Da muss man auch als Entwickler genau gucken, dass du jetzt denn Application, je nachdem was die, was das dann so kann, die Webseite oder die Webanwendung wenn die halt ziemlich ziemlich ziemlich dick ist, dann so ein
Bündel. Immer groß werden ja, ich sag mal was so 5 Megabyte oder 10 Megabyte wäre schon ziemlich ziemlich groß. Ja typischerweise versucht das eigentlich Kilobyte Bereich zu halten, also bei einer Webseite sind die, das ist normalerweise im Kilobyte Bereich und Du hast das schon gehört? Auch ich glaube unsere auch mal versucht alles Mögliche zu optimieren. Die Bilder in einem.jp Format oder es gibt ja noch bessere Formate, das möglichst wenig Daten durch das Netz fließen
müssen. Es wird immer irrelevanter, wenn ich n, wenn ich ne super Netzwerkverbindung, wenn ich gerade hinter Glasfaser sitze, dann ist alles egal.
Aber wenn ich mit meinem telefonisch irgendwo stehen, wo ich jetzt vielleicht nur e hab oder 3 g ja und ich dann Single Page application aufmachen will die 10 Megabyte runterladen möchte, dann ist es doof, ja, dann stehe ich dann eine ganze Weile lang ja so, da sagst du was also tatsächlich also der Fachbegriff glaube ich zumindest Google verwendet oder suchmaschinenanbieter Allgemeines die sogenannte Barrierefreiheit und Google testet in dem Fall, wie schnell
eine Seite geladen wird bei 3 g Verbindung und das ist das ist
der Gradmesser dafür, wie gut. Google ist der Google Algorithmus. Ich denke mal auch der Bing oder Duck go Algorithmus wie auch immer also wie gut die eine Website bewerten, was das Thema Barrierefreiheit angeht, das ist ein Faktor, ja quasi worst case ist halt nur 3 g Verbindungen tatsächlich da muss man ein bisschen gucken, dass man dieses Bündel ganz gut optimiert, ja also und das ist der Unterschied ne du hast natürlich das ist vielleicht ein Vorteil von den
Multi Page Applications, weil das initial loading, also der die Response beim ersten Mal klicken, ist. Vermutlich im Schnitt kann man sagen schneller, weil der die Informationsdichte die rüberkommt. Einfach geringer also ich muss weniger Daten laden, das heißt ich das Rendering ist viel schneller da.
Bei der Single Application kanns halt Moment dauern, weil ich halt wie gesagt mehr Daten erstmal laden muss, dafür ist es dann aber im Folgenden die folgende Experience ist halt quasi in Echtzeit feil ich schon alles da hab und das quasi das ist ja so, als hätte ich mir ne ganz normale Desktop Anwendungen nicht also man könnte es auch gleich hätte ich mir normale Anwendungen implementiert und das ist dann halt so schnell wie mein Computer schnell ist so ja wenn ich keine Daten brauche und
da muss man jetzt aufpassen dass also das würde jetzt auch keinen Sinn machen. Ne Single Page application zu machen, die dann nie wieder Daten vom irgendein Internet oder n Server braucht, das typischerweise auch nicht der Fall das passiert dann auch aber und das ist find ich so elegant die Daten die ich dann brauche, die werden dann typischerweise
immer eine API. Gezogen also dann hat quasi muss man jetzt mal auseinander nehmen also ich habe bestimmte US von einem Server jetzt bei der nach wie vor in der Singleplayer Application richtig, die dann zwischendurch aber dann doch mal wieder neue Daten nachladen und das tut sie dann über eine über
¶ Daten laden über APIs
eine API oder API Programming Interface, was eine Schnittstelle zwischen 2 softwareprogrammen ist oder halt Programmierschnittstellen in diesem Sinne. Genauso ist es typischerweise ist das. Typischerweise aber ganz oft ist das der gleiche Server sogar ne also ich hab das sind nur quasi 2 Qualitäten einmal frage ich den Server ab um mir ne HTML Seite oder halt ein Bündel zu
geben. Von der SPA lade ich euch das Programm runter und danach benutze ich den Server ne API auf dem Server und wir bestimmte Daten zu geben ich vielleicht noch 1 zu diesen Apps sind auch rest APIS das wenn man REST das sieht man hört man oft. Das ist wohl der Klassiker sag ich mal wie man diese App. Wie implementieren die in Singapur Applications Daten nachgeben also n Daten? Ne, das kann alles mögliche sein, das kann aber auch ganz
wenig Daten sein. Ich kann zum Beispiel spezielle Datenbankabfrage haben, wo ich nur nur Adress oder Formular Informationen brauche mit mit Vorname, Nachname, Email, Wohnort und so weiter und jetzt brauche ich jetzt kann ich einer Single Page application genau nur diese Daten anfragen und das wird heute in der modernen Welt wird die werden diese Daten nicht mehr im innerhalb von HTML. Seiten durch die Gegend geschickt, sondern nur noch als Daten, Daten und das Format ist da.
Jason darüber müssen wir unbedingt nochmal extra folgen. Ich liebe Jason, aber Jason ist nichts anderes als quasi ne Hülle Verpackung von von von diesen Daten und da ist halt da klebt halt nicht mehr viel drumherum ja, das ist das minimale, was ich ausdrücken muss, um diese Daten zu verstehen ne und das ist natürlich mega Geschwindigkeitsvorteil, als würde ich jetzt diese ne an der Multi Page application Welt muss ich diese Daten halt immer
wieder? In Form von einer komplett veränderten Webseite irgendwie mitziehen, ne, ich hab mal das Datenformat Jason könnte man vielleicht sagen genau Mayer
gesehen? Das heißt, dass das baut sich dann irgendwo in der HTML Seite, also das ist quasi ein Platzhalter drinne richtig und dann wird da das entsprechende Datum oder die Daten reingesetzt ja genau, das haben wir noch nicht besprochen, müssen wir noch besprechen, wir es verstehen wollen und die funktioniert ja nur, wenn wir, wenn wir eine Programmiersprache mit drin haben und im Prinzip kann man sich so vorstellen, dass diese am Ende der Browser,
der der liebt, der passt trotzdem ständig HTML Seiten und aber was passiert bei einer Single Page Applications?
Hasen gesagt, passen ja genau Partner ist ja nur Partner, heißt interpretieren, ne auswerten, ne, das macht er, weil die ganzen die HTML Sachen, die wollen ja vorher geladen werden, nicht direkt angezeigt, aber navigieren brauchst du trotzdem dauernd neue Gepasste ja genau der Browser hat ja die Aufgabe zu sagen OK, das habe ich hier alles für tags und was habe ich für ein Casting Style Sheet, also ich Informationen und der muss da raus die Anzeige du willst ja schön sehen, dass
es tatsächlich so aussieht. Das nennt man passen also er muss alle Informationen die er findet zu diesem zu dem Text. Den Inhalt zu den Elementen und zu dem Styling Elementen zusammenfassen, um dann ein konsistentes Bild zu geben und das können die Browser am besten so das ist das, wofür die eigentlich gemacht wurden, ne und das machen die im Prinzip bei einer Single Page Application auch.
Bloß dass derjenige, der dir die neue HTML und CSS Welt zur Verfügung stellt, jetzt nicht der neue der nächste Serveraufruf ist, wo das wieder so ankommt, sondern ein javascript Programm im Prinzip. Diese Anwendung in sich manipuliert quasi on the Fly. Die original runtergeladene HTML Seite und kann damit machen, was sie will, also kann quasi Inhalt und tags und Elemente hinzufügen. Attribute und auch das Styling ändern ganz dynamisch und dem
¶ Wann SPA, wann MPA?
Browser des quasi neu vorzeigen. Zum bitte jetzt auswerten bitte, jetzt rennen dann ja, ohne dass du n Server involviert war. Das passiert alles in deinem Browser ja und da die Browser relativ schnell sind und auch unsere Endgeräte unsere Hardware ja auch relativ mächtig geworden ist. Kann man damit ziemlich coole Effekte machen?
Ja, also Animationen und so weiter kannst du durch die Gegend fliegen lassen, färben und so weiter, man hat ja schon alles mögliche Wahnsinnige gesehen aus dem Web das geht halt. Das geht dann besonders gut, wenn du Single Page application hast, weil du weil der Browser in wahnsinniger Geschwindigkeit quasi diese neuen Informationen die du generieren kannst wieder anzeigen kann.
Das kannst du dann auch noch mischen mit Daten, die du irgendwo abfragst von einem Server und die können ja irgendwo anders liegen, OK dann ziemlich schnell noch ne Trennung reinbringen. Sag ich mal klassischer Website, ich sage mal also jetzt machen wir weil wir haben ja Homepage heisst.com und ich meine, die war mal eine SPA ist sie MPR, weil sie nun inzwischen gehostet wird?
Bei einem Third Party CMS Provider vorher hattest du die selbst geschaffen, richtig gesagt, jetzt abgenommen und das andere ist ja quasi unser Heim App Bilder also unser Produkt das wiederum werde ich nicht anfassen. Das heißt, das eine ist ein Produkt, was man sich natürlich, was man als saas Anwendungen nutzen kann, wenn man bei uns Kunde ist und das andere ist unsere Website darf natürlich jeder und jede jederzeit aufrufen. Das sind also 2 Arten von Web Anwendungen oder Webseiten.
Ja genau also was bietet sich mehr an? Also kannst du dazu was sagen? Ja klar also das eine ist halt n Typ also ich würde sagen das ist eine Webseite tatsächlich also unsere unserer Web. Unsere Webseite man sagt ja sogar Webseite Webauftritt das ist eine Webseite und warum.
Ob man Seite das impliziert so n bisschen, dass relativ statisch da passiert ja auch nicht so viel also man kann natürlich auch preiswert kommen klicken, da springt dann vielleicht mal ein Buch wenn Maus drüber hält oder irgendwas was macht dieses Cascading stylesheet und so weiter? Aber ansonsten hab ich ja keine realtime. Anzeige von Hohen sind alle statische Inhalte sind erstmal
für alle richtig. Und deswegen macht es Sinn, sowas halt auch im in nach Alter Schule quasi zu implementieren. Das hat auch einen Grund. Jetzt muss ich noch ein Wort sagen SEO du hast ja, das ist ja für dich ist das K aber s ja genau n riesiges Thema, ne also search engine optimization? Seo hat damit zu tun wie kann ich aufgefunden werden?
In Suchmaschinen? Höchsten relevant, Google, weil immer noch der größte Marktanteil kommt jetzt mit der kommt hab ich auch gehört, aber es ist immer noch einstellig glaube ich oder so. Naja und weil das aus der alten Zeit stammt und weil das technologisch halt auch einfacher ist es gibt, dass die gesunden Crawler, die das sind, quasi dann nicht nicht Anwender wie du und ich, sondern Computerprogramme im Fall von Google, die rufen quasi dann
alle möglichen ULS auf die die hat Google irgendwie kennt und indizieren das quasi, um um es zum um s Teil dieser Google Suchanfragen zu machen und die gucken sich bestimmte Informationen. Auch dieser HTML Seite an das sind die unsichtbaren Informationen. Wir angesprochen, weil es immer 2 Teile.
Mindestens ein Header und Body gibt es auch Text, Header, Tag und Buddytag im Body Tag sind die sichtbaren Contents Inhalte von der Seite und im Header Tag sind die Unsichtbaren, wo man alle möglichen meta Informationen verteilen kann, sondern welche Firma steht dahinter? Wie oft soll das irgendwie recht werden, wie wie, wie zeigt sich das an auf einer großen Seite wäre es, keiner Seite und so
weiter. Und sofort, da gibt es alles drin und diese diese Daten, die werden quasi von diesen Crawlern analysiert und die können sich quasi auf die Webseite mal ändern lassen. Als Programm für Vorschau.
Google mal sieht ja schon so ein bisschen bildlich Inhalt von und das funktioniert besonders gut bei so einer normalen Webseite ja, und bei einer Single Page Application ist das total kompliziert, weil da muss der callya quasi auch der kriegt dann, wenn das auf einmal nicht mehr einfach eine Seite der verstehen kann, sondern ein Programm mehr oder weniger ein ganzes Bundle und also Google arbeitet daran.
Das geht auch, aber man muss n bisschen also da muss noch ein bisschen mehr tun, wenn man da die SEO. Sachen optimieren möchte und das kann ich jetzt vielleicht als Marketingmensch sagen warum möchte ich natürlich für bestimmte Suchbegriffe möglichst hoch in den Suchergebnissen der jeweiligen Suchmaschine stehen und um das zu tun, muss ich dann eben den den Best Practices folgen? Wie der Algorithmus mich möglichst weit oben stehen
lässt? Ja ja, genau da sind wir mit einer Multipage Application wahrscheinlich einfacher, auf jeden Fall. Das ist so, das kann man so sagen und unsere Webanwendungen, das ist ja quasi schon so ein bisschen wie eine wie eine Anwendung. Wieso powerpoint oder Excel oder irgendwas? Die Richtung geht ja, das heißt, da hab ich ganz, ganz viele user Interaktionen und ganz viel in Echtzeit will ich irgendwas
sehen. Ich schiebe ein Element auf ein anderes oder ich lösche was war sofort weg sein und so weiter das das bietet sich einfach an das als Single Page Application zu machen ne, man muss auch noch was sagen, vielleicht die diese javascript Frameworks, die die modernen, die da ganz viel Open Source Möglichkeiten bieten, als Entwickler sowas zu zu realisieren, das sind das werden dann Single.
Applications also React application machst, dann ist das Single Page OK, da hattest du mal die 3 wichtiger gewähnt Red wie US genau Angela genau es gibt noch. Hab ich gerade nicht selber sind Frameworks, die benutzen genau sind javascript Frameworks und da steckt schon drin also da ist quasi. Also wird javascript wird halt quasi diese Application der Application Aspekt realisiert, dass ich quasi Anwendung hab und jetzt nochmal wir sind einfach
komplex, aber ich will es nicht. Wir können es nicht schneiden in Schwarz und weiß es gibt zwar MPR und SPA, aber die ganzen Optimierungsmöglichkeiten der SPA bieten die auch so Sachen wie Dynamic also du kannst dann quasi s doch wieder so ein bisschen MPR mäßig machen, indem du zur diese Bündel die du lädst auch per Klick nachladen kannst. Also ich sag mal so du hast wenn deine SPA sehr groß ist und die würde 10 Megabyte sein.
Dann kannst du trotzdem sagen OK, ich lad aber erstmal nur 2 Megabyte Bündel, das zeigt mir dann auch am Anfang nicht mehr an als diese und diese Sachen, aber zum Beispiel in der Navigation und wenn ich in bestimmte Navigationsmenüpunkt drücke, dann habe ich dafür eigentlich die Anwendung nicht geladen bis jetzt und jetzt in dem Moment wo ich drücke, frage ich noch mal ne andere UL an von dem Server mit leicht anders und die liegt mir quasi den zweiten Teil dieses Bundles also du
kannst quasi eine Webanwendung splitten in beliebige. Bandes relativ modernen Technologie. Und dann bist du so auf einer Zwischenebene zwischen ich lad alles in einem Schlag versus Guide Page alleine das sind ja die beiden extremen MPR wir versus Single Page, ja Schwarz und weiß. Es gibt also aber auch grau dazwischen so ja, um das alles total gut zu optimieren und das ich vermute mal, dass wir das so machen in unserer ja, wir machen
das auch so ja genau. Dann ist mir noch ein Thema eingefallen, auch wieder vielleicht im Marketing relevanter, oder oder Produktmanagement, auch wenn man seine User ein Stück weit. Verstehen möchte also, wie verhalten die sich auf einer Website. Also klicke ich jetzt den Button wird diese Seite aufgerufen wie lange hat sich jemand auf einer bestimmten Seite aufgehalten?
Und das sind Sachen, die möchte ich im Marketing wissen, ne, dann mache ich auch wenn ich also natürlich diesen Cookie consent bekomme also Zustimmung, dass jemand gepackt wird natürlich anonym, wie das mit DVO nur möglich ist, dann würde ich die Analytics machen und das geht wahrscheinlich mit einer Multiplikation einfacher, weil ja wieder so ne serverkommunikation du sagst es ja genau genau richtig liegt auf der Hand. Genau und weil die im Prinzip
verliert, ja der Server, wenn er nicht gerade über eine API dieses Tracking macht, da muss man sich aber auch schon wieder das ist ein Non Standard. Bedeutet Extraaufwand eigentlich weiß der Server ja, nachdem du, nachdem er dieses Bundle abgegeben hat, nicht mehr, was du dann alles gerade klickst und anguckst wie lange und wie oft weil weil das ja quasi isoliert bei dir in deinem Browser abläuft, ja sofern nicht gerade irgendwie im Hintergrund irgendwie nach Hause telefoniert
wird. Wollte noch eine Sache sagen zu es ist ja so wenn du eine Webseite auf n Server aufrufst jetzt mal grad, egal ob der jetzt SPA zurück gibt oder oder eine einzelne Seite, dann hast du ja normalerweise HTTPS da vorne dran stehen, ja was so viel heißt, dass ist hier TS verschlüsselt, oder das alte Wort TSSL und da passiert n bisschen was denn der Server muss quasi ne Kryptographie durchführen und das ist typischerweise ein aufwendiger Prozess. Das ist nicht gerade furchtbar
schnell ja. Und in der Multi Page Application muss er das jedes Mal tun. Mit jedem neuen Klick jedesmal, wenn du dich bewegst. Quasi entsteht eine neue Verbindung hat auch schon also es wird neu angewählt, wird neu authentifiziert. Das ganze Gedöns passiert neu für jedes Seiten laden ne.
Und nachdem die Seite geladen ist, wieder komplett aufgelegt, die Verbindung getrennt, ja und dann wieder und sofort ja, das ist halt auch ein Performance Problem wenn du und wenn du das jetzt schnell machen müsstest, die ganze Zeit, dann wird das zum Problem werden, oder? Das Single Page Application
Diesen Prozess nur einmal hast. Du willst einmal an den Server und dann kommt die ganze SL also nur den TLS Authentifizierung und so weiter und wenn das passiert ist, bekommst du über den sicheren Kanal die Anwendung zurückgeschickt und wenn die erst mal da ist? Brauchst du keine weitere Authentifizierung zu machen, weil es läuft ja schon in deinem Browser für die Staaten nachladen muss, natürlich wieder dann auch das muss auch sicher geschehen.
Es ist aber ein anderer. Ist dann quasi funktioniert dann über diese PI Schnittstelle hat dann erstmal nichts mit der Webseiten HTTPS authentifizierung zu tun ne OK
¶ Progressive Web Apps (PWA)
gut so viel dazu erstmal gut, also noch ein weiteres technischer Punkt, der dazu führt, dass erstmal. Flüssiger wird im Verlauf einer Nutzung einer Single Page Application genau vielleicht noch ein kleiner OK noch der letzte noch wenn wir erst mal Single Page Application sind, dann ist es nicht mehr weit so progressive Web App PWAOK.
Jetzt wollte ich noch drucken lassen, weil das auch etwas ist, was wir machen es nämlich ganz schick, denn im Prinzip kann man sagen ja, wenn man jetzt quasi das noch n bisschen gut vorbereitet. Die Single Page Application und die bestückt mit einem sogenannten Manifest und so weiter, was aber eigentlich nur Informationen, wie man die richtig quasi das Bündel nochmal schicken.
Zusammenbaut dann. Werden diese Single Page Applications besonders gut unterstützt von den Geräten zum Beispiel Mobiltelefon und erlauben über diese Technologie sogar den Zugriff auf die Hardware, also nicht nur es ist nicht nur so, dass dein Browser als rendering Maschine quasi das
anzeigt die Anwendung sondern. In dieser Anwendung kann angefordert werden, dass du Kamera, Mikrofon, GPS, Bluetooth, was nicht alles irgendwie benutzen möchtest und das kennst du, dass du manchmal fragt sich der Browser Lau Kamera oder sind mit dieser noch präsenter bei den meisten ne genau da musst du einmal am Anfang wieder über Apps, das sagst du einmal sagen OK, ich möchte gerne zugreifen auf la la la hast ja darfst du und dann kannst du sogar, dann kannst du
sogar den die Hardwareressourcen deine deine Endgeräte benutzen.
Obwohl du eigentlich eine Web Anwendung geschrieben hast und dass und was dahinter steckt, ist mehr als man vielleicht unten irgendwie OK, cool so, aber es ist eigentlich so richtig cool, weil dann nämlich nur noch eine einzige Quelle Code schreibst und die übergreifend Ubuntu Windows Mac I OS, Android Mobil Tablet Desktop immer gleich funktioniert ja, obwohl du nur eine Codebase hast, muss sie zeigen, dass wir unserer noch nicht, aber wenn ich.
Native das wäre das andere Beispiel native App, die auf dem Telefon läuft native wäre eine i OS App oder eine Android App oder eine Versorgung genau, dann muss ich quasi den.
Den den sogenannten Software Development Kits, also der Art und Weise, wie wie I OS meint, dass das zu tun wäre oder Android meint Folgen und dann entsteht verschiedenen unterschiedlichen Code. Gibt es jetzt auch wieder Tools, die das n bisschen abnehmen, aber trotzdem dennoch ja, es ist halt so entspannt ziemlich mächtige Anwendungen zu machen, mit Hardwarezugriff über diese Technologie.
Cooler Ausblick auf jeden Fall ich würde tatsächlich gerne dazu PS nochmal extra ne das machen wir weil wir haben ja noch ein bisschen vor uns alles klar cool also auf meinem Zettel ist nichts mehr. Wir haben das soweit alles besprochen. Hast du noch ein Thema? Nee beim Thema R ich glaube, wir machen den Sack zu. Dann vielen Dank wieder, dass ihr dabei wart und ja, bis nächste Woche, so sieht's aus Hamburg.
Vielen Dank fürs Zuhören dieser Folge von einfach komplex die Folge gefallen dann lass uns doch ne gute Bewertung da oder Teile die Folge mit jemanden aus seinem Netzwerk für Kritik zufolge Anregungen und Fragen für neue Folgen, freuen wir uns auf deine Email an Podcast Dateien r Punkt com Abonniere jetzt unseren Podcast um keine Folge mehr zu verpassen bis zum nächsten mal Tschüss aus Hamburg h.