Lors du Chrome Dev Summit 2014, de nombreux sujets et de nouvelles API ont été abordés, mais il ne s'agit pas uniquement de nouveautés.
Si vous êtes un nouveau développeur Web ou même un développeur expérimenté sur le point d'explorer de nouvelles API, vous suivrez probablement ces trois étapes: apprendre, créer et itérer.
Matt Gaunt présente les efforts continus de l'équipe Chrome Developer Platform pour résoudre ces problèmes.
Apprendre
Les Principes de base du Web sont un ensemble de documentations basées sur des cas d'utilisation couvrant un large éventail de sujets. L'objectif principal est de faire passer les développeurs de peu ou pas de connaissances à la mise en œuvre des bonnes pratiques le plus rapidement possible.
L'un des principaux objectifs de Web Fundamentals est de s'assurer que, si vous ne connaissez pas un sujet, les conseils vous aident à réduire autant que possible la "paralysie des choix". Addy Osmani explique parfaitement cela sur Pastry Box.
Si vous remarquez des problèmes sur le site ou dans son contenu, ou si vous souhaitez que les principes fondamentaux du Web couvrent un sujet particulier, n'hésitez pas à nous en faire part en envoyant des commentaires sur GitHub.
Build
Pour vous aider à démarrer un nouveau projet Web, nous avons créé le kit de démarrage Web. Elle inclut tout ce dont vous avez besoin:
- Un processus de compilation solide
- Code HTML générique
- Guide de style
Processus de compilation
Pour les utilisateurs qui ne connaissent pas les processus de compilation, le moyen le plus simple de penser à un processus de compilation est de le considérer comme un programme qui prend un ensemble de fichiers, effectue certaines tâches dessus et génère de nouvelles versions à un autre emplacement. Les tâches optimisent les fichiers pour améliorer les temps de chargement, recherchent d'éventuelles erreurs ou gèrent les tâches pouvant être automatisées.
Dans le kit de démarrage Web, les processus sont les suivants:
Nous minifions et concaténons le CSS et le JavaScript afin que le navigateur puisse récupérer le fichier rapidement. Le code JavaScript est également exécuté via JSHint pour vérifier les bonnes pratiques JavaScript et les erreurs de codage courantes. Les images sont minifiées avec imagemin. Vous pouvez ainsi obtenir des réductions énormes de la taille des fichiers. Nous avons également un processus pour créer les CSS des guides de style.
Code récurrent pour le code HTML multi-appareil
Le premier ensemble de code HTML que vous écrivez pour une nouvelle page est assez standard. Il est probable que vous puissiez obtenir rapidement un fichier HTML standard qui fonctionne bien sur plusieurs appareils et tailles d'écran.
Dans le kit de démarrage Web, nous souhaitions prendre en charge toutes les fonctionnalités qui brouillent les frontières entre la plate-forme et votre site. Nous avons donc ajouté la fonctionnalité Ajouter à l'écran d'accueil et les écrans de démarrage pour Android, Windows Phone, iOS et Opera Coast.
Guide de style
La dernière partie du kit de démarrage Web est son guide de style.
Cela offre à chaque nouveau projet un ensemble de styles et de composants par défaut qui encourage le développement basé sur les styles. Vous pouvez modifier les styles existants des éléments et en ajouter.
Dans la prochaine version de WSK, qui devrait être publiée début l'année prochaine, nous mettons tout en œuvre pour simplifier l'intégration du guide de style et passer à un style Material Design. Matta présenté unemaquette préliminaire de ce à quoi cela pourrait ressembler lors du Chrome Dev Summit. Vous trouverez un exemple ci-dessous.
Itérations
Une fois que vous avez commencé à mettre en pratique vos nouvelles connaissances, vous devez utiliser DevTools pour déboguer, améliorer et gérer votre travail.
De nouvelles fonctionnalités majeures sont disponibles dans DevTools. Matt vous présente les suivantes.
mode Appareil
Le mode Appareil est une nouvelle section des outils pour les développeurs qui vous permet de voir rapidement comment votre site fonctionne sur différents appareils mobiles, tout en affichant les requêtes multimédias dans votre CSS.
L'une des grandes fonctionnalités du mode Appareil est la possibilité de limiter les vitesses réseau, ce qui vous permet de simuler l'expérience d'un utilisateur sur une connexion GPRS, EDGE, 3G, DSL ou Wi-Fi.
Profileur de peinture
Si vous avez déjà ouvert l'onglet "Chronologie" et appuyé sur le bouton d'enregistrement, vous avez probablement vu des événements de peinture se produire dans la cascade. Normalement, il s'agit d'une boîte noire, et vous ne pouvez pas savoir pourquoi le navigateur a fait ce qu'il a fait ni ce qu'il faisait.
Le profileur de peinture ne vous fournit pas plus d'informations sur ce que fait exactement le navigateur pendant cette peinture.
Suivi de l'invalidation
DevTools indique désormais pourquoi une peinture ou une mise en page s'est produite chaque fois que cela est possible. Cette information est utile pour toute personne qui souhaite en savoir plus sur la chronologie et les comportements du navigateur, et vous permet d'optimiser votre code pour éviter les problèmes de performances.
Vue graphique de type "flamme"
Il s'agit d'une façon très différente de consulter les informations disponibles dans la chronologie. Cela permet de voir beaucoup plus facilement comment les tâches se chevauchent et quel comportement du navigateur s'est produit en raison d'autres tâches.
Lecteur de frame
Dans la vue graphique en forme de flamme, vous pouvez sélectionner un frame spécifique. Vous pourrez alors voir quels éléments de la page ont été promus en couche composite, ainsi que la raison de cette promotion.
Formez-vous s'occupe de tout. Itérations
Voici quelques-uns des efforts de l'équipe Chrome pour aider les développeurs à se familiariser avec le développement Web. N'hésitez pas à consulter Principes de base du Web, le kit de démarrage Web et les nouvelles fonctionnalités de Chrome DevTools.