Dernièrement, Google a publié le Web Starter Kit. Ce projet se présente comme une référence sur l’état du développement de sites web. Si vous vous demandez à quoi ressemble le développement web de cette époque, il vous faut jeter un coup d’œil à ce projet.
Ce que vous fournit ce projet est le minimum d’outillage nécessaire pour monter des pages web permettant de cibler des rendus multiappareils. En quelques mots, vous y retrouverez notamment:
- Un guide de style et un design Responsive
- L’utilisation de Sass pour la compilation du CSS
- Synchronisation temps réel de vos changements avec BrowserSync.
Pour mettre la main sur le code, le plus simple est de passer par Github en clonant le repository à l’URL https://github.com/google/web-starter-kit.git.
Côté technologie, Web Starter Kit est propulsé par quatre éléments bien distincts:
Ce qui rend intéressant ce projet est l’outillage permettant de construire les ressources externes de celui-ci. Pour démarrer avec ce projet, il faut avoir les quatre librairies mentionnées ci-dessus sur votre poste. Une fois qu’elles sont installées, la combinaison des commandes npm install –global gulp et npm install dans le dossier du projet vous permettront d’être prêt.
Pour accéder au serveur local, il vous suffira d’exécuter la commande gulp serve.
Avec ces éléments, vous pouvez démarrer un serveur local, compiler vos fiches de style Sass en CSS et recharger instantanément vos changements dans votre navigateur et il y en a même plus! L’API Google PageSpeed Insights a été intégré à Gulp et vous permet de diagnostiquer la vitesse de chargement de votre projet web en ligne de commande.
De plus, un signe que les choses changent, le support des navigateurs reflète les dernières tendances. Par exemple, il y a uniquement IE10 et IE11 qui sont supportés ainsi que les deux plus récentes versions de Google Chrome. Il s’agit d’une prise de position assez ferme sur l’évolution de la compatibilité des navigateurs.
Au final, il se peut que vous ne soyez pas en mesure de tout intégrer dans votre projet de développement web. Cependant, je crois qu’il faut au moins considérer d’utiliser unitairement l’une des fonctionnalités exposées dans Web Starter Kit.
À titre d’exemple, vous pourriez utiliser gulp pour automatiser le processus compactage et de minification de vos fichiers JavaScript et CSS. Tant qu’à y être, pourquoi ne pas utiliser l’intégration du PageSpeed API? Gulp est un bon exemple de fonctionnalité indépendante du framework utilisé pour le développement côté serveur.
Il s’agit d’une belle époque pour faire du développement web. L’outillage se raffine et permet d’accomplir beaucoup plus avec ce qui est en place. Tirez-en profit!
French Coding 
C’est bien beau tout ça mais ça ne nous dit pas comment installer le WSK et surtout comment l’utiliser.
Moi je l’ai téléchargé et je ne vois rien qui me dit comment l’utiliser.
WSK ne s’installe pas vraiment en tant que tel. Ce qui doit être configuré sur l’environnement de développements est l’outillage pour arriver à préparer les différentes ressources de WSK.
Plus d’infos ici: https://developers.google.com/web/fundamentals/getting-started/web-starter-kit/setting-up