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