Auf dem Chrome Dev Summit 2014 wurden eine ganze Reihe von Themen und brandneue APIs behandelt. Es geht aber nicht nur um Neues und Innovatives.
Wenn Sie ein neuer Webentwickler oder sogar ein erfahrener Entwickler sind, der sich mit neuen APIs vertraut machen möchte, gehen Sie wahrscheinlich so vor: Lernen, entwickeln und iterieren.
Matt Gaunt berichtet über die laufenden Bemühungen des Chrome Developer Platform-Teams, diese Probleme zu beheben.
Lernen
Web Fundamentals ist eine Reihe von anwendungsorientierten Dokumenten zu verschiedenen Themen. Das Hauptziel besteht darin, Entwickler so schnell wie möglich von wenig oder gar keinem Wissen zur Implementierung von Best Practices zu bringen.
Eines der Hauptziele von Web Fundamentals besteht darin, dass Sie, wenn Sie mit einem Thema noch nicht vertraut sind, durch die Anleitung so wenig wie möglich in Entscheidungsnöte geraten. Addy Osmani erklärt das perfekt in Pastry Box.
Wenn Sie Probleme mit der Website oder ihren Inhalten feststellen oder möchten, dass in Web Fundamentals ein bestimmtes Thema behandelt wird, senden Sie uns bitte Feedback auf GitHub.
Build
Um Ihnen den Einstieg in ein neues Webprojekt zu erleichtern, haben wir das Web-Starterkit erstellt. Es bietet alles, was Sie brauchen:
- Solider Build-Prozess
- Boilerplate-HTML
- Gestaltungsrichtlinien
Der Build-Prozess
Wenn Sie mit Build-Prozessen noch nicht vertraut sind, können Sie sich einen Build-Prozess am einfachsten als Programm vorstellen, das eine Reihe von Dateien annimmt, bestimmte Aufgaben darauf ausführt und neue Versionen an einem anderen Speicherort ausgibt. Die Aufgaben optimieren die Dateien, um die Ladezeiten zu verbessern, prüfen auf mögliche Fehler oder erledigen Aufgaben, die automatisiert werden können.
Im Web Starter Kit gibt es die folgenden Prozesse:
Wir minimieren und verketten CSS und JavaScript, damit der Browser die Datei schnell abrufen kann. Außerdem wird der JavaScript-Code mit JSHint geprüft, um nach Best Practices für JavaScript und häufigen Programmierfehlern zu suchen. Bilder werden mit imagemin minimiert. Dadurch lässt sich die Dateigröße erheblich reduzieren. Wir haben auch einen Prozess zum Erstellen des CSS der Styleguides.
Boilerplate für HTML für verschiedene Geräte
Der erste HTML-Code, den Sie für eine neue Seite schreiben, ist ziemlich standardmäßig. Es ist wahrscheinlich, dass Sie schnell eine Standard-HTML-Datei finden, die auf mehreren Geräten und Bildschirmgrößen gut funktioniert.
Im Web-Starterkit wollten wir alle Funktionen unterstützen, die die Grenzen zwischen der Plattform und Ihrer Website verschwimmen lassen. Deshalb haben wir die Option Zum Startbildschirm hinzufügen und Splashscreens für Android, Windows Phone, iOS und Opera Coast hinzugefügt.
Gestaltungsrichtlinien
Der Styleguide ist das letzte Element des Web-Starterkits.
So stehen jedem neuen Projekt eine Reihe von Standardstilen und ‑komponenten zur Verfügung, die eine stilorientierte Entwicklung fördern. Sie können vorhandene Stile für Elemente ändern und eigene hinzufügen.
In der nächsten Version von WSK, die Anfang nächsten Jahres veröffentlicht wird, arbeiten wir intensiv daran, die Zusammensetzung des Styleguides zu vereinfachen und zu einem Material Design-Look zu wechseln. Mattzeigte auf dem Chrome Dev Summit einefrühe Mockup-Version, wie das aussehen könnte. Unten sehen Sie ein Beispiel.
Verbessern und wieder testen
Sobald Sie damit begonnen haben, Ihr neues Wissen in die Praxis umzusetzen, sollten Sie die DevTools verwenden, um Ihre Arbeit zu debuggen, zu verbessern und zu verwalten.
In den DevTools gibt es einige wichtige neue Funktionen. Matt nimmt sich die folgenden vor.
Gerätemodus
Der Gerätemodus ist ein neuer Bereich in den DevTools, mit dem Sie schnell sehen können, wie Ihre Website auf verschiedenen Mobilgeräten funktioniert, während Sie sich die Mediaabfragen in Ihrem CSS ansehen.
Eine der praktischen Funktionen des Gerätemodus ist die Möglichkeit, die Netzwerkgeschwindigkeit zu drosseln. So können Sie die Nutzung eines Geräts mit GPRS-, EDGE-, 3G-, DSL- oder WLAN-Verbindung simulieren.
Paint Profiler
Wenn Sie den Tab „Zeitachse“ geöffnet und die Schaltfläche „Aufzeichnen“ angeklickt haben, haben Sie wahrscheinlich einige Paint-Ereignisse in der Abfolge gesehen. Normalerweise wäre das eine Blackbox, in der Sie nicht sehen können, was der Browser getan hat oder tut.
Der Paint Profiler liefert keine weiteren Informationen dazu, was der Browser während des Paint-Vorgangs genau tut.
Tracking von Ungültigkeit
In den Entwicklertools wird jetzt immer dann, wenn möglich, ein Grund für ein Paint- oder Layout-Ereignis angegeben. Das ist nützlich für alle, die sich mit der Zeitachse und dem Browserverhalten vertraut machen möchten. Außerdem können Sie so Ihren Code optimieren, um Leistungsprobleme zu vermeiden.
Flame-Diagramm
Das ist eine ganz andere Art, sich die Informationen in der Zeitachse anzusehen. So lässt sich viel leichter erkennen, wie sich Aufgaben überschneiden und welches Browserverhalten auf andere Aufgaben zurückzuführen ist.
Frame Viewer
In der Flame-Chart-Ansicht können Sie einen bestimmten Frame auswählen. Daraufhin sehen Sie, welche Elemente auf der Seite zu einer zusammengesetzten Ebene zusammengefasst wurden und warum.
Infos Erstellen. Verbessern und wieder testen
Das Chrome-Team möchte Entwicklern den Einstieg in die Webentwicklung erleichtern. Sehen Sie sich daher unbedingt die Webgrundlagen, das Web-Starterkit und die neuen Funktionen in den Chrome-Entwicklertools an.