SlideShare ist ein Scribd-Unternehmen logo
1 von 29
Downloaden Sie, um offline zu lesen
cosee GmbH, Mohamad Ramadan, @ramdadam
Hybrid Web Apps
Über mich
Frontend
Engineer
ReactJS Gatsby
Über Gatsby
Gatsby is a free and open source framework based on React that helps
developers build blazing fast websites and apps.
Gatsby Features
● PWA
● Prefetch
● Page Caching
● Responsive Image Loading
● Progressive Image Loading
● und vieles mehr
Gatsby Features
● Starters – »Plug and Play« Prinzip
● Gatsby CLI – kein lästiges Aufsetzen und Konfigurieren
● Plugins – Erweiterbarkeit
● Hooks – anpassbarer Build Prozess
m.M. nach der beste Starter für jede React Web App
Gatsby für Apps
Gatsby Demo
Demo
Gatsby Internals
Wie generiert
Gatsby eine App ?
Live Coding
Gatsby Internals
Gatsby Internals
Dynamischer Inhalt
Integration
von dynamischen Daten
Live Coding
Dynamischer Inhalt
Dynamischer Inhalt
Gatsby is an excellent framework for building web apps. You can use
Gatsby to create personalized, logged-in experiences with two different
approaches.
1. »hybrid« app pages, and
2. client-only routes & user authentication
https://www.gatsbyjs.org/docs/building-apps-with-gatsby/
Rendering Methoden
Wie und was
wird ausgeliefert?
Rendering Methoden – Kennwerte
Zeit zwischen der Anfrage und dem
ersten empfangenen Byte
TTFB (Time to First Byte)
Zeit die vergeht bis das erste Pixel für
den User sichtbar ist
FP (First Paint)
Zeit zwischen einem Content-Request
und der Anzeige der Daten
FCP (First Contentful Paint)
Zeit die vergeht bis der Inhalt
interaktiv wird
TTI (Time To Interactive)
Rendering Methoden
Google Developers: Rendering on the Web (https://developers.google.com/web/updates/2019/02/rendering-on-the-web)
Server Rendering
Hohe Auslieferungszeit (TTFB)
Seite wird vom Browser nur gerendert
und danach interaktiv nutzbar (FCP, TTI)
Templates werden oft serverseitig befüllt
und sind Teil der Codebasis
Ausgeliefertes JS beschränkt sich oft nur
auf (erweiterte) Interaktivität
CSR with Prerendering
Schnelles Rendering aber durch
Synchronisations-Aufwand höhere TTI
Sehr kurze Auslieferungszeit (TTFB):
Runtime bezieht »prerendered page«
und rendert nur noch
Full CSR
Hohe Aufbauzeit
dadurch verzögert sich das Rendern (FCP)
Kurze Auslieferungszeit (TTFB)
Seite ist erst interaktiv nachdem
gerendert wurde (damit hohe TTI)
Mit »Chunks« können große Anwendungen
kleiner geschnitten werden (FCP)
Rendering Methoden
Wer gewinnt?
CSR with Prerendering?
It depends.
Source: Max Lawton – unsplash
Rehydration
Welcher Methode
bedient sich Gatsby?
Rehydration
https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
Rehydration
Oft reichen Hybrid Pages nicht aus:
● Authentication
● Custom Routing
Client Only Routes
Full CSR
Client Only Routes
Full CSR – Route definieren
Oder einfach ein Plugin nutzen: gatsby-plugin-create-client-paths.
Full CSR
Live Coding
Full CSR – Gatsby Mail
Gatsby Mail by github.com/DSchau
Summary
● Gatsby ist ein mächtiges Framework:
● Features sind einfach zu benutzen
● Full CSR, Hybrid Pages und statische Pages können gemixt werden
● Entwickler muss abwägen welche Rendering Methode in Frage kommt
(TTFB, TTI, usw.)
fürs Zuhören!
Danke

Weitere ähnliche Inhalte

Ähnlich wie Hybrid web apps

ULC Connect-Nachlese, 06.03.2014 Dresden
ULC Connect-Nachlese, 06.03.2014 DresdenULC Connect-Nachlese, 06.03.2014 Dresden
ULC Connect-Nachlese, 06.03.2014 Dresden
JRibbeck
 

Ähnlich wie Hybrid web apps (20)

JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
 
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
 
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
JavaScript SEO - Crawling, Indexierung und Auditing von JavaScript-Websites -...
 
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch SalzburgSlides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
Slides zum Impulsreferat: HCL UDP - DNUG Stammtisch Salzburg
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
Java in the Cloud - am Beispiel der Google App Engineg
Java in the Cloud - am Beispiel der Google App EnginegJava in the Cloud - am Beispiel der Google App Engineg
Java in the Cloud - am Beispiel der Google App Engineg
 
HCL Domino 14 - Leap 1.1.2 - DNUG Stammtisch Wien
HCL Domino 14 - Leap 1.1.2 - DNUG Stammtisch Wien HCL Domino 14 - Leap 1.1.2 - DNUG Stammtisch Wien
HCL Domino 14 - Leap 1.1.2 - DNUG Stammtisch Wien
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
 
ULC Connect-Nachlese, 06.03.2014 Dresden
ULC Connect-Nachlese, 06.03.2014 DresdenULC Connect-Nachlese, 06.03.2014 Dresden
ULC Connect-Nachlese, 06.03.2014 Dresden
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
 
Front End Performance Optimierung
Front End Performance OptimierungFront End Performance Optimierung
Front End Performance Optimierung
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
HTML5 für Entwickler: Part 1, 2 und 3, 2013
HTML5 für Entwickler: Part 1, 2 und 3, 2013HTML5 für Entwickler: Part 1, 2 und 3, 2013
HTML5 für Entwickler: Part 1, 2 und 3, 2013
 
GWT
GWTGWT
GWT
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
 

Hybrid web apps