
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.
Porsche hat Next JS gegen Astro JS geändert
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.
Welche Unternehmen sind bereits zu Astro JS gewechselt?
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
Forschung im Jahr 2024 unter Entwicklern
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.
Zeigen Sie Ihre 100 Punkte im Lighthouse an
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.
Warum sollte ich die maximale Punktzahl in Google LightHouse erzielen?
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:
- 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.
- 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.
- 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.
- 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!
Warum ist die Geschwindigkeit einer Website sehr wichtig?
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!
Website-Konvertierungs-Rechner
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.
Rendermethoden
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.
Cleveres Link-Prefetching
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.
UI-agnostic
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.
Bilder optimieren
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.
Was kann man mit Astro machen?js?
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.
Was ist der Unterschied zwischen den Chunks in Next.js und Architektur der Inseln in Astro.js?
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.
Mehr über headless CMS
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.
Beispiele für CMS
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
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.
Wie arbeiten wir an Projekten? Unsere Prozesse
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.
Spezieller Server für internationale Projekte
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
Wie gehen wir mit Marketing um
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.
Weitere Bereiche
PWA
Entwicklung progressiver Webanwendungen (PWA), die sich mit einem Klick aus dem Browser auf dem Telefon installieren lassen.
Telegram-Mini-App
Wir entwickeln Mini-Apps für Telegram, die Ihnen helfen, Aufgaben zu automatisieren, den Kundensupport zu verbessern oder den Nutzern neue Services anzubieten.
IT-Outsourcing-Teams
Wir bieten IT-Outsourcing-Teams zur Erledigung von Aufgaben jeder Komplexitätsstufe.










