¡Buen dia amigos!
Realmente no me gusta hacer la autopromoción, pero en una situación en la que un equipo está formado por una persona, te guste o no, tienes que desarrollar y promocionar el producto tú mismo.
Cualquiera que busque por dónde empezar a desarrollar una aplicación web conoce bien el HTML5 Boilerplate ( sitio oficial , repositorio). Según los desarrolladores, es "la plantilla de interfaz de usuario más popular de la web". No puedes discutir con los más populares, pero puedes hacerlo con modernidad (cumpliendo con las realidades modernas del desarrollo web). Y esto no es de extrañar: el proyecto se creó hace unos 6 años. Mucho ha cambiado en los últimos 6 años. Al mismo tiempo, por lo que puedo decir, no se realizaron cambios fundamentales en el proyecto (var se usa para declarar variables, existe la posibilidad de agregar complementos de jQuery, etc.), excepto, quizás, site.webmanifest, que es inútil sin un trabajador de servicio (y es mejor usar .json).
Propongo una especie de alternativa: una plantilla de inicio HTML moderna ( sitio oficial , repositorio ).
El proyecto incluye lo siguiente:
- index.html con todas las metaetiquetas y enlaces necesarios (general, microsoft, facebook, twitter, apple (ios), android, datos estructurados: schema.org y json-ld)
- ejemplos de uso de etiquetas HTML5 y propiedades CSS3
- ejemplos de uso de módulos CSS y JavaScript
- trabajador de servicio sin conexión
- manifest.json completo
- servidor express.js con todos los encabezados de seguridad posibles (útil al implementar una aplicación en heroku o un servicio similar que admita node.js)
- archivo netlify.toml con encabezados similares y conexión preliminar de los recursos utilizados por la página (útil al implementar una aplicación para netlify)
- robots.txt simple
- sitemap.xml simple
- browserconfig.xml mínimo
- max .gitignore
- página de error 404 creativo
- ejemplo de construcción de un proyecto usando webpack
- como un experimento: un ejemplo de un proyecto AMP (una nueva tecnología de Google para los sitios móviles primero)
Index.html y server.js (netlify.toml) son, por supuesto, el valor principal. Estos archivos tienen enlaces a documentación oficial (fuente de verdad). El trabajador de servicio y el manifiesto hacen que la aplicación sea progresiva. Esto significa que la aplicación se puede instalar en un teléfono y una computadora y se comporta como las nativas. Al almacenar en caché los recursos utilizados por la aplicación, funciona sin conexión (en ausencia de una conexión de red).
Para mejorar la experiencia de desarrollo, se han desarrollado adicionalmente las siguientes herramientas:
Aquí están los resultados de la prueba (el déficit se debe al uso de recursos de terceros, como Google Analytics y las métricas de Yandex):
Lighthouse
WebPageTest
SecurityHeaders
AMP
También preste atención a mi aplicación principal, que desarrollo lo mejor que puedo: una gran cantidad de JavaScript (tal vez el nombre no lo sea bastante exitoso, pero refleja plenamente la esencia de la aplicación). Por cierto, la plantilla especificada se utilizó durante su desarrollo.
Cualquier formulario de comentarios, tanto aquí como en GitHub, será bienvenido.
Gracias por su atención y buen comienzo de la semana laboral.