En el backend de la cuenta pública de Daquan WeChat de front-end, recibí muchos comentarios como los siguientes
-
¿Cómo puedo aprender y mejorar el nivel de desarrollo de front-end?
-
¿Qué puntos de habilidad están involucrados en el desarrollo de front-end?
-
¿Puede recomendar libros clásicos de tecnología de desarrollo front-end?
- ……
Si tiene confusiones similares, esta pila de habilidades de desarrollo de front-end web es para usted. Su objetivo es hacer una guía de referencia para comenzar y avanzar en el desarrollo front-end. En la actualidad, se ha publicado la parte de descripción general y en el futuro se agregará una lista de habilidades de desarrollo de front-end y varios materiales de lectura extendidos. Si tiene algún comentario sobre esta guía de referencia, háganoslo saber en los comentarios. ¡Gracias!
El siguiente es el texto
Este artículo no solo enumera las pilas de tecnología involucradas en el desarrollo de front-end, sino que explora los "secretos" detrás de estas pilas de tecnología, adecuadas para principiantes y lectores que quieran comprender estos "secretos". Si solo desea conocer la pila de tecnología de desarrollo de front-end, continúe prestando atención a la pila de habilidades de front-end https://github.com/jobbole/web-skill-set
Apertura:
工欲善其事，必先利其器。
出自：《论语·卫灵公》
Prefacio:
Debido a que la sintaxis de JavaScript es muy simple, es fácil comenzar. Básicamente, puedes desarrollar un proyecto en unas pocas semanas, pero ¿eso es todo JavaScript? ¡Obviamente no! Muchos programadores que son nuevos en el desarrollo de JavaScript continuarán más o menos aprendiendo otras pilas de tecnología, como: grunt / gulp, npm, requre.js / seajs y otras tecnologías auxiliares; aprendiendo prototype / proto y otras tecnologías más oscuras Conocimiento de gramática; patrones de diseño maestro como MVC / MVP / MVVM; marcos como Backbone.js / Vue.js / React / AngularJS; bibliotecas como jQuery / Protorype / lodash.
duda:
Algunos principiantes tienen en su mayoría esta idea: ahora puedo escribir programas en JavaScript, y están en línea normalmente y funcionan bien. ¿Por qué debería dedicar más tiempo a aprender estas pilas de tecnología?
responder:
La pila de tecnología mencionada anteriormente es para compensar las deficiencias de JavaScript al desarrollar grandes proyectos.
duda:
Como el lenguaje más importante en el campo del desarrollo front-end, ¿JavaScript no puede ser competente para el desarrollo de proyectos a gran escala en la actualidad? Si queremos encontrar esta respuesta, debemos volver a comprender el pasado y el presente de JavaScript.
Vida pasada:
Se utilizó JavaScript (en forma de script) para compensar las deficiencias del desarrollo web en los primeros días de la creación. En esa época, JavaScript existía como una función auxiliar de los lenguajes de desarrollo como ASP / JSP, y el escenario utilizado con frecuencia (uno de ellos) era la "validación de formularios". Aunque el creador de JavaScript, Brendan Eich, ya "conocía" el futuro, no puede evitar el hecho de que JavaScript solo tardó 10 días en crearse. (Primera edición) En ese momento, no había un puesto especializado en el desarrollo de JavaScript. Los pioneros del desarrollo de front-end pusieron más energía en los problemas de compatibilidad después de las "Guerras de los navegadores".
desarrollo de:
Otro impacto después de la guerra de los navegadores es promover JavaScript para que se convierta en un estándar internacional, a saber: ECMAScript (Asociación Europea de Fabricantes de Computadoras), que se utiliza para describir la estructura gramatical de JavaScript y promover su desarrollo. Lo primero es solo la realización de lo segundo. (Nota: otro esquema de implementación de ECMAScript es ActionScript 3.0)
esta vida:
Con la aparición de navegadores modernos como Chrome, el analizador de JavaScript (V8) detrás de él ha mejorado enormemente la velocidad / eficiencia de ejecución de JavaScript. (Sobre la base de V8, otro gran dios, Ryan Dahl, inventó Node.js y desarrolló un lenguaje que originalmente solo se ejecutaba en el lado del navegador para el desarrollo de back-end). El nacimiento de jQuery permitió a los pioneros del desarrollo de front-end retirarse El atolladero de los problemas de compatibilidad ", tengo más energía para pensar en el futuro de JavaScript. El aumento del ancho de banda de la red y la aparición de la tecnología Ajax han permitido la actualización asincrónica de las páginas web, lo que ha acelerado enormemente la exploración de la arquitectura tradicional B / S a la arquitectura C / S. El éxito de Google Gmail ha promovido aún más esta tecnología para convertirla en un proyecto importante. posibilidad. Finalmente, apareció SPA (Single Page Application) y el uso de JavaScript para desarrollar grandes proyectos se ha convertido en una tendencia y un estándar.
Debilidades:
Dado que ECMAScript promueve el desarrollo de JavaScript, aunque JavaScript es un producto del siglo pasado, no es difícil desarrollar un pequeño proyecto front-end usándolo. Sin embargo, un proyecto SPA a gran escala a menudo tiene n bibliotecas de referencia externas, docenas (o incluso más) js / html / css / pictures y otros recursos; participación de varias personas / mantenimiento a largo plazo, miles de líneas de código especialidad. Obviamente, estas son situaciones que JavaScript no consideró al principio.
Características de los proyectos front-end:
Como se describió anteriormente, la pila de tecnología compensa las deficiencias de JavaScript en el desarrollo de proyectos a gran escala, por lo que para analizar las características de la pila de tecnología con mayor claridad, comience con el problema:
一个大型的 JavaScript 项目通常需要解决哪些问题？
-
Gestión de paquetes de referencia externos;
-
Actualizaciones del proyecto, iteraciones y problemas de refactorización causados por demasiado código;
-
Participa mucha gente y es difícil distinguir las responsabilidades del desarrollo;
-
Aunque se ha mejorado mucho el ancho de banda de la red, la velocidad de carga de la página sigue siendo un problema;
- Los recursos estáticos excesivos (html / js / css / recursos de imagen, etc.) conducen a una mayor carga de trabajo repetitiva cuando se conecta;
Gestión de paquetes de referencia externos:
JavaScript no tiene inherentemente funciones de administración de paquetes en otros lenguajes, pero esto no ha obstaculizado la exploración de nuestros grandes pioneros en el desarrollo de front-end. Las pilas de tecnología como npm y bower nos han resuelto el problema de administración de paquetes.
Problemas de actualización, iteración y refactorización del proyecto causados por demasiado código:
Dado que hay demasiado código, es necesario utilizar métodos de programación orientados a objetos como la encapsulación, la herencia y otros lenguajes de programación modernos. Aunque JavaScript no fue diseñado para resolver estos problemas en los primeros días de su creación, Brendan Eich obviamente previó el futuro, es decir, el lenguaje JavaScript original incluía ideas OO. En otras palabras, JavaScript es un lenguaje de desarrollo basado en objetos.
Aunque todos están orientados a objetos, JavaScript no es lo mismo que el tradicional orientado a objetos. Utiliza un método de cadena de herencia más avanzado pero oscuro. Por eso es que necesitamos entender la pila de tecnología prototipo / proto .
Muchas personas participan y las responsabilidades de desarrollo son difíciles de distinguir:
Debido a la aparición de proyectos de SPA a gran escala, las páginas no solo llevan el comportamiento del usuario, sino que también llevan el desarrollo lógico dirigido por el back-end al front-end. Originalmente, "M" en MVC era "más pesado" que nunca, por lo que en la capa "M", se formó una nueva teoría marco. Por lo tanto, comprender y dominar patrones de diseño como MVC / MVP / MVVM se convirtió en un medio necesario, y el marco de front-end se hizo popular. Al igual que otros lenguajes, la elección de marcos de front-end listos para usar se ha convertido naturalmente en una tendencia. Las "ideas de diseño" de estos marcos modernos incluyen conceptos novedosos para el desarrollo de front-end, tales como: Reaccionar el DOM virtual operativo (DOM virtual); simplemente practicar la teoría MVC Backbone.js; AngularJS estilo MVM, etc. Aprender y dominar el marco front-end puede distinguir mejor las responsabilidades, y la API unificada del marco se da cuenta de la posibilidad de desarrollo / mantenimiento a largo plazo por parte de varias personas.
Aunque el ancho de banda de la red se ha mejorado considerablemente, la velocidad de carga de la página sigue siendo un problema:
Dado que SPA es una aplicación de una sola página, casi todas las funciones están incluidas cuando se carga la página, pero los usuarios a menudo solo usan una parte de ellas, por lo que la limitación de la velocidad de la red, el desperdicio de ancho de banda y la espera de los usuarios son otro problema. El "desarrollo modular" es una solución milagrosa para resolver estos problemas, y las teorías de AMD / CMD se han convertido naturalmente en un conocimiento necesario para los desarrolladores front-end, y requre.js / seajs es la implementación específica de estas teorías. Debido a las características de Http (los pequeños recursos estáticos dispersos son más lentos de cargar), la fusión / compresión es otra solución, y surge un nuevo problema, a saber, el cuarto problema.
Los recursos estáticos excesivos (html / js / css / pictures y otros recursos) conducen a una mayor carga de trabajo repetitiva cuando se conecta:
Cuando hay pocos recursos estáticos, la combinación / compresión manual no es un problema, por el contrario, cuando estos recursos aumentan exponencialmente, la solución manual no es una buena manera. La introducción de soluciones de automatización es imperativa, y los profesionales: grunt / gulp / webpack deben dominarse.
Pensando:
La mayoría de los anteriores son pilas de tecnología creadas por "organizaciones no oficiales / comunidades de desarrolladores" ¿Cuál es la organización oficial de ECMAScript que promueve el desarrollo de JavaScript? ¿Es el JavaScript "más en" actual un producto obsoleto?
La respuesta, por supuesto, es incorrecta. ECMAScript ya ha anunciado su sexta versión: ECMAScript 6 (lanzado oficialmente en junio de 2015)
ECMAScript 6:
Su característica más importante (una de las) es incluir: Soluciones de clase (Native OOP) y Module (Native Modular).
En conclusión:
El desarrollo de JavaScript se puede lograr sin dominar estas tecnologías, pero el dominio de estas pilas de tecnología puede hacer que nos separemos de los asuntos "pesados / engorrosos" y nos "centremos más en la lógica empresarial".
El dominio de las tecnologías anteriores puede permitirnos integrarnos mejor en el desarrollo front-end moderno.
Conclusión:
Si ves aquí, ¡enhorabuena y bienvenido al nuevo mundo! ! !
Huevo de Pascua 1:
Los puntos de conocimiento enumerados anteriormente son solo parte de la pila de tecnología front-end, además de: depuración / prueba, optimización del rendimiento, métodos de precompilación CSS, reglas de codificación, SEO, desarrollo web móvil, etc.
Huevo de Pascua 2:
¿Todo estará libre de preocupaciones después de dominar estas tecnologías? Por supuesto que no. Con el desarrollo del desarrollo front-end, un día estas tecnologías todavía no podrán satisfacer el desarrollo. Por lo tanto, es necesario comprender la lógica teórica detrás de estas pilas de tecnología.
Huevo de Pascua 3:
-
¿Cómo elegir una pila de tecnología similar?
-
¿Necesita estas pilas de tecnología para proyectos grandes?
-
¿Por qué todavía siente que el desarrollo es lento después de usar el marco?
- Después de usar xxx, ¿no resolvió realmente mi problema?
¿Quieres entenderlos? , Siga la pila de habilidades de front-end https://github.com/jobbole/web-skill-set
referencias:
-
ECMAScript es una herramienta orientada a objetos
-
Descripción del idioma ECMAScript 6
-
Tabla de compatibilidad del navegador ECMAScript 6
-
Problemas de compatibilidad del navegador, enlaces y guerras de navegadores
- Analizador de Chrome V8