Auf dem Chrome Dev Summit 2014 wurden viele Themen und brandneue APIs behandelt. Es geht aber nicht nur um das Neue und Glänzende.
Wenn Sie ein neuer Webentwickler oder ein erfahrener Entwickler sind, der neue APIs kennenlernen möchte, werden Sie wahrscheinlich diese drei Schritte durchlaufen: 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 Sammlung von Anwendungsfall-Dokumentationen, die eine Reihe von Themen abdecken. Das Hauptziel ist es, Entwickler mit wenig oder keinem Wissen so schnell wie möglich zu Best Practices zu führen.
Eines der Hauptziele von Web Fundamentals ist es, dass die Anleitungen für Nutzer, die sich mit einem Thema noch nicht auskennen, die „Entscheidungslähmung“ so weit wie möglich reduzieren. Addy Osmani beschreibt das sehr gut in Pastry Box.
Wenn Sie Probleme mit der Website oder ihren Inhalten feststellen oder wenn Sie möchten, dass Web Fundamentals ein bestimmtes Thema behandelt, senden Sie uns bitte Feedback über GitHub.
Build
Um Ihnen den Einstieg in ein neues Webprojekt zu erleichtern, haben wir das Web Starter Kit erstellt. Es bietet alles, was Sie brauchen:
- Ein solider Build-Prozess
- Boilerplate-HTML
- Gestaltungsrichtlinien
Der Build-Prozess
Wenn Sie noch nicht mit Build-Prozessen vertraut sind, können Sie sich einen Build-Prozess am einfachsten als Programm vorstellen, das eine Reihe von Dateien verwendet, bestimmte Aufgaben für diese Dateien 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 übernehmen Aufgaben, die automatisiert werden können.
Im Web Starter Kit gibt es die folgenden Prozesse:
Wir komprimieren und verketten CSS und JavaScript, damit der Browser die Datei schnell abrufen kann. Das JavaScript wird außerdem mit JSHint auf Best Practices und häufige Programmierfehler geprüft. Bilder werden mit imagemin minimiert. Dadurch lässt sich die Dateigröße erheblich reduzieren. Außerdem haben wir einen Prozess zum Erstellen des CSS für die Styleguides.
Boilerplate für HTML für mehrere Geräte
Der erste Satz von HTML, den Sie für eine neue Seite schreiben, ist ziemlich standardmäßig. Wahrscheinlich haben Sie eine Möglichkeit, schnell eine HTML-Datei zu erhalten, die auf mehreren Geräten und Bildschirmgrößen gut funktioniert.
Im Web Starter Kit wollten wir Unterstützung für alle Funktionen hinzufügen, die die Grenzen zwischen der Plattform und Ihrer Website verwischen. Daher haben wir Unterstützung für Zum Startbildschirm hinzufügen und Splash-Screens für Android, Windows Phone, iOS und Opera Coast hinzugefügt.
Gestaltungsrichtlinien
Der letzte Teil des Web Starter Kit ist der Styleguide.
So erhält jedes neue Projekt eine Reihe von Standardstilen und ‑komponenten, die die stilorientierte Entwicklung fördern. Sie können vorhandene Formatierungen für Elemente ändern und eigene hinzufügen.
In der nächsten Version des WSK, die Anfang nächsten Jahres veröffentlicht werden soll, arbeiten wir intensiv daran, die Verwendung des Styleguides zu vereinfachen und auf ein Material Design umzustellen. Matthat auf dem Chrome Dev Summit einenfrühen Mockup gezeigt, wie das aussehen könnte. Unten sehen Sie ein Beispiel.
Verbessern und wieder testen
Sobald Sie Ihr neues Wissen in die Praxis umsetzen, sollten Sie DevTools verwenden, um Ihre Arbeit zu debuggen, zu verbessern und zu pflegen.
Es gibt einige wichtige neue Funktionen in DevTools und Matt sieht sich die folgenden neuen Funktionen an.
Gerätemodus
Der Gerätemodus ist ein neuer Bereich in den Entwicklertools, in dem Sie schnell sehen können, wie Ihre Website auf verschiedenen Mobilgeräten funktioniert, während Sie die Media-Queries in Ihrem CSS ansehen.
Eine der besten Funktionen des Gerätemodus ist die Möglichkeit, die Netzwerkgeschwindigkeit zu drosseln. So können Sie die Nutzererfahrung bei einer GPRS-, EDGE-, 3G-, DSL- oder WLAN-Verbindung simulieren.
Paint Profiler
Wenn Sie schon einmal den Tab „Zeitachse“ geöffnet und auf die Aufnahmeschaltfläche geklickt haben, haben Sie wahrscheinlich schon einige Paint-Ereignisse im Wasserfall gesehen. Normalerweise wäre das eine Blackbox, bei der Sie nicht wissen, warum der Browser etwas getan hat oder was er gerade tut.
Der Paint Profiler bietet Ihnen weitere Informationen dazu, was der Browser während des Paints genau macht.
Tracking von Entwertungen
In den Entwicklertools wird jetzt, wann immer möglich, ein Grund für das Rendern oder Layout angegeben. Das ist nützlich für alle, die sich mit der Zeitachse und dem Verhalten des Browsers 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 nachvollziehen, wie sich Aufgaben überschneiden und welches Browserverhalten sich aus anderen Aufgaben ergibt.
Frame Viewer
In der Flame-Chart-Ansicht können Sie einen bestimmten Frame auswählen und sehen, welche Elemente auf der Seite in eine Composite-Ebene verschoben wurden und warum.
Infos Erstellen. Verbessern und wieder testen
Das Chrome-Team hat einige Maßnahmen ergriffen, um Entwicklern den Einstieg in die Webentwicklung zu erleichtern. Sehen Sie sich daher Web Fundamentals, das Web Starter Kit und die neuen Funktionen in den Chrome-Entwicklertools an.