Lors du Chrome Dev Summit 2014, de nombreux sujets et marques ont été abordés, mais ce n'est pas tout.
Si vous êtes un nouveau développeur Web ou même un développeur expérimenté qui se lance dans l'exploration de nouvelles API, vous allez sans doute suivre ces trois étapes: apprendre, créer et itérer.
Matt Gaunt décrit les efforts continus de l'équipe Chrome Developer Platform pour résoudre ces problèmes.
Apprendre
Le guide Web Fundamentals est un ensemble de documents basés sur des cas d'utilisation qui couvrent différents sujets. L'objectif principal est d'aider les développeurs à implémenter les bonnes pratiques le plus rapidement possible depuis peu ou pas de connaissances.
L'un des principaux objectifs de Web Fundamentals est de s'assurer que, si vous débutez sur un sujet donné, ces conseils réduisent autant que possible la "paralysie du choix". Addy Osmani reprend tout à fait ce sujet chez Pastry Box.
Si vous détectez des problèmes sur le site ou son contenu, ou si vous souhaitez que Web Fundamentals couvre un sujet particulier, n'hésitez pas à nous envoyer vos commentaires sur GitHub.
Créer
Pour vous aider à lancer un nouveau projet Web, nous avons créé le Web Starter Kit (Kit de démarrage Web). Il contient tout ce dont vous avez besoin:
- Un processus de compilation solide
- Code HTML récurrent
- Guide de style
Processus de compilation
Pour ceux d'entre vous qui débutent dans la compilation de processus, la façon la plus simple d'envisager un processus de compilation est de le considérer comme un programme qui accepte un ensemble de fichiers et exécute certaines tâches sur ceux-ci, puis génère de nouvelles versions dans un emplacement différent. Les tâches optimisent les fichiers pour améliorer les temps de chargement, détecter d'éventuelles erreurs ou gérer les tâches pouvant être automatisées.
Le Web Starter Kit comprend les processus suivants:
Nous minimisons et concatonsons CSS et JavaScript afin que le navigateur puisse récupérer le fichier rapidement. JavaScript est également exécuté par JSHint pour vérifier les bonnes pratiques JavaScript et les erreurs de codage courantes. Les images sont réduites avec Imagemin, ce qui vous permet de réduire énormes la taille des fichiers. Nous disposons également d'un processus permettant de créer le CSS dédié aux guides de style.
Code récurrent pour le HTML multi-appareil
Le premier ensemble de code HTML que vous écrivez pour une nouvelle page est assez standard. Il y a de fortes chances que vous ayez un moyen d'obtenir rapidement un fichier HTML d'origine qui fonctionne bien sur plusieurs appareils et tailles d'écran.
Dans le Web Starter Kit, nous voulions prendre en charge toutes les fonctionnalités qui floutaient les frontières entre la plate-forme et votre site. C'est pourquoi nous avons ajouté la compatibilité avec 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 Web Starter est le guide de style.
Ainsi, tout nouveau projet dispose d'un ensemble idéal de styles et de composants par défaut, ce qui favorise le développement axé sur les styles. Vous pouvez modifier les styles existants et y ajouter les vôtres.
Dans la prochaine version de WSK, dont la sortie est prévue pour le début de l'année prochaine, nous nous efforçons de simplifier l'association du guide de style et de passer à l'aspect et au comportement du Material Design. Matta montré unepremière simulation de ce à quoi cela pourrait ressembler lors du Chrome Dev Summit (voir l'exemple ci-dessous).
Optimisez
Une fois que vous avez commencé à mettre en pratique vos nouvelles connaissances, vous pouvez utiliser les outils de développement pour déboguer, améliorer et gérer votre travail.
Les outils de développement intègrent de nouvelles fonctionnalités importantes, et Matt en parle en détail.
mode Appareil
Le mode Appareil est une nouvelle section des outils de développement qui vous permet de voir rapidement comment votre site fonctionne sur différents appareils mobiles, tout en affichant les requêtes média dans votre CSS.
L'une des principales fonctionnalités du mode Appareil est la possibilité de limiter la vitesse du 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 "Timeline" et appuyé sur le bouton d'enregistrement, vous avez probablement vu des événements de peinture se produire dans la cascade d'annonces. Normalement, il s'agirait d'une boîte noire sans aucun moyen de savoir pourquoi le navigateur avait fait son travail ni ce qu'il faisait.
Le Profileur de peinture ne vous donne pas plus d'informations sur ce que fait exactement le navigateur pendant ce processus.
Suivi de l'invalidation
Les outils de développement expliquent désormais pourquoi une peinture ou une mise en page s'est produite le plus souvent possible. Ils sont utiles pour toute personne qui apprend à connaître la chronologie et les comportements du navigateur. Ils vous permettent également d'optimiser votre code pour éviter les problèmes de performances.
Vue du graphique de flammes
Il s'agit d'une manière très différente d'afficher les informations disponibles dans la chronologie. Il est ainsi beaucoup plus facile de voir comment les tâches se chevauchent et quel comportement du navigateur s'est produit à la suite d'autres tâches.
Lecteur de frames
Dans la vue "Graphique de flammes", vous pouvez sélectionner un frame spécifique. Dans ce cadre, vous pourrez découvrir quels éléments de la page ont été promus dans une couche composite et pourquoi ils ont été promus.
Formez-vous créer Optimisez
Il s'agit de quelques-unes des initiatives de l'équipe Chrome pour aider les développeurs à se familiariser avec le développement Web. Nous vous invitons donc à consulter le guide Web Fundamentals, le Web Starter Kit (Kit de démarrage Web) et les nouvelles fonctionnalités des Outils pour les développeurs Chrome.