Tengo 18 años, aprendí HTML5, CSS3, Js, JQuery, Bootstrap, SASS y construí 4 páginas web utilizando estas habilidades, ¿puedo convertirme en un exitoso desarrollador web front-end?

Veo a muchas personas que te dicen que debes pasar a Angular y reaccionar, pero no explican realmente por qué.

Basado en el hecho de que construiste algo con un número específico de páginas, parece que has aprendido cómo construir sitios web estáticos de varias páginas. Este es un gran comienzo hasta el momento, pero no es realmente la forma en que la mayoría de los ingenieros o equipos prefieren construir sus Front End.

Para explicar cómo se estructuran los flujos de trabajo en un entorno más profesional, tenemos que entender un poco sobre lo que sucede debajo del capó cuando alguien visita su sitio web. Probablemente ya lo sepa, pero para cualquiera que lea en el futuro y que no lo haga, cuando alguien hace clic en un enlace a una página de su sitio web, su navegador envía una solicitud HTTP para esa página a su servidor web. Su servidor web (generalmente Apache o Nginx) luego determina en qué parte del servidor se encuentra el archivo html y lo devuelve al navegador del usuario. La página misma solicitará los recursos que necesita (hojas de estilo, imágenes, fuentes, etc.), cada uno de los cuales recibe su propia solicitud HTTP que su servidor web sabe cómo manejar.

Este es un punto de partida natural, pero solicitar recursos directamente y por adelantado puede ser ineficiente y generar URL inseguras y feas al trabajar con páginas dinámicas. Al principio, los desarrolladores confiaron en una técnica llamada reescritura de URL , que permite al navegador solicitar la página en lugar del archivo de la página directamente.

Por ejemplo
https://example.com/about.html
podría convertirse
https://example.com/about

Para que esto funcione, debe configurar su servidor web para comprender que una solicitud de /about apunta a about.html . Este es un ejemplo de enrutamiento , mediante el cual una ruta ( /about ) se asigna a un recurso ( about.html ). Esto resolvió el feo problema de URL, y AJAX permite que el navegador solicite recursos solo cuando son necesarios, lo que es mucho más eficiente.

AJAX y la reescritura de URL son excelentes para sitios web estáticos, pero las cosas se vuelven más difíciles cuando su contenido se vuelve dinámico. A medida que las aplicaciones se han vuelto más grandes y complejas con el tiempo, el concepto de Aplicación de una sola página (SPA) se ha vuelto mucho más popular.

En un SPA, el usuario solo recibe un único archivo de página index.html y luego JavaScript y AJAX se utilizan para insertar / eliminar páginas directamente en el DOM. De hecho, en lugar de pensar en su Front End en términos de páginas, puede comenzar a dividir las cosas en componentes.

Supongamos que tiene un sitio web con dos páginas: una página de inicio y una página Acerca de. Ambas páginas tienen una barra de menú en la parte superior y una barra lateral a la izquierda, que son las mismas en ambas páginas. En el área de contenido principal, la página de inicio tiene una galería de imágenes y la página Acerca de tiene texto que lo describe a usted o a su cliente. Si construye su sitio como un SPA, puede obtener la barra de menú y la barra lateral una vez, luego simplemente cambie el componente de la galería por el componente de texto cuando se solicite /about y viceversa, en lugar de obtener el código para todo en cada carga de la página .

De esta manera, se vuelve mucho más fácil para los ingenieros crear aplicaciones web que se sientan más como aplicaciones nativas. La barra de menú y la barra lateral en el ejemplo anterior también son componentes y también se inyectan en el DOM con JavaScript. Esto significa que cuando hacemos un cambio, no tenemos que copiar y pegar ese cambio en cada archivo de página, solo tenemos que hacer el cambio una vez en el archivo para el componente en sí y se mostrará en todas partes donde se use el componente .

Los SPA también permiten a los ingenieros aprovechar la creación de plantillas , y aquí es donde Angular y React comienzan a entrar. La idea es que puede crear componentes dinámicos escribiendo plantillas para controlar cómo se muestran los datos.

Por ejemplo, si creas un blog, ciertamente no quieres tener que crear una página para cada publicación. Si publica a diario, administrar todas esas páginas rápidamente se convertiría en una carga. Usando plantillas, puede servir al usuario un archivo post.html con algo como esto dentro:

  
 
	  {{title}} 
	  {{author}} 
	 
		  {{párrafo}}

De hecho, así es como Angular aborda la plantilla. Puede organizar sus componentes en archivos html más pequeños llamados parciales y Angular se encargará de la representación y la manipulación DOM por usted.

React hace lo mismo a un alto nivel, pero aborda las cosas de manera un poco diferente. En lugar de utilizar archivos html más pequeños, puede usar JavaScript o un lenguaje de plantillas . ¡React en realidad tiene dos lenguajes de plantillas preferidos! Si desea que toda su aplicación esté escrita en JavaScript, puede usar JSX:

  // post.jsx
 Función Post (accesorios) {
	 const párrafos = props.paragraphs.map (función (párrafo) {
		  {párrafo} 
	 });

	 render () {
		 regreso (
			 
				  {props.title} 
				  {props.author} 
				 {párrafos}	
			 
		 );
	 }
 }

 ReactDOM.render (
	 
	 document.getElementById ('root');
 );

 
 
  ...

o puede usar EJS para servidor algo similar a la forma en que Angular usa parciales pero en un archivo ejs lugar de un archivo html :

  
 
	   
	   
	 <% para (var i = 0; i

Cuando combina enrutamiento y plantillas, puede tener URL como

https://example.com/blog/my-first-awesome-post
https://example.com/blog/my-second-awesome-post

  https://example.com/blog/my-third-awesome-post

y haga que su aplicación genere el contenido para cada uno dinámicamente. Dado que cada “página” es solo un componente que contiene más componentes, puede pensar en las cosas en términos de vistas . Las vistas se derivan de patrones de arquitectura de software que separan el código que construye la interfaz de usuario del resto de la aplicación, como el código que puede almacenar y recuperar datos de una base de datos o controlar cómo se envían esos datos a la interfaz de usuario. En el desarrollo front-end, lo más probable es que use el término ‘vista’ en relación con la definición proporcionada por el patrón Modelo-Vista-Controlador (MVC) .

Descubrí que la definición de lo que es en realidad una vista puede variar según el ingeniero que pregunte. Algunos dirán que es cualquier cosa escrita en HTML, CSS, SCSS / Less, JavaScript, jQuery, etc., lo cual puede ser confuso si está utilizando un Node.js Back End, ya que su Back End también se escribirá en JavaScript. En este caso, puede ser más preciso definir una vista como cualquier código que determine cómo se representa un componente de la interfaz de usuario en un estado determinado.

Antes de sumergirse en Angular o React, considere leer lo siguiente para tener una buena idea de cómo funcionan los SPA, cómo se manejan el enrutamiento y la creación de plantillas en varios marcos, y otras cosas relacionadas con la aplicación, como estrategias para la administración de sesiones, almacenamiento en caché, etc. .

Libro de aplicaciones de una sola página de Mixu
¿Por qué una aplicación de página única, cuáles son los beneficios? ¿Qué es un SPA?
Cómo diseñar aplicaciones empresariales de página única (SPA) [Parte 1]
En el Principio Modelo-Vista-Controlador, ¿Qué es el Front End y Cuál es el Back End?

Asesoramiento sobre desarrollo webCSS3Desarrollo web front-endHTML5JavaScript (lenguaje de programación)jQueryPregunta personal