Logo

Astro JS

Extrem schnelles Framework zur Erstellung von Websites mit hybrider Islands-Architektur und intelligenter Hydration

Ein neuer Held
in der Webentwicklung

Unternehmen setzen zunehmend auf ihn, um Websites schneller, leichter und moderner zu machen.

Das Foto unten zeigt den Code der Porsche-Website, auf dem die Astro JS-Dateien zu sehen sind. Wir gehen davon aus, dass die besten IT-Experten in diesem Unternehmen tätig sind und die richtigen Entscheidungen getroffen haben.

Viele führende Unternehmen aus verschiedenen Bereichen verwenden moderne Frameworks der nächsten Generation für ihre Projekte.

Dies sind technologisch ausgereifte Teams mit hohen Leistungsanforderungen — die Spezialisten dieser Unternehmen wählen Werkzeuge aus, mit denen Sie schnelle, zuverlässige und skalierbare Lösungen erstellen können.

  • Ikea.com
  • Netlify.com
  • Proton.me
  • Firebase.blog
  • ai.cloudflare.com
  • nordvpn.com
  • theguardian.engineering
  • limpbizkit.com

State of JavaScript 2024: Meta-Frameworks ist eine große jährliche Studie, die unter Entwicklern aus der ganzen Welt durchgeführt wird. Sein Ziel ist es zu verstehen, welche Technologien, Bibliotheken und Ansätze im JavaScript-Ökosystem beliebt sind und welche an Boden verlieren. Es ist nicht nur eine Umfrage, sondern eine Art Puls der gesamten Frontend-Community. Im Jahr 2024 waren es 14.015 Befragte.

Kurze Rückschlüsse auf Astro JS und Next JS

Leute lehnen Next JS ab. Wir wollen auch aufgeben. Weil er uns sehr oft betrügt und seltsame Dinge tut.

Mit Astro gibt es so etwas nicht

Der Anteil der Nutzer wächst und liegt bereits an zweiter Stelle.

Und die positivste Einschätzung

Maximale Ladegeschwindigkeit

Mit Astro erstellen wir Websites, die sofort geöffnet werden — unabhängig von ihrer Komplexität. Möglich wird das durch die Islands-Architektur und intelligente Hydration, die nur die tatsächlich benötigten Teile der Seite lädt.

Wir erreichen zudem konstant 100 Punkte im Google LightHouse.

Ganz einfach! Hier sind unsere letzten Arbeiten, die 100 Punkte erzielt haben.

LCP - 0.2 s!

Finanzmakler unter NDA. 2000 entwicklungsstunden.

IT-Firma aus London

LCP 0.3 s!

Reiseportal. NDA.

Google Lighthouse ist ein Tool zur Analyse der Leistung und Qualität von Websites. "Maximale Punktzahl" in Google Lighthouse bezieht sich normalerweise auf hohe Bewertungen, die in verschiedenen Analysekategorien wie Leistung, Verfügbarkeit, Suchmaschinenoptimierung usw. erzielt werden können.

Die maximale Punktzahl in Google Lighthouse ist aus mehreren Gründen wichtig:

  1. Benutzererfahrung: Eine hohe Punktzahl bedeutet, dass Ihre Website die beste Benutzererfahrung bietet. Schneller Download, Verfügbarkeit und optimierte Anzeige auf verschiedenen Geräten machen Ihre Website für Besucher attraktiver.
  2. SEO: Suchmaschinen wie Google berücksichtigen viele Faktoren, um das Ranking von Websites in den Suchergebnissen zu bestimmen. Die Verbesserung der Bewertung in Google Lighthouse kann sich positiv auf das Ranking Ihrer Website in der Suchmaschinenoptimierung auswirken.
  3. Wettbewerbsfähigkeit: In einer Welt, in der Benutzer eine große Auswahl an Websites haben, kann eine hohe Punktzahl bei Google Lighthouse Ihre Website unter den Wettbewerbern hervorheben und mehr Besucher anziehen.
  4. Umsatz und Conversions: Eine schnellere und bequemere Website kann zu höheren Conversions und Verkäufen führen. Wenn Benutzer leicht finden können, was sie brauchen und schnell einen Kauf tätigen oder ein Formular ausfüllen, werden sie dies wahrscheinlich tun.

So kann das Erreichen der maximalen Punktzahl in Google Lighthouse dazu beitragen, die Gesamteffizienz, Wettbewerbsfähigkeit und den Erfolg Ihrer Website zu verbessern.

In unserem neuesten Fall hat der Kunde die Website aktualisiert und den Traffic vervierfacht, während die durchschnittliche Position in den Suchergebnissen von Platz 30 auf Platz 10 gestiegen ist. Und das alles in nur einem Monat!

Jeder E-Commerce–Experte wird bestätigen, dass die Website-Geschwindigkeit ein entscheidender Indikator für Conversions, SEO und Marken ist. Wir haben unsere eigene Studie durchgeführt - Vergleich der Download-Geschwindigkeit von Websites, die auf Bitrix, Tilda, WordPress und Gatsby erstellt wurden

Im Folgenden finden Sie einen Beispielbericht aus Google Analytics einer regulären PHP–Website, bei dem der Traffic in zwei Segmente unterteilt ist: Das erste Segment führt Mikrokonvertierungen auf der Website durch (Hinzufügen in den Warenkorb, Schreiben in einen Chat, Tippen auf einen Anruf) und das zweite Segment sind alle Besucher.

In diesem Bericht kauft ein Segment und hat eine Download-Geschwindigkeit von durchschnittlich 1,16 Sekunden. Das zweite Segment kauft nicht und hat eine durchschnittliche Download—Geschwindigkeit von 2,98 Sekunden.

Als nächstes haben wir uns die Verteilung des Downloads unter den Benutzern mittels eines Histogramms angesehen.

Hier kann man sehen, dass die meisten Benutzer mehr als 1 Sekunde heruntergeladen haben. Und 25 Prozent sind mehr als 3 Sekunden!

Wir haben diesen Rechner erstellt, um eine einfache, aber wichtige Sache zu zeigen — die Umwandlung einer Website wirkt sich direkt auf Ihr Geld aus. Sehr oft unterschätzen Geschäftsinhaber, wie sehr selbst eine kleine Verbesserung der Conversion das Finanzergebnis verändern kann.

Mit unserem Rechner sehen Sie die tatsächlichen Zahlen: Wie viele Gebote und Gewinne Ihre Website heute bringt und was Sie erhalten können, wenn Sie Ihre Conversion um mindestens ein paar Prozent erhöhen. Geben Sie die Daten ein und sehen Sie selbst, wie sich die Zahlen in Einnahmen verwandeln.

Weitere Informationen

Partielle Hydration und Islands-Architektur

Bei klassischen Websites lädt der Browser das gesamte JavaScript auf einmal, selbst wenn es beim Start nicht benötigt wird. Das verlangsamt das Laden und verschlechtert das Nutzererlebnis.

Astro löst dieses Problem mittels einer «Islands»-Architektur. Zuerst lädt die Website nur HTML und CSS — die Seite wird sofort sichtbar. JavaScript wird nur für jene Bereiche nachgeladen, in denen es wirklich benötigt wird, und genau dann.

Das macht die Website leicht, schnell und besonders benutzerfreundlich.

Astro unterstützt alle wichtigen Rendermethoden:

  • statische Generierung (SSG)
  • Server-Rendering (SSR)
  • Client-Rendering (CSR)

Es ist auch eine hybride Methode möglich, die es ermöglicht, alle Ansätze auf einer Seite zu implementieren. Und das zeigt eine große Flexibilität.

Astro verbessert automatisch die Geschwindigkeit der Navigation innerhalb der Website mit Hilfe der Technologie des Prefetchings. Dies bedeutet, dass Astro den zugehörigen Inhalt vorab lädt, wenn ein Benutzer den Cursor auf einen Link setzt oder ihn in Sichtweite scrollt. Wenn Sie also tatsächlich zu einer neuen Seite wechseln, wird sie sofort geöffnet, wodurch das Gefühl entsteht, sofort geladen zu werden.

Dieser Ansatz ist besonders wichtig für moderne Websites, auf denen sich Geschwindigkeit und reibungslose Interaktion direkt auf die Benutzererfahrung auswirken.

Astro ist eines der wenigen Frameworks, mit dem Sie Komponenten aus verschiedenen Ökosystemen in einem Projekt mischen können. Willst du einen Teil der Website auf React, einen anderen auf Vue und einen dritten auf Svelte — bitte! Dies ist praktisch für Migrationen und ermöglicht es Teams, die besten Tools für jede Aufgabe zu verwenden, ohne sich in die Rahmen eines einzelnen Stapels zu verlagern.

Mit Astro können Bilder problemlos in moderne WebP- und AVIF-Formate übersetzt werden, was ihre Größe ohne Qualitätsverlust erheblich reduziert.

Die Plattform schneidet Bilder automatisch in verschiedene Versionen für verschiedene Geräte, um die optimale Qualität und Download-Geschwindigkeit für jeden Bildschirm zu gewährleisten. Sie können auch die Komprimierungsstufe anpassen, um die Balance zwischen Qualität und Dateigröße zu steuern.

Alles ist so einfach und bequem wie möglich umgesetzt und bietet Entwicklern leistungsstarke Tools, um ihre Bilder mühelos zu optimieren.

Mit Astro können Sie beliebige Webprojekte erstellen, von einfachen Websites bis hin zu komplexen Anwendungen. Dies ist durch die Unterstützung aller Arten von Rendering möglich: statisches (SSG), serverseitiges (SSR) und hybride Ansätze.

Mit Astro sind sie hervorragend für die Entwicklung geeignet:

  • Firmenwebsites
  • Nachrichtenportale und Medien
  • E-Commerce-Projekte und Online-Shops

Wenn Sie eine vollwertige einseitige Anwendung (SPA) oder eine progressive Webanwendung (PWA) benötigen, können Sie Vite und React zusammen mit Astro verwenden, um die erforderliche Interaktivität und dynamische Funktionalität hinzuzufügen.

Astro ist ein flexibles Werkzeug, mit dem Sie ein Projekt beliebiger Komplexität zusammenstellen können.

Die Ziele der Chunk sind in Next.js und Inseln in Astro.js sind ähnlich, aber es gibt wichtige Unterschiede.

In Next.js ein chunk wird entlang der Route geladen und in Astro.js - mehrere Hydrotationen von Inseln nach Komponenten. Dies bedeutet, dass es mehrere kleine Dateien auf einer Seite geben kann, die je nach der für jede Insel definierten Logik geladen werden.

In Next.der js-Chunk kann durch dynamischen Import in Teile zerlegt werden, aber die Komponente wird dann nur auf dem Client geladen.

In Astro.js alles passiert anders: Der Server gibt zuerst HTML mit CSS zurück und JS wird separat geladen, ohne dass das gesamte JavaScript geladen werden muss.

Wir gestalten elegantes Design

Wir entwickeln Identitäten und Interfaces nach höchsten UI/UX-Standards — ansprechend, nutzerfreundlich und durchdacht.

Beste Content-Management-Systeme

Wir implementieren einige der modernsten und besten CMS.

Wir verwenden die Logik eines Lego-Baukastens beim Erstellen von Seiten. Das bedeutet, dass jede Seite aus Bausteinen — „Komponenten“ — besteht, die sich sehr einfach befüllen lassen. Dafür sind keine besonderen Fähigkeiten erforderlich. Jede auf der Website vorhandene Komponente kann an einer anderen Stelle mit anderem Inhalt wiederverwendet werden.

Normalerweise versteht man unter CMS ein System, in dem man den Inhalt einer Website ändern kann, aber auch dort finden alle anderen Funktionen der Website statt — Frontend—Rendering, logische Operationen, Interaktion mit anderen Systemen usw. Alte Content-Management-Systeme sind solche Frankensteiner, die alles auf einmal können. Gleichzeitig ist alles auf einmal nicht gut.

Dieser Ansatz bringt einige Einschränkungen mit sich. Wenn Sie diesen Weg wählen, werden Sie eine Geisel des gewählten CMS. Es ist notwendig, seine Einschränkungen oder Verzögerungen in irgendeiner Weise zu tolerieren. Zum Beispiel verwendet WordPress eine sehr alte, langsame MySQL-Datenbank, und Bitrix hat im Allgemeinen viel Spaß. Und die Entwickler kamen auf die Idee, das Content-Management und andere Vorgänge der Website zu teilen. Dies geschieht, damit das veraltete Teil ersetzt werden kann und das gesamte System flexibler, unabhängiger und sicherer ist. Alle Teile kommunizieren über REST-APIs oder GraphQL, was den Weg für externe Integrationen ebnet. Das ist der Sinn des Headless-Konzepts.

Die moderne Entwicklung ist jetzt headless CMS und Frontend Framework zur Auswahl - Next, Gatsby usw.

Es gibt viele CMS-Lösungen auf dem Markt. Sie können in zwei Gruppen unterteilt werden: Cloud (Cloud) und Self-hosted (Self-hosted).

Der Cloud—CMS (in der Cloud) ist eine Lösung, bei der der Anbieter Integrität, Sicherheit und Updates übernimmt. Das ist praktisch: Sie müssen nicht an den Server und den technischen Support denken. Sie können den Systemcode jedoch nicht ändern und hängen von den Entscheidungen und Richtlinien des Anbieters ab. Obwohl wir in der Praxis keine ernsthaften Einschränkungen festgestellt haben.

Self-hosted CMS sind Systeme, die Sie auf Ihren Servern hosten. Sie geben Ihnen völlige Freiheit: Sie können den Code ändern, Funktionen hinzufügen und Integrationen hinzufügen. Aber die ganze Verantwortung für Unterstützung, Sicherheit und stabile Arbeit liegt bei Ihrem Team.

Es lohnt sich, je nach Projektaufgabe eine geeignete Lösung zu wählen. Hier sind einige Beispiele:

Prismic ist ein cloudbasiertes CMS. Sehr einfach zu verbinden und eignet sich für kleine Projekte, bei denen keine komplizierte Logik oder Verfeinerung erforderlich ist.

Strapi — self-hosted CMS. Geeignet für große Projekte und Aufgaben beliebiger Komplexität.

Contentstack ist ein cloudbasiertes CMS. Ideal für große Projekte und Teams, bei denen Zusammenarbeit und Skalierbarkeit wichtig sind.

Keystatic — self-hosted CMS für kleine Projekte mit einfachen Anforderungen.

Directus ist self-hosted oder Cloud. Ein universelles headless CMS, das sich gut für Unternehmensprojekte eignet, bei denen es wichtig ist, mit einer vorhandenen Datenbank und einer benutzerdefinierten Logik zu arbeiten.

JSON — Manchmal reicht eine normale JSON-Datei als Inhaltsquelle für kleine Projekte aus.

Sie können sehen, wie das CMS-Interface auf ihren Websites aussieht.

Wir verwenden keine klassischen CMS wie WordPress und ähnliches, da sie moralisch veraltet sind und nicht den heutigen Anforderungen an Sicherheit, Leistung und Benutzerfreundlichkeit entsprechen.

Wir sind immer bereit, Ihnen bei der Auswahl des CMS zu helfen, das am besten zu den Aufgaben Ihres Projekts passt.

Unser Arsenal

Klick auf den Chip

PWA
Conversion-Vorhersage
Gitlab
Code Review
Test-Driven Development
CI/CD
SCRUM
Komponentenansatz
Überwachung und Protokollierung

PWA

Unsere Websites werden leicht in PWA-Anwendungen umgewandelt, die über einen Browser auf dem Desktop Ihres Telefons oder Computers installiert werden können, ohne die offiziellen App-Stores zu umgehen.

Unsere Prozesse

Wir wollen erzählen, wie wir heute arbeiten und was wir jeden Tag anstreben.

Diese Prinzipien sind für uns ein Maßstab, der hilft, die Arbeit besser zu machen, ein effektives Team aufzubauen und starke Projekte zu erstellen.

Wir sind uns sicher: Um ein gutes Projekt zu machen, braucht es nicht nur Ideen, sondern auch eine klare, verständliche Organisation der Arbeit. Daher verwenden wir AGILE, SCRUM-Ansätze und halten uns an eine Kultur ständiger Verbesserungen.

Für uns ist es wichtig, einen Mittelweg zwischen Struktur und Freiheit zu finden: Dass das Team gerne arbeitet und der Kunde immer versteht, in welchem Stadium sich das Projekt befindet.

Unsere Projektmanagementkultur liegt in der Mitte zwischen den Ansätzen von Netflix und Google. Netflix setzt auf radikale Verantwortung und Entscheidungsfreiheit. Gleichzeitig verfügt Google über klare Prozesse und Ordnungen, die es Ihnen ermöglichen, vorhersehbar und systematisch voranzukommen. Wir versuchen, das Beste aus diesen beiden Methoden zu nehmen, damit unsere Prozesse gleichzeitig flexibel und zuverlässig sind.

Wir verstehen, dass es unmöglich ist, alle Nuancen und Details im Voraus vorzulegen. Daher erwarten wir vom Kunden keine perfekte TZ. Wir helfen bei der Formulierung von Aufgaben, klären Ziele und bieten Lösungen während der Arbeit an.

Wir wählen auch ein Team aus und arbeiten mit den Kunden zusammen, die diese Werte teilen. Denn nur in dieser Atmosphäre kann man ein cooles Projekt machen und Spaß am Prozess haben.

In unserem Arsenal an Praktikern gibt es:

Prozessor

Dies ist eine Teamveranstaltung, bei der wir die Führungsetagen im Debattenformat analysieren. Zwei Teilnehmer erhalten eine Problemsituation. Jeder hat eine Minute für die Vorbereitung. Der erste ist einer der Teilnehmer und bietet seine Managementlösung an. Der zweite Teilnehmer muss dann eine alternative Lösung anbieten - eine andere als die bereits geäußerte. Du kannst dich nicht wiederholen. Nach zwei Vorträgen wird die gesamte Entscheidung vom Team besprochen: Die Teilnehmer teilen ihre Gedanken, vergleichen Ansätze und stimmen für die effektivste Option ab. Dieses Format zeigt, dass die meisten Aufgaben auf verschiedene Arten gelöst werden können, und die kollektive Diskussion stärkt die Erfahrung und erweitert den Horizont. Wir verbringen alle zwei Wochen.

Achiv-Anwendung

Wir haben einen internen Mini-Service eingerichtet, in dem Sie Ihren Kollegen für Ideen, Initiative oder Hilfe danken können. Dies schafft eine Atmosphäre der Anerkennung und Unterstützung.

Lernportal

Hier gibt es Textsimulationen, Spiele und Tests zu verschiedenen Fachgebieten. Es hilft, Fähigkeiten in einem interaktiven Format zu pumpen.

Öffentlicher Code-Review

In der IT-Abteilung erhalten Entwickler jede Woche ein Stück Code, das sie in 15 Minuten analysieren müssen. Danach findet eine Gruppendiskussion statt, in der die vorgeschlagenen Änderungen verstanden werden. Dieser Ansatz bildet einen einheitlichen Qualitätsstandard und entwickelt eine Kultur des Feedbacks.

Baldiger Freitag

Die letzte Arbeitsstunde am Freitag widmen wir uns Teamspielen und einfacher Kommunikation. Dies kann ein GeoGuessr, Codenames, ein Gartic Phone oder andere Aktivitäten sein, die beim Neustart helfen, sich besser kennenlernen und einfach eine gute Zeit miteinander verbringen.

Marketingkoffer

Das Marketing-Team versteht regelmäßig die eigentlichen Aufgaben und Strategien der Förderung. Dies fördert die Kreativität und stärkt die praktischen Fähigkeiten.

Bibliothek

Wir haben eine interne Bibliothek mit Fachliteratur. Jedes neue Teammitglied liest ein Buch pro Monat und durchläuft dann eine Reihe von Praktiken, die helfen, das Gelesene besser zu verinnerlichen und anzuwenden. Dies kann eine Diskussion in einer Minigruppe, ein Test oder eine praktische Aufgabe sein, die sich auf den Inhalt des Buches bezieht.

SCRUM-Praktiken

Wir befolgen die wichtigsten Rituale von SCRUM: Wir führen täglich Dayli-Rallyes durch, um Aufgaben zu synchronisieren, verwenden die Planung mit Poker, um Aufgaben zu bewerten, führen Demo-Formate durch, um Fortschritte zu zeigen und Feedback zu erhalten, und veranstalten regelmäßig Retrospektiven, um Prozesse und Teamarbeit zu verbessern. Dieser Ansatz hilft uns, flexibel, transparent und effizient zu sein.

Wir verwenden einen speziellen Server für internationale Projekte. Dies ermöglicht eine gute Verbindung auf jedem Kontinent.

Die Website ist nur in Europa gut zugänglich

Die Website ist überall gut zugänglich

Bei der Marketingabteilung von Amitiso geht es nicht um Manipulation und schöne Slogans, sondern darum, Menschen, Zahlen und die tatsächlichen Bedürfnisse des Unternehmens zu verstehen.

In unserer Arbeit verwenden wir wissenschaftliche Ansätze und bewährte Methoden. Wir praktizieren keine "Zigeunertechniken« und folgen keinem »YouTube-Guru". Unser Team stützt sich auf grundlegendes Wissen, echte Literatur, Forschung und Daten.

Wenn für ein Projekt eine Marketinganalyse oder die Arbeit mit einem Publikum erforderlich ist, können wir unsere Spezialisten verbinden. Sie werden recherchieren, helfen, Ihre Zielgruppe zu verstehen, eine klare und ehrliche Botschaft zu formulieren, die wirklich funktioniert und nicht nur schön klingt.

Wir verwenden Daten und Forschung nicht nur, um den Markt und das Publikum zu verstehen, sondern auch, um sich inspirieren zu lassen. Die Analyse von Zahlen, Einsichten und Verhaltensweisen von Menschen hilft uns dabei, ungewöhnliche Ideen und kreative Lösungen zu finden, die sich auf Fakten und nicht auf Vermutungen stützen.