¿Cómo aprender bien sobre desarrollo web front-end?

Primeros pasos

El conocimiento básico que entiendo es que podemos escribir algunos estilos básicos y operar los elementos de la página. Por ejemplo, escribimos un blog usando Spring y JSP, y luego podemos usar jQuery para realizar algunas operaciones simples en la página y llamar a algunas API. Por lo tanto, necesitamos conocimientos básicos de HTML/CSS. Es solo que escribir bien CSS no es una tarea fácil, requiere mucha experiencia práctica. Más adelante, también necesitaremos experiencia en JavaScript, ¿qué tal si hacemos front-end?

Al mismo tiempo, también necesitamos tener algunos conocimientos básicos del DOM para poder realizar algunas operaciones básicas, como modificar colores, etc. En este caso, la solución más sencilla es utilizar una herramienta como jQuery. Sin embargo, sería fantástico si pudieras manipular el DOM tú mismo.

Artículo de nivel intermedio

El artículo de nivel intermedio es más interesante. Ahora necesitamos realizar operaciones más complejas en la página. Las habilidades de Ajax y JSON son necesarias cuando queremos cambiar dinámicamente los elementos de la página, necesitamos obtener los últimos resultados de datos de forma remota. Y también debemos enviar el formulario al servidor. RESTful es una habilidad que debemos aprender. En el futuro, también necesitaremos habilidades como Fetch API y ReactiveX.

Además, también necesitamos dominar la semántica de HTML. También son necesarias habilidades DIV/CSS. También debemos utilizar motores de plantillas y SCSS/SASS. En este nivel, comenzamos a usar Node.js para completar una serie de acciones como la construcción del front-end, etc. En este momento, debemos aprender a usar herramientas como la línea de comandos. Y en este momento ya hemos comenzado a crear aplicaciones de una sola página.

Capítulo Avanzado

JavaScript es un lenguaje fácil de usar, pero también está lleno de muchos malos usos. Hace unos años, la gente usaba CoffeeScript compilado en JavaScript para escribir un mejor código de interfaz de usuario, y ahora la gente tiene ES6, TypeScript y WebPack para hacer estas cosas. Aunque el soporte del navegador es imperfecto ahora, son el futuro. También hay algunas funciones de CSS3 que no son compatibles con algunos navegadores. Y todo esto se basa en el lenguaje mismo. Para escribir un buen código, también necesitamos dominar los conceptos de programación orientada a objetos, programación funcional, MVC/MVVM/MV*. Como ingeniero calificado, también debemos comprender la seguridad (como entre dominios) y la autorización (como HTTP Basic, JWT, etc.).

Ingeniería

Este título parece estar fuera de lugar. El contenido de esta parte es principalmente contenido creado automáticamente. Primero, necesitamos tener herramientas de compilación básicas, no importa si usas gulp, grunt o simplemente npm. Lo importante es que puede automatizar la construcción de herramientas, la compilación, el análisis de código estático (JSLint, CSS Lint, TSLint), el análisis de la calidad del código (como Code Climate, que puede ayudarlo a detectar mal olor en el código) y ejecutar. Prueba en código y genera informes sobre la cobertura de las pruebas y más. Todo esto requiere que tengas un flujo de trabajo de compilación automatizado.

Compatibilidad

Aunque nos estamos alejando cada vez más de la era de la compatibilidad con IE6, todavía tenemos mucho trabajo de compatibilidad por hacer. Las pruebas de compatibilidad básicas son pruebas entre navegadores, es decir, Chrome, IE, Firefox, Safari, etc. Además, existen pruebas sobre el mismo navegador en diferentes sistemas operativos y el rendimiento puede ser inconsistente en algunos casos. Por ejemplo, los diferentes tamaños de fuente del sistema operativo pueden causar algunos problemas sutiles.

Con la popularidad de los dispositivos móviles, también debemos considerar las diferencias de rendimiento de los kernels de los navegadores en diferentes versiones de Android y, a veces, en el ineficaz Windows Phone.

Además, existe el problema de las diferentes versiones del mismo navegador, algo común en IE. .

Específico del front-end

Además de la codificación normal, el front-end también tiene algunas cosas más interesantes, como animaciones CSS3 y JavaScript. Utilice fuentes web, pero lamentablemente esto no es adecuado para caracteres chinos. También está la fuente Icon, después de todo, esta fuente es vectorial. Sin embargo, todavía hay algunos problemas con la fuente Icon, como la optimización anti-aliasing del navegador, y otro punto débil es que hay que preparar cuatro tipos diferentes de archivos de fuente. Por lo tanto, se creó algo llamado SVG Sprite. En el pasado, era CSS Sprite, pero CSS Sprite no se podía escalar. Finalmente, también necesitamos dominar el uso de algunos gráficos y marcos de gráficos básicos.

Ingeniería de software

Esto es lo mismo que la mayoría de los proyectos de lenguaje. Necesitamos utilizar software de administración de versiones, como git, svn o algunas herramientas internas. En resumen, debes tener uno, no un archivo como 2016.07.31.zip. Luego, también necesita algunas herramientas de administración de dependencias, para proyectos que usan Webpack y Browserify para escribir código en código front-end, npm sigue siendo muy útil. Pero personalmente, siempre encuentro que Bower es un poco difícil de usar para proyectos tradicionales. También necesitamos modularizar nuestros archivos de código fuente para que a otros les resulte más fácil iniciar el proyecto.

Depuración

Como ingeniero, la depuración es una habilidad esencial. La mayoría de los navegadores vienen con herramientas de depuración integradas y son excelentes si las usas. Durante el proceso de depuración, puede utilizar directamente la consola para generar valores, calcular valores, etc. Si su proyecto tiene algunos problemas durante el proceso de construcción, necesita la línea de código del depurador.

En algunos proyectos que llaman a API remotas, también necesitamos algunas herramientas más complejas, concretamente herramientas de captura de paquetes. Al depurar dispositivos móviles, herramientas como Wireshark y Charles pueden permitirnos ver si hay algunas solicitudes anormales. Por supuesto, en este momento, otra buena herramienta es la depuración remota de dispositivos que viene con Chrome. Para sitios web móviles, también hay una vista Responsive.

Prueba

Muchos ingenieros de front-end que conocí no escribieron pruebas, así que las extraje por separado. Para un proyecto front-end, en circunstancias normales, necesitamos pruebas unitarias, pruebas funcionales y algunas pruebas de UI para verificar si se pueden realizar saltos entre páginas. Para aplicaciones que dependen de servicios de terceros, también existe un servicio Mock para facilitar nuestras pruebas. Si se trata de un proyecto con front-end y back-end separados, también necesitamos pruebas de integración.

Rendimiento y optimización

Puede que no sea una tarea fácil optimizar el rendimiento de las aplicaciones web. A veces todavía sabemos dónde optimizar. En este momento, la gente puede usar YSlow de Yahoo o mi PageSpeed ​​​​de Google favorito para detectar algunos problemas en la página, como si GZip está activado, si hay compresión, fusión, código Minify JS, etc.

También deberíamos utilizar herramientas como NetWork para comprobar algunos archivos de recursos relativamente difusos cuando se carga la página y optimizarlos. En algunos casos, también necesitamos usar herramientas como Timline y Profiel de Chrome para ver dónde podemos optimizar.

Diseño

Los ingenieros de front-end también deben tener habilidades básicas de interfaz de usuario. En la mayoría de los casos, lo que obtenemos es solo una imagen. Si es una página completa, necesitamos dividir rápidamente el diseño de la página. Dependiendo de los diferentes diseños de página, como diseños responsivos, de cuadrícula y FlexBox, también habrá diferentes diseños. A veces, necesitamos planificar por nosotros mismos, hacer una estructura alámbrica básica, etc.