¿Cuál es la forma ‘correcta’ de codificar sitios web de una sola página?

No hay una forma “correcta”. Puede usar muchos idiomas y herramientas diferentes, aunque JavaScript y uno de los muchos marcos web disponibles (Angular, React, Ember, etc.) parecen ser los más populares.

Personalmente, uso Amber Smalltalk: vea Una introducción suave a Amber.

La “corrección” es subjetiva y realmente depende de los requisitos de su proyecto.

Si necesita una página de destino simple con un formulario de captura de correo electrónico, entonces realmente solo necesita un html / css muy simple (js si necesita interactuar con el formulario). En cuanto al backend, puede ser php, python, go, nodejs, c #, ror o cualquier otro idioma.

Como no sé qué estás construyendo exactamente. Puedo dar algunos consejos / puntos en su lugar.

Use marcos si es necesario : uno de los mayores errores de los desarrolladores es usar marcos en todo. Una vez vi una página de inicio con un diseño realmente simple (una imagen de fondo y 2 campos de entrada), y la página está realmente hinchada. Su carga jquery y bootstrap. Esto es un desperdicio enorme ya que el 98% de los componentes de las bibliotecas cargadas ni siquiera se están utilizando.

Los marcos son geniales si está creando una página web que realmente necesita los marcos. El tiempo de desarrollo se puede reducir drásticamente al usarlos.

Aquí hay algunos marcos que quizás desee ver:

CSS

1. Bootstrap http://getbootstrap.com
2. Fundación http://foundation.zurb.com
3. UIKit UIkit

Hay más disponibles que se puede encontrar una simple búsqueda en Google. Pero estos también son mi ir.

En cuanto a manipular el dom, jQuery es realmente el más popular.

Optimice todo lo que sirve : esta es probablemente la ley más importante para la web y prácticamente en todas partes. Aquí hay una lista que puede consultar

• Todas las imágenes deben estar comprimidas. Hay sitios web en línea que puede usar que harán esto. TinyJPG es mi favorito. TinyJPG: comprime imágenes JPEG de forma inteligente
• Minifica tus archivos CSS / JS. Y si es posible, combínelos en un solo archivo. 1 para CSS y 1 para javascript. Puede usar gruñido o bower para hacer esto automáticamente.
• En la medida de lo posible, limite la cantidad de solicitudes que hace su página web. Es por eso que mencioné anteriormente para combinar los archivos CSS y los archivos JS. Para sus imágenes, aplique sprites CSS si es posible. La regla es, solo carga lo que se necesita para servir y solo sirve lo que tus visitantes necesitan ver.
• Use CDN si es posible y si su presupuesto también lo permite. Cloudflare proporciona CDN gratis en su nivel gratuito, así que aprovéchalo. Para CDN, puedo recomendar maxCDN, Amazon cloudfront y google CDN.

Aproveche la memoria caché del navegador : asegúrese de almacenar en caché el contenido estático.

Bonificación : puede utilizar la velocidad de página de Google, que se encarga de la mayoría de las cosas que mencioné anteriormente. Módulo PageSpeed ​​| Desarrolladores de Google

Nota:

Lo que mencioné no es absoluto de ninguna manera. Estoy seguro de que hay más formas de mejorar su página web. Entonces, si alguien puede agregar más, hágalo 🙂

Use un marco de front-end como Ember que tenga una API de enrutamiento robusta y siga una guía de aplicación de una sola página, como esta.

¡La mejor de las suertes!

Puede ser tan simple como eso, pero la frase no implica otras reglas que no se puede cargar una nueva página.

Por lo general, crea una página que contiene gran parte de lo que desea, luego usa Javascript para modificarla, lee los datos del servidor y cambia los valores y muestra u oculta elementos. o puede reescribir secciones enteras de la pantalla.

Tenga en cuenta que solo es realmente benéfico si puede dejar partes significativas de la pantalla sin cambios.