Lors du Chrome Dev Summit 2014, nous avons abordé de nombreux sujets et sujets concernant de nouvelles API, mais il ne s'agit pas uniquement de la nouvelle version.
Si vous êtes un nouveau développeur Web ou même un développeur expérimenté sur le point de se lancer dans l'exploration de nouvelles API, vous devez probablement suivre ces trois étapes: apprendre, créer et itérer.
Matt Gaunt présente les efforts continus de l'équipe de la plate-forme pour les développeurs Chrome afin de résoudre ces problèmes.
Apprendre
Web Fundamentals est un ensemble de documents basés sur des cas d'utilisation couvrant un large éventail de sujets. L'objectif principal est de permettre aux développeurs avec peu ou pas de connaissances de mettre en œuvre les bonnes pratiques le plus rapidement possible.
L'un des principaux objectifs du programme Web Fundamentals est de s'assurer que, si vous découvrez un sujet, ces conseils réduisent autant que possible la "paralysie du choix". Addy Osmani aborde parfaitement ce sujet chez Pâtisserie.
Si vous rencontrez des problèmes avec le site ou son contenu, ou si vous souhaitez que les principes de base du Web couvrent un sujet particulier, n'hésitez pas à nous envoyer vos commentaires sur GitHub.
Créer
Pour vous aider à démarrer un nouveau projet Web, nous avons créé le Web Starter Kit. 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, le plus simple est de le considérer comme un programme qui prend un ensemble de fichiers et effectue certaines tâches sur ceux-ci, puis génère de nouvelles versions à un autre emplacement. Ces tâches optimisent les fichiers afin d'améliorer les temps de chargement, recherchent d'éventuelles erreurs ou gèrent des tâches pouvant être automatisées.
Le kit de démarrage pour le Web comporte les processus suivants:
Nous minimisons et concaténons les fichiers CSS et JavaScript afin que le navigateur puisse récupérer rapidement le fichier. Le code JavaScript est également exécuté via JSHint afin de vérifier les bonnes pratiques en matière de JavaScript et les erreurs de codage courantes. Les images sont réduites à l'aide d'imagemin, ce qui permet d'obtenir une grande réduction de la taille des fichiers. Nous avons également mis en place un processus de création des guides de style CSS.
Texte récurrent pour le format HTML multi-appareil
Le premier ensemble de code HTML que vous écrivez pour une nouvelle page est assez standard et vous aurez probablement 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 ajouter la prise en charge de toutes les fonctionnalités qui floutaient les frontières entre la plate-forme et votre site. Nous avons donc ajouté la prise en charge de l'option Ajouter à l'écran d'accueil et des écrans de démarrage pour Android, Windows Phone, iOS et Opera Coast.
Guide de style
La dernière partie du kit de démarrage pour le Web est le Guide de style.
Tout nouveau projet dispose ainsi d'un ensemble de styles et de composants par défaut qui favorise le développement basé sur le style. Vous pouvez modifier des styles existants pour les éléments et ajouter les vôtres.
Dans la prochaine version de WSK, qui sera publiée au début de l'année prochaine, nous nous efforçons de simplifier l'intégration du guide de style et de passer à un aspect Material Design. Matta présenté unemaquette initiale de ce à quoi cela pourrait ressembler au Chrome Dev Summit. Vous trouverez un exemple ci-dessous.
Itérations
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 débarquent de nouvelles fonctionnalités importantes, et Matt Landis se penche sur celles-ci.
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 fonctionnalités majeures 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 de la 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'agirait d'une boîte noire vous permettant de savoir pourquoi le navigateur s'en est chargé ou ce qu'il faisait.
Paint Profiler ne vous fournit plus d'informations sur ce que fait exactement le navigateur pendant l'exécution de cette opération.
Suivi de l'invalidation
Les outils de développement indiquent désormais la raison pour laquelle une peinture ou une mise en page apparaît chaque fois que cela est possible. Cela est utile pour toute personne qui connaît 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 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.
Visionneuse de frames
Dans la vue "Graphique de flammes", vous pouvez sélectionner un cadre spécifique. Dans ce cadre, vous pouvez découvrir quels éléments de la page ont été promus à un calque composite et pourquoi ils ont été promus.
Formez-vous s'occupe de tout. Itérations
Voici quelques-unes des actions menées par l'équipe Chrome pour aider les développeurs à se familiariser avec le développement Web. Nous vous invitons donc à consulter les Web Fundamentals, le Web Starter Kit et les nouvelles fonctionnalités disponibles dans les Outils pour les développeurs Chrome.