Ingeniero de front-end: ahora es el peor momento y el mejor momento

Desde la perspectiva de la industria, ha pasado el peor momento para el front-end; desde la perspectiva de un desarrollador, es de hecho un momento terrible.

En primer lugar, desde la perspectiva de la historia de desarrollo de la industria del front-end, el front-end se está volviendo cada vez más maduro. Si se compara con el pasado, el front-end anterior es realmente malo. Si miramos el presente desde la perspectiva del futuro, el presente también es malo, pero no tan malo como el pasado.

Hace diez años, estábamos en el front-end de la Edad de Piedra. En ese momento, el desarrollo del front-end se describía como "slash and burn". ¿Qué tan malo es?

• La pesadilla de los desarrolladores front-end: compatible con IE6. IE6 se lanzó en 2001, mientras que ES5 no se finalizó hasta 2009. Además de ejecutar JavaScript, IE6 también puede ejecutar VBScript y JScript (un dialecto de Javascript).

• En ese momento, había una tecnología llamada "ActiveX" que solo podía ejecutarse en IE, por lo que muchos bancos y sitios web gubernamentales solo podían abrirse con el navegador IE, o incluso con una versión específica de IE.

• Otra tecnología es Flash, que ahora se ha eliminado.

El front-end del que estamos hablando ahora generalmente incluye HTML, CSS, JS e incluso Node.js, SVG y otras tecnologías de desarrollo relacionadas con la capa de interfaz de usuario web. Entonces, en la era sin ES6, sin HTML5 y sin CSS3, ¿qué tan malo es el front-end?

Era tan malo que no existían palabras como "ingeniero de front-end" o "desarrollador de front-end". En ese momento, esta posición se llamaba "cortador de imágenes" o "cortador de imágenes". En la mayoría de las empresas, HTML y CSS son realizados por diseñadores y los efectos dinámicos en la página, como el mouse sobre el menú de visualización, diagramas de carrusel, etc., los realizan desarrolladores de back-end. Era un fenómeno común para los desarrolladores de back-end JSP y PHP escribir jQuery a tiempo parcial.

Comparemos el back-end del mismo período: varias cadenas de herramientas y tecnologías ya están muy maduras. En ese momento, el front-end solo se usaba como la capa View en la arquitectura MVC de back-end. Cuando no había separación entre el front-end y el back-end, la capa View también fue desarrollada por el front-end. y el back-end juntos. Ahora nuestro desarrollo de proyectos de front-end implicará empaquetado, compresión, ofuscación, etc., y aunque los proyectos de front-end a gran escala todavía eran pocos antes, cuando hay cientos de archivos js involucrados, el front-end también usará herramientas. como empaquetado, compresión y ofuscación. Casi todas estas herramientas fueron proporcionadas por Java en ese momento. Las más populares fueron YUI Compressor desarrollado por Yahoo y Google Closure Compiler desarrollado por Google.

Después de tantos años de desarrollo, el front-end, especialmente Node.js lanzado hasta su madurez en los últimos años, se ha vuelto muy maduro, y la era "mala" también se ha convertido en historia.

Desde otra perspectiva, nosotros, como desarrolladores front-end, puede que estemos en un mal momento ahora. Las habilidades de desarrollo anteriores ya no son aplicables después de tantos años de desarrollo. El resultado de la estandarización gradual del front-end es la eliminación de un gran número de desarrolladores front-end "clásicos / conservadores", y los desarrolladores que tomaron el aire ya han logrado adelantamientos en las curvas.

Como dice el refrán, "los tiempos difíciles hacen héroes", pero el dicho dice, "los tiempos difíciles entierran los huesos". Después de la aparición de Node.js, el front-end puede describirse como una de las industrias más "monetarias" en ese momento. En la actualidad, esta salida de aire también debería estar cerrada, por lo que para muchas personas este es un mal momento.

Si nos fijamos en las grandes fábricas, tomemos a Ali como ejemplo, básicamente esas P altas en la parte delantera han estado aumentando en el tren expreso de Node.js después de 2010. Node.js no solo expande el límite del front-end, sino que también mejora la eficiencia de la investigación y el desarrollo del front-end.

Algunas personas dicen que solo las cosas malas deben revertirse y reconstruirse constantemente.

No estoy de acuerdo con esta oración. Creo que hay problemas con la razón y la conclusión de esta oración. En primer lugar, no es el front-end lo que está subvirtiendo, sino una determinada tecnología y herramienta del front-end; en segundo lugar, no es porque sea malo que se subvierte, sino porque el front-end tiene vitalidad, hay innovaciones y cambios subversivos. Echemos un vistazo al back-end. En el pasado, el desarrollo de Java se hacía con Eclipse, pero ahora IDEA es casi todo, entonces podemos concluir que Java está siendo retrocedido constantemente, por lo que el back-end está en una mala era. . Obviamente no.

Solo la actualización de herramientas puede traer la prosperidad del front-end. Cuentemos una historia real.

Durante la Revolución Industrial Británica, la producción de maquinaria reemplazó gradualmente al trabajo manual, lo que provocó desempleo y una caída de los salarios para la mayoría de las personas. Cuando estaban desempleados, no había nada que hacer, así que empezaron a pensar en:

¿Por qué estamos desempleados? Porque la fábrica no necesita tanta gente.

¿Por qué la fábrica no necesita tanta gente? Porque las máquinas pueden hacer muchas cosas.

¿Y si no hay máquina ?, entonces la fábrica contratará más personas.

Finalmente se encontró la razón del desempleo, por lo que un trabajador llamado Ludd en Leicestershire fue el primero en destruir la máquina de calcetería, lo que desencadenó una ola de aplastamiento de la máquina en todo el país, e innumerables trabajadores entraron en la fábrica para aplastar la máquina. 2333333, este movimiento se llama "Movimiento Ludd". Sin embargo, este movimiento provocó que muchas fábricas se vieran obligadas a suspender el trabajo y agravó el desempleo de más trabajadores. Al final, el gobierno británico promulgó leyes y reprimió a los luditas.

En la historia, "la producción de máquinas reemplaza gradualmente la mano de obra" es un cambio de productividad. Como analogía, el reemplazo de la tecnología inicial también es un cambio de productividad. Compare el desarrollo y mantenimiento de proyectos con decenas de miles de líneas de código en React / Vue y el desarrollo y mantenimiento de jQuery, que es más fácil para proyectos con decenas de miles de líneas de código. ¿Es una brecha tecnológica? No necesariamente. Siempre que la planificación sea razonable, jQuery también puede desarrollar una cadena de herramientas más grande que un proyecto a gran escala.

Antes era desarrollador de Java. Hasta el lanzamiento de Chrome y Node.js, me interesé cada vez más en el front-end. Más tarde, cambié mi carrera para convertirme en desarrollador de front-end. He vivido los peores momentos que la parte delantera es compatible con IE5.5 Viajar en el tren expreso de la parte delantera para lograr un crecimiento explosivo de los salarios. Cuando me enteré de la biblioteca de prototipos más popular, apareció jQuery; cuando recién aprendí Underscore, apareció Lodash; cuando tuve la suerte de no aprender Grunt y aprendí directamente Gulp, apareció Webpack. Probablemente logré mi primer objetivo en 2015/2016: 10 veces mi salario.

No te canses de buscar nuevas herramientas, date una posición clara y clara, y luego aprende conocimientos relevantes en diferentes campos. Desde que entré en la industria del front-end, he estado profundamente involucrado en la ingeniería y el rendimiento del front-end. Después de la aparición de nuevas herramientas y nuevos marcos, no debe permanecer solo como usuario de un marco, sino que debe considerar por qué apareció el marco y qué puntos débiles resolvió. Si no hay un marco XXX, puedo resolver puntos débiles similares. ..

Con todo, el punto común es que el front-end actual está en una mala era porque los salarios de los desarrolladores de front-end no pueden explotar como antes. Pero ahora también es la mejor era. Los desarrolladores front-end pueden obtener salarios más altos confiando en sus capacidades integrales. ¿Cómo convertir su conocimiento front-end en productividad? En la empresa, se está "mejorando la eficiencia para I + D y empoderando a las empresas". O simplemente conozca el conocimiento de un determinado marco, escriba errores todos los días, encuentre errores y cambie errores.

Para algunos desarrolladores, sienten que la interfaz actual es una lástima. Otra razón es que la iteración de la herramienta es demasiado rápida y no hay una gran vaca para guiarlos. Frente a las muchas tecnologías de interfaz, están deslumbrados y no No sé cómo aprender, y mucho menos qué aprender.

Sin embargo, los puntos de conocimiento en Internet son fragmentarios y fragmentados. Leo libros por mí mismo pero me falta práctica. Leo mucho conocimiento pero todavía no puedo usarlo en proyectos reales. Después de trabajar unos años, no mejoré mucho e incluso encontré un techo profesional.

Los amigos que quieran aprender la web front-end, pueden unirse a la falda de intercambio técnico aquí , haga clic aquí para unirse al grupo con personajes azules . La falda incluye estudiantes y jefes, y también hay una colección de preguntas de entrevista reales (incluidas las respuestas). para las preguntas de la entrevista de Dachang 2020. ¡Consígalo gratis, vea o salga!

HTML

• ¿Cuáles son las tres capas de la página del navegador, cuáles son y cuáles son sus funciones?
• ¿Las ventajas y desventajas de HTML5?
• ¿Qué hace Doctype? ¿Cómo distinguir entre el modo estricto y el modo promiscuo? ¿Qué quieren decir?
• ¿Cuáles son las nuevas funciones y elementos de HTML5?
• ¿En qué navegadores han probado las páginas web que creó y cuáles son los núcleos de estos navegadores?
• Hay algo muy importante al principio de cada archivo HTML, Doctype. ¿Sabes para qué sirve?
• ¿Cuéntame sobre tus conocimientos de HTML5? (¿Qué es, por qué?)
• ¿Comprensión y conocimiento de los estándares WEB y W3C?
• ...

CSS

• ¿Explicar el modelo de caja CSS?
• ¿Podría hablarnos sobre los tipos de selectores de CSS y dar algunos ejemplos para ilustrar su uso?
• ¿Podría decirme qué tiene de especial CSS? (Prioridad, cálculo de valores especiales)
• ¿Problemas y soluciones comunes de compatibilidad de navegadores?
• Enumere los valores de la pantalla y explique qué hacen.
• ¿Cómo centrar un div, cómo centrar un elemento flotante?
• Enumere varios métodos (al menos dos) para limpiar los flotadores.
• ¿Comparación de detalles de bloque, inline e inlinke-block?
• ¿Qué es la degradación elegante y la mejora progresiva?
• Habla sobre los problemas que provocan los elementos flotantes y tus soluciones.
• ¿Cuáles son sus métodos de optimización del rendimiento?
• ...

JavaScript

• Las diversas posiciones de js, como clientHeight, scrollHeight, offsetHeight y la diferencia entre scrollTop, offsetTop, clientTop?
• Implementación de la función de arrastrar y soltar js
• Cargar de forma asincrónica el método js
• js anti-vibración y aceleración
• Hablar de cierres
• Hable sobre su comprensión de la cadena de alcance
• ¿Prototipo de JavaScript, cadena de prototipos? ¿Cuáles son las características?
• Explique qué es la delegación de eventos / delegación de eventos
• ¿Cómo implementa Javascript la herencia?
• La ejecución de la función cambia esto
• Principio de compilación de Babel
• Función Currying
• Hablar sobre la creación y herencia de clases.
• Hablar sobre el flujo de eventos en el front-end
• Cómo hacer que la burbuja del evento primero y luego capturar
• Hablar sobre la carga diferida y la precarga de imágenes.
• ¿Qué hace el nuevo operador de js?
• Cambie el puntero a la función de este puntero dentro de la función (la diferencia entre vincular, aplicar, llamar)
• Ajax resuelve el problema de la caché del navegador
• ...

Vista

• El papel del valor clave en Vue
• ¿Por qué los datos en un componente de Vue deben ser una función?
• ¿Cuál es la característica de estado de vuex?
• Presenta el sistema de respuesta de Vue
• La diferencia entre calculado y reloj
• Presenta el ciclo de vida de Vue
• Por qué los datos de los componentes deben ser una función
• ¿Cómo se comunican los componentes?
• ¿Cómo usar componentes personalizados en Vue.cli? ¿Ha encontrado algún problema?
• ¿Cómo implementa Vue la configuración del paquete web y la carga a pedido?
• Describa brevemente para qué escenarios es adecuado cada ciclo
• ¿Qué es scss? ¿Cuáles son los pasos de instalación y uso en Vue.cli? ¿Cuáles son las características principales?
• ¿Habla sobre su comprensión de la compilación de plantillas de Vue.js?
• Varias formas de salto de enrutamiento de Vue
• ¿Cómo implementa Vue la configuración del paquete web y la carga a pedido?
• Implementación de enrutamiento de Vue: modo hash y modo historial
• ¿Cuál es la diferencia entre Vue, Angular y React?
• Función de gancho para enrutamiento Vue
• ¿Cuáles son las propiedades calculadas de Vue?
• ...

Reaccionar

• Introducir reaccionar
• Reaccionar flujo de datos único
• Funciones del ciclo de vida de React y el ciclo de vida de los componentes de React
• Principios, diferencias, aspectos destacados y funciones de react y Vue
• Comunicación de componentes de ReactJs
• ¿Has aprendido sobre el DOM virtual de React? ¿Cómo se compara?
• React se utiliza en el proyecto, ¿por qué deberíamos elegir react y cuáles son los beneficios de react?
• Cómo conseguir el verdadero dom
• Razones para elegir reaccionar
• Función de ciclo de vida de React
• Proceso después de setState
• ¿Conoce los componentes de gama alta de React?
• React jsx, programación funcional
• ¿Qué utilizan los componentes de Reacción para determinar si se deben actualizar?
• Cómo configurar React-Router
• Módulos cargados dinámicamente para enrutamiento
• ¿Qué es el middleware Redux? Acepta varios parámetros
• Cómo el middleware de solicitudes redux maneja la concurrencia

Navegador

• Comunicación de tabla cruzada
• Arquitectura del navegador
• Bucle de eventos en el navegador
• El proceso desde la URL de entrada hasta la visualización
• Redibujar y redistribuir
• almacenamiento
• Trabajador web
• Mecanismo de recolección de basura V8
• Pérdida de memoria
• Optimización del reflujo y repintado
• ¿Cómo reducir el redibujado y el reflujo?
• Se ingresa una página desde la URL para que la página se cargue y se muestre, ¿qué sucedió en el proceso?
• Resumen de la diferencia entre localStorage y sessionStorage y cookie
• ...

Servidor y red

• La diferencia entre HTTPS y HTTP
• Versión HTTP
• ¿Qué sucedió al ingresar la URL a la representación de la página?
• Caché HTTP
• Ubicación de la caché
• Caché fuerte
• Caché de negociación
• Los recursos en caché están ahí
• El impacto del comportamiento del usuario en la caché del navegador
• Ventajas del almacenamiento en caché
• Proceso de ejecución de solicitud de actualización diferente
• ...

Algoritmo y estructura de datos

• Recorrido de secuencia de árbol binario
• Las características del árbol B, la diferencia entre el árbol B y el árbol B +
• Recursión de cola
• ¿Cómo escribir un factorial de un número grande? ¿Qué pasa con el método recursivo?
• Cómo convertir una matriz multidimensional en una matriz unidimensional
• Hablar sobre el principio de descarga rápida burbujeante.
• ¿El principio del método de clasificación Heap? ¿la complejidad?
• Varios algoritmos de clasificación comunes, escritos a mano.
• Desduplicación de matrices, escriba tantos métodos como sea posible
• Si hay una matriz grande, todos son números enteros, cómo encontrar los 10 números más grandes

Por fin

Los amigos que quieran aprender la web front-end y los amigos que necesiten documentos PDF pueden unirse a la falda de comunicación técnica aquí . Haga clic aquí para unirse al grupo en azul . Hay estudiantes y jefes en la falda. Los recursos son gratuitos para compartir.