2022 Proceso de desarrollo front-end web y ruta de aprendizaje (versión detallada)

Enterprise 2023-08-15 23:46:29 views: null

prefacio

El front-end se enfoca en la interacción humano-computadora y la experiencia del usuario, y el back-end se enfoca en la lógica comercial y el procesamiento de datos a gran escala. En teoría, en los productos orientados al usuario, todos los problemas (incluidos los problemas de producto, diseño, back-end e incluso invisibles) estarán expuestos al front-end, y solo algunos problemas (problemas de datos, problemas de cálculo, problemas de seguridad, etc.). .) Estar expuesto en la parte trasera significa que la parte delantera juega un papel vital en el transporte y la conexión.

La actualización de la tecnología front-end cambia cada día que pasa; la selección de tecnología del marco front-end está en disputa; la tendencia de la estética visual cambia constantemente; el efecto de visualización es extremadamente genial; el sistema operativo del usuario se refina gradualmente; Las actualizaciones y adaptaciones de los dispositivos inteligentes son infinitas. Todo esto tiene un requisito para el campo de front-end y los estudiantes de front-end: tirar, amar tirar y tirar repetidamente.

1. Proceso de desarrollo front-end

necesita revisión

Generalmente, al hacer la revisión de requisitos, solo hay borradores interactivos en el PRD y todavía no hay borradores visuales. Es necesario generar el borrador visual una vez finalizada la revisión y alcanzado un consenso.

1. Análisis de demanda: discuta los puntos de demanda uno por uno, la racionalidad de la demanda, la revisión interactiva, la clasificación lógica y las posibles partes faltantes.

Sugerencia: el proceso de clasificación lógica lleva mucho tiempo y se ejecuta a lo largo de todo el proceso de desarrollo.

2. Canales/entorno involucrados:

Los canales y los entornos suelen ser puntos ciegos en la demanda y también son factores clave que afectan la selección de tecnología y el progreso del desarrollo.

  • Aplicación: página nativa de la aplicación, H5 integrado en la aplicación , applet integrado en la aplicación.
  • Programas pequeños: perspectiva de la pila de tecnología: páginas nativas de programas pequeños, H5 incrustado en programas pequeños y programas pequeños incrustados en aplicaciones.
  • Ordinario H5: Wechat H5, estación M (es decir, entorno de navegador normal)
  • Lado B: plataforma de gestión de operaciones, etc.

3. Análisis de viabilidad: si existen dificultades técnicas en la realización y si existen otras condiciones dependientes.

Fuente de datos: cuáles son la interfaz, cuáles son configurables y cuáles están codificados por el front-end; la parte configurable es leída por el front-end, o leída por la interfaz y luego devuelta al front-end. Sugerencia: la flexibilidad configurable se correlaciona positivamente con el riesgo.

Diseño de flujo anómalo: tolerancia a fallas, recuperación ante desastres, ascendente, degradante, mecanismo de respaldo, riesgo controlable. prd generalmente solo escribe la lógica del flujo normal, y el flujo anormal a menudo requiere la cooperación de los estudiantes de I + D para hacer una consideración integral.

6. Cambios en la demanda: si la demanda no está clara, se cambia la demanda, se agrega la demanda, se corta la demanda, se agrega el tiempo, se cambia el tiempo, se agrega la mano de obra, etc., el riesgo debe ser predicho de antemano.

revisión visual

1. Seguimiento del progreso: ¿Se entrega el borrador visual en lotes o en una sola vez ? Esta es la primera cosa a considerar.

De acuerdo con la experiencia histórica, la mitad de la demora en el progreso del proyecto front-end depende del progreso del borrador visual; debido al desarrollo de una nueva página, del 30% al 50% del trabajo front-end está haciendo página. construcción.

2. El formato de archivo del borrador visual:

  • Software de creación de bocetos: formato .sketch. Generalmente se utiliza para dibujar borradores visuales .
  • Software de creación de prototipos Figma: formato .fig.
  • Software de creación de prototipos Axure :: formato .rp. Axure se usa generalmente para dibujar borradores interactivos . Si está generando una maqueta de alta fidelidad, se recomienda Sketch o Figma.
  • Software Photoshop: formato .psd. Especializado en procesamiento de imágenes . Por supuesto, parte del personal de subcontratación de CP tiene habilidades únicas y les gusta usar PS para generar borradores visuales.
  • Software Adobe Illustrator (denominado software AI): formato .ai. Hacer gráficos vectoriales.
  • Software Adobe After Effects (AE): formato .aep. Haz una animación.

Observaciones: Sketch es un software de creación de prototipos exclusivo de la plataforma Mac, la más conocida y común. Figma  es un software de creación de prototipos de plataforma completa popular recientemente, y tiende a reemplazar a Sketch.

[Puntos clave] Al entregar el borrador visual, los estudiantes visuales deben generar un archivo de especificación visual " con dimensiones ".

3. Verifique los requisitos: si todos los puntos de diseño en los requisitos y el diseño de interacción están cubiertos.

4. Compruebe la especificación visual:

  • Si el estilo y el color coinciden con el estilo general de la página y el producto.
  • Especificación de tamaño: El ancho de la maqueta en el terminal móvil es de 750px.
  • Tipografía, alineación, consistencia. Se recomienda leer el libro "Escriba un libro de diseño que todos lean" para comprender los principios básicos del diseño.
  • Fuente: tamaño de fuente (generalmente por encima de 12 px, especialmente pequeña por encima de 10 px), peso de fuente (tenga en cuenta que el valor del atributo en negrita es 700) y cualquier fuente especial . Preste especial atención a los problemas de derechos de autor de las fuentes.

5. Qué diagramas son para la construcción de front-end, qué diagramas son recursos de imagen codificados de forma rígida y qué diagramas son configurables; en los diagramas configurables, cada elemento debe desmontarse. Si este elemento debe fusionarse con el diagrama de fondo o cortarse. por separado, Todavía lea los datos.

6. Formato de corte de imagen: png (formato transparente), jpg

El tamaño de la imagen de la imagen cortada no debe ser demasiado grande. Se recomienda que la imagen grande en el terminal móvil (como la imagen de fondo de la ventana emergente de la cortina) no supere los 50 kb y la imagen pequeña no supere los 20 kb.  Las imágenes se pueden comprimir en TinyPNG: comprima imágenes WebP, PNG y JPEG de forma inteligente antes de cargarlas  .

7. Dificultad y métodos de ejecución de gráficos y animaciones complejas, y evaluación técnica. Para obtener más información, consulte "Selección técnica" que se tratará a continuación.

Programar evaluación

1. La programación generalmente incluye los siguientes elementos:

  • Tiempo de desarrollo: tiempo de construcción visual, tiempo de entrega del documento de interfaz (protocolo de interfaz), tiempo de depuración conjunta de front-end y back-end, tiempo de autoprueba
  • Transferencia de tiempo de experiencia
  • tiempo de respuesta
  • Hora de lanzamiento (y es necesario confirmar la hora de lanzamiento comercial)

2. Cuando evalúe el cronograma, programe de acuerdo con el borrador visual , no con el borrador interactivo. Esto es lo primero a destacar. Para el desarrollo de una nueva página, del 30% al 50% del trabajo de front-end se realiza en la construcción de la página. Si solo observa el borrador interactivo, es imposible evaluar la carga de trabajo de desarrollo real.

3. El trabajo de desarrollo de front-end incluye: diseño de contorno, construcción visual, código lógico, depuración conjunta de front-end y back-end, autoprueba, experiencia de transferencia. Cada elemento debe desmontarse y evaluarse por separado, y sumarse es el cronograma general.

4. Al programar, se deben considerar otros factores dependientes: como el retraso del borrador visual, los requisitos poco claros, el progreso de la interfaz, el progreso de las pruebas y, por supuesto, lo más importante es el progreso en línea. Para proyectos urgentes, el cronograma de desarrollo a menudo se invierte según el tiempo de lanzamiento.

5. Después de ingresar a la etapa de desarrollo, coordine los recursos de prueba con el departamento de prueba y confirme el tiempo de transferencia; para proyectos a gran escala y proyectos clave, es necesario notificar al departamento de prueba con anticipación durante la etapa de revisión de requisitos para reservar tiempo.

6. Si está desarrollando otros proyectos en paralelo, debe reservar un búfer para usted cuando programe. Es un lugar común desarrollar dos proyectos en paralelo, sin embargo, cuando este proyecto se está probando, muchas veces es difícil dejar de hacer otros proyectos, porque siempre se verá frenado por los zapatos de los niños de prueba.

7. Programa de desarrollo: si hay un cambio en el programa de desarrollo, es necesario informar inmediatamente a otro personal relevante, especialmente para evaluar el riesgo del programa de prueba. Los cronogramas de prueba son más difíciles de cambiar que los cronogramas de desarrollo.

Selección de tecnología

La selección de tecnología está en constante cambio, y cien escuelas de pensamiento compiten. Aquí debe enumerar las selecciones de tecnología comúnmente utilizadas en su departamento, no las pilas de tecnología en el mercado.

1. Marco de desarrollo de página:

(1) Página multiterminal: (página nativa del mini programa, H5)

  • Marco Taro (basado en la pila de tecnología React)

Nota 2: para algunas empresas, solo se realizó H5 al principio, y las iteraciones posteriores requirieron la página nativa del applet. Esto también debe tenerse en cuenta en la evaluación de necesidades.

(2) Página H5:  marco Vue.js , marco React

(3) Lado de la aplicación:

  • Lenguaje de desarrollo de Android: Kotlin (nuevo), Java (antiguo)
  • Idiomas de desarrollo de iOS: Swift (nuevo), Objective-C (antiguo)

(4) desarrollo del lado B, marco de interfaz de usuario:

(5) Marco de desarrollo back-end de Node.js:

  • Koa: un marco Node.js de nueva generación.
  • Egg.js : Egg es un marco de desarrollo web de nivel empresarial encapsulado aún más sobre la base de Koa.
  • Express: un marco Node.js más antiguo.

2. Preprocesador CSS: SASS

3. Dificultad y métodos de implementación de gráficos y animaciones complejas, evaluación técnica:

  • animación gif: Trate de no usarlo. Porque el archivo es demasiado grande y el efecto es borroso.

  • Animaciones CSS3: adecuado para animaciones simples y regulares. Ejemplos: pez oscilante , fábrica Jingxi

  • Canvas : las animaciones de Canvas y las imágenes para compartir subprogramas se dibujan con Canvas

  • Animación 3D: WebGL ( Three.js  es una biblioteca completa de WebGL) casos comunes: el sistema solar

  • Marco del juego: Cocos Engine

diseño de contorno

  • Demanda de antecedentes y recursos
  • Evaluación de riesgos
  • Selección de tecnología
  • diseño de la estructura del proyecto
  • Diseño lógico del punto de función principal
  • Diseño escalable y reutilizable.
  • Interfaz de dependencia
  • Desglose y programación de la carga de trabajo

Enlace de desarrollo

1. Diseño de código:

(1) Diseño de estructura de directorio, estilo de código

(2) Diseño de componentes y herramientas públicas: garantizar los principios de reutilización , alta cohesión y bajo acoplamiento. Cuáles pueden reutilizar los componentes públicos de la plataforma Jingxi y cuáles necesitan escribir componentes y utilidades por separado.

(3) Diseño de ventana emergente: si una página tiene varias ventanas emergentes, se recomienda diseñar primero una clase base de ventana emergente abstracta. Al diseñar ventanas emergentes, debe tener en cuenta :

  • Principios de diseño: fácil de expandir, fuerte reutilización
  • evitar la duplicación de código
  • Evite varias ventanas emergentes al mismo tiempo
  • La posición de la ventana emergente debe estar estrictamente centrada (la posición de la ventana emergente no puede desalinearse debido al cambio de tamaño de la pantalla)
  • Tratar con dolencias penetrantes de desplazamiento.

2. Construcción visual:

(1) Cuando el backend desarrolla la interfaz, el frontend hace la construcción visual; una vez que se completa la construcción visual, el frontend ajusta la interfaz a través de datos simulados y escribe la lógica del frontend de acuerdo con la definición del documento de la interfaz; etapa de ajuste.

(2) Se recomienda que los zapatos delanteros para niños aprendan a cortar imágenes por sí mismos, lo que es más controlable y puede reducir los costos de comunicación. Simplemente aprenda las operaciones básicas de PS y Sketch, y sea un cortador de figuras frontal calificado.

(3) Para estilos y animaciones regulares, se recomienda usar códigos en lugar de imágenes. Las imágenes reducirán el rendimiento de apertura de la página y el efecto de visualización en pantallas grandes será relativamente borroso.

(4) Requisitos dimensionales para recortes: el 100 % del ancho estará sujeto a 750 px.

(5) Borrador visual a nivel de píxel : se recomienda usar  el software de captura de pantalla Snipaste  , presionar F1 para capturar la captura de pantalla, F2 para texturizar, luego ajustar la transparencia de la textura al 50 % y comparar la textura con la página principal a nivel de píxel. .

3. Implementación de la lógica de negocios:

(1) Se recomienda usar primero un mapa mental , ordenar la lógica comercial y luego escribir el código a mano. Los mapas mentales son útiles para aclarar la lógica, revisar después del evento y explicar a los demás de manera eficiente de un vistazo. Lo que importa es la idea, no qué herramienta es mejor usar.

(2) Al llamar a la interfaz, es necesario aclarar el propio límite de seguridad del front-end: suponiendo que el campo de la interfaz sea anormal, el front-end debe tener sus propias medidas de degradación y no puede depender y confiar completamente en el campo. , lo que resulta en una pantalla blanca directa, interacción anormal o incluso colgar en la página.

(3) Además de completar la lógica de negocio requerida por el producto, también se debe considerar en todo momento el diseño y la recuperación ante desastres de flujos anormales.

(4) Cuando muchos zapatos para niños de la parte delantera están haciendo requisitos, tienen la costumbre de no gustarles mirar prd cuidadosamente, y solo se desarrollan contra borradores interactivos y borradores visuales. Aunque esto ahorra problemas, hay tres procedimientos que no se pueden perder:

  • Antes del desarrollo, debe revisar nuevamente los detalles de prd con los zapatos para niños del producto;
  • Durante el proceso de desarrollo, comuníquese y confirme repetidamente con los zapatos para niños del producto en cualquier momento;
  • Cuando el desarrollo alcance el 80%, compare usted mismo el prd y léalo palabra por palabra para ver si hay omisiones.

4. Requisitos no funcionales. Después de escribir el código comercial, aún quedan muchos detalles por pulir. Por ejemplo:

  • Compartir escenarios a través de diferentes canales
  • Comprobación de la configuración de ppms: es necesario verificar el lado de la configuración de la operación; es para la operación del producto y la configuración debe ser lo más humanizada posible.
  • Agregar puntos enterrados: informe de exposición, informe de clics, informe de respiración
  • Informe de seguimiento, informe de prueba, informe badjs
  • Código duplicado simplificado
  • Eliminar códigos redundantes como console.log y debugger
  • Compresión de recursos estáticos, como imágenes y fuentes.
  • Optimización de rendimiento común: pantalla de esqueleto (bajo demanda), carga diferida de imágenes, precarga de imágenes, aceleración antivibración, desplazamiento de lista larga a carga dinámica en el área visible
  • Experiencia de usuario perfecta: posicionamiento de retorno, penetración de desplazamiento
  • adaptación de pantalla
  • Adelgazamiento de código de programa pequeño
  • Simulacro de recuperación ante desastres

5. Envío de código:

  • Primero git pull, luego git push, para reducir los conflictos de código.
  • La granularidad de confirmación debe ser lo más fina posible
  • Antes de confirmar, asegúrese de diferenciar el código y confirmar los cambios de cada línea para evitar enviar cambios innecesarios.
  • Formatos comunes de Commit Message: feat, fix, docs, merge
  • Si encuentra un conflicto al combinar el código, asegúrese de resolver el conflicto antes de enviar el código. Si el conflicto involucra el código de otras personas, debe encontrar a los compañeros de clase correspondientes para resolverlo juntos.

6. Autoevaluación:

  • En comparación con prd, verifique si hay fugas y llene las vacantes.
  • Experimente la página en un dispositivo real, no en un emulador.
  • Escriba algunos casos de prueba para acelerar el progreso de las pruebas posteriores. El mapa mental resuelto anteriormente es en realidad el mejor material para la prueba.

experiencia de producto

1. Experiméntalo en una máquina real, no en un emulador. Lo mejor es comparar la experiencia de iOS y Android.

2. Durante la experiencia, registre y ordene varias listas de todo:

  • Lista de requisitos para confirmar: algunos puntos de demanda pequeños y controlables por riesgo se pueden presentar al producto zapatos para niños en la etapa de examen físico.
  • Lista inacabada de desarrollo: qué partes inacabadas deben explicarse claramente con los zapatos para niños del producto.
  • lista de errores conocidos
  • Experimente la lista de problemas: mientras experimenta, registre los problemas de los comentarios del producto y sincronícelos para probar los zapatos de los niños más tarde.
  • Lista de dependencias: interfaz, recorte visual, entorno de prueba real, etc.

revisión de código / revisión de código

La revisión del código se puede hacer durante la prueba.

orden de revisión:

  • lógica del núcleo del negocio
  • Estándares de codificación
  • Las posiciones clave y los lugares que son fáciles de pisar en boxes deben anotarse en detalle.
  • Garantía del sistema (seguimiento, recuperación ante desastres y downgrade)
  • Seguridad y riesgo del sistema
  • experiencia de usuario

recorrido visual

Se pueden realizar recorridos visuales durante las pruebas.

Todos los zapatos visuales para niños tienen ojos de píxeles, incluso si hay una diferencia de uno o dos píxeles, pueden verlo. Por lo tanto, se recomienda que los zapatos para niños de la parte delantera fortalezcan la autocomprobación y se esfuercen por restaurar el borrador visual a nivel de píxeles .

Se recomienda utilizar el software de captura de pantalla Snipaste para la parte delantera de los zapatos para niños   , presione F1 para tomar una captura de pantalla, F2 para mapear, luego ajuste la transparencia de la textura al 50% y compare la textura con la página de la parte delantera en el píxel. nivel.

sesión de prueba

1. Se recomienda fortalecer la calidad de la autoevaluación. Después de ingresar a la etapa de prueba, los zapatos de los niños se someterán a una ronda de pruebas de humo. Si la calidad no está a la altura, se devolverán, lo cual es muy vergonzoso.

2. Organice la lista de verificación del proceso principal requerida para la autoevaluación, la prueba y la liberación, que se puede usar en cada iteración.

Los elementos básicos de un correo electrónico de referencia incluyen, entre otros:

  • enlace prd, enlace de maqueta
  • enlace de la página
  • personal relacionado con el proyecto
  • Sistema de configuración de datos
  • agente anfitrión
  • documentación de la interfaz
  • Breve diseño, acabado de desarrollo frontal (si corresponde)
  • casos de prueba (si los hay)
  • Combinación de lógica empresarial central (si corresponde)
  • Lista de problemas de experiencia
  • Recomendaciones de enfoque de prueba
  • Evaluación de riesgos

3. Para probar la lista de errores planteada por los zapatos de los niños, los estudiantes de desarrollo deben completarla dentro de las XX horas, de lo contrario, el control de calidad los instará.

4. Es necesario controlar la cantidad de tickets de errores, de lo contrario, se hará responsable y se reanudará. Para problemas similares, se recomienda fusionar los zapatos de prueba para niños en la misma lista de errores.

5. El sistema de gestión de pruebas es una plataforma para que todos se ocupen del proceso de errores. No es para probar los zapatos de los niños para registrar problemas personales de forma casual. Por lo tanto, es necesario recordar los zapatos de los niños de prueba, dejar en claro que el problema es un error y luego facturar; si no es un error, no lo mencione o rechace después de la comunicación.

plan de lanzamiento

  • Orden de lanzamiento: generalmente, el backend se lanza primero y luego se lanza el frontend
  • Si las dependencias están listas: datos configurados, elementos de configuración, etc.
  • ¿Afectará los negocios en línea y los datos en línea?
  • Se deben verificar el entorno local, el entorno de desarrollo y el entorno gamma.
  • mecanismo de reserva
  • Publicar lista de verificación

confirmación en línea

  • Una vez completada la liberación, debe generar el correo electrónico de confirmación en línea
  • Observar la experiencia de la página y el rendimiento de la página
  • Observe los datos de monitoreo y el volumen de llamadas comerciales
  • Revisión resumida

2. Ingeniería de front-end

Gestión de versiones de Git

1. La especificación de la rama git del almacén de código front-end:

2. Para el formato del Mensaje de Confirmación, solo se permiten los siguientes 10 logos, los más comunes son feat y fix:

  • hazaña:  nuevas características
  • corregir:  corregir errores
  • documentos:  Documentación
  • estilo:  cambios de formato, no afecta el funcionamiento del código
  • refactor:  refactorización (ni una nueva función ni un cambio de código para modificar un error)
  • prueba:  prueba de aumento
  • tarea:  cambios en el proceso de construcción o herramientas auxiliares
  • arriba:  Esta categoría se puede utilizar cuando no pertenece a las categorías anteriores
  • fusionar:  se usa para la rama de fusión, cuando se requiere un mensaje de confirmación escrito a mano
  • revertir:  se usa para deshacer la confirmación anterior

3. Rama de negocio, convención de nomenclatura: (se recomienda agregar la fecha)

  • Rama de características: característica_xxx_YYMMDD
  • Rama de corrección de errores de emergencia: hotfix_xxx_YYMMDD
  • Rama de lanzamiento de applet (generada automáticamente): release_YYMMDD

especificación de código

  • Formato de código: más bonito
  • Verificación de formato de código: ESLint

preprocesador CSS

  • SASS (usado más)
  • Menos
  • PostCSS

gestión de paquetes

  • Herramientas de gestión de paquetes: npm (más común), hilo
  • Comandos comunes cnpm, nvm, nrm

compilar construir

  • paquete web (más común)
  • Rápidamente
  • Trago
  • Babel: convertir la sintaxis de ES6 a la sintaxis de ES5

Ingeniería de programas pequeños

relacionado con la prueba

  • Escribir código de caso de prueba
  • prueba de unidad
  • prueba automatizada

3. Conocimiento básico de front-end

Puntos de conocimiento básicos de entrada de front-end

navegador

  • Estándares web: Estándares estructurales (HTML), Estándares de presentación (CSS), Estándares de comportamiento (JS)
  • El navegador se divide en dos partes: motor de renderizado (es decir, núcleo del navegador), motor JS
  • Cómo funcionan los navegadores: redibujar y redistribuir, el motor V8
  • El contenedor WebView de la aplicación, que es equivalente a un navegador, puede incrustar páginas web H5

HTML5

  • Etiquetas semánticas: <header>, <article> , <footer>etc.
  • Pestaña Multimedia: <audio>,<video>
  • Mayor capacidad de almacenamiento local y compatibilidad con dispositivos: indexDB, cookie de aplicación HTML5
  • 3D, gráficos y efectos especiales: SVG, Canvas, WebGL
  • Conexiones en tiempo real más eficientes: WebSocket, eventos enviados por el servidor
  • Experiencia de accesibilidad

CSS, CSS3

  • Modelo de caja CSS, BFC
  • Flotante, posicionamiento (posicionamiento absoluto y posicionamiento relativo)
  • diseño flexible
  • Disposición del Santo Grial, Disposición de doble ala voladora
  • Selectores: selectores descendientes, selectores de intersección, selectores de unión, selectores de pseudoclase
  • Transformación 2D: traducción móvil, rotación, escala de zoom
  • Conversión 3D: perspectiva perspectiva, 3D mobile translate3d, rotación 3D giratorio3d, estilo de transformación de representación 3D
  • Animación CSS3: animación
  • truco CSS
  • Cómo lograr 1px de píxel en la pantalla Retina

Conceptos básicos de JavaScript

  • Sintaxis ES6: modo estricto, función de flecha, promesa, tipo de datos de símbolo, estructura de datos de conjunto y mapa

  • ES6 a ES5

  • Conversión de tipo de datos JS, conversión de tipo implícito

  • Objetos integrados y sus métodos.

  • Varios métodos de arreglos: mapa, filtro, cada, reducir, etc.

  • Mecanismo de eventos, herencia de prototipos, función de ejecución inmediata.

  • Operación DOM, algoritmo diferencial de DOM virtual

  • Operación del navegador de lista de materiales

  • Mecanismo de burbujeo de eventos: fase de captura, fase objetivo, fase de burbujeo.

  • Programación asincrónica: Ajax, Promise, async await

  • Almacenamiento de sesión和Almacenamiento local、Cookie

  • Iterador Iterador y Generador Generador

  • Zócalo web

  • programación asíncrona

  • hilo único

  • Dibujo de imagen de lienzo

  • animación svg

js avanzado

  • JS Three Mountains: prototipo y cadena prototipo, alcance y cierre, asíncrono y de subproceso único
  • Cadenas de alcance, clases, herencia, herencia prototípica
  • estas reglas de señalización y vinculación
  • copia profunda y copia superficial
  • Estabilización y estrangulamiento
  • Promete macro tareas y micro tareas
  • Reflujo y pintura del navegador
  • Escribió a mano toda la lógica y la API de Promise: resolver, rechazar, luego, capturar, finalmente, allSettled, competir con cualquier
  • funciones de orden superior
  • delegación de eventos
  • llamar, aplicar, enlazar
  • pseudoarreglo de argumentos
  • curry de funciones
  • Modularidad: CommonJS, AMD, CMD, ESModule
  • Gramática de alto nivel JS: iterador iterador, generador de decoradores
  • Sintaxis de alto nivel de JS: Decorador, Proxy/Reflect, MutationObserver, Descriptor de propiedad de objeto, Object.assign, Object.freeze, Object.seal
  • Fuga de memoria JS, algoritmo de recolección de basura JS
  • Comprobación de tipos de TypeScript
  • Análisis de código fuente de Vue.js, React.js
  • Gestión de estado para Vue.js y React.js : Vuex, Redux, Redux Toolkit, React Hooks, zustand
  • Código fuente del motor V8

Nodo.js

  • Llamar de vuelta
  • mecanismo impulsado por el tiempo
  • Modular
  • función
  • enrutamiento
  • metodo global
  • sistema de archivos

seguridad web

  • Problemas entre dominios, política del mismo origen, JSONP
  • CORS
  • XSS
  • CSRF

formulario de página

  • Disposición adaptativa multiterminal

  • Solicitud de página única SPA

  • PWA (Progressive Web App): el creador de pequeños programas

4. Marco frontal

Cada marco y herramienta tiene sus propias restricciones, valores y mejores prácticas.

Marco JS

  • Vue.js
  • Reaccionar.js
  • Svelte (marco ligero, relativamente popular recientemente).
  • angular (eliminado)

Comparado:

  • Vue: programación declarativa, pensamiento basado en datos
  • React: Programación funcional. Si desea cambiar los datos, debe llamar a la API para cambiarlos.

En vue, se te da casi todo lo que quieres, mientras que react persigue una mayor autosuficiencia.

Marco CSS, biblioteca de componentes (comúnmente utilizado en el lado B)

Marco de la base de conocimientos

  • Vuepress (basado en Vue.js, recomendado)
  • Docusaurus (basado en React.js, recomendado)
  • GitBook
  • docsify: Hacer documentación wiki simple. Caso: Wiki del sepulturero

Suplemento: marco de la base de conocimiento, primero recomiendo Vuepress y Docusaurus, potente, maduro y estable.

Marco de documentación de la API

  • TypeDoc: Genere HTML, Markdown y otros documentos a partir de proyectos de TypeScript.
  • libro de cuentos : una base de conocimientos para crear componentes de interfaz de usuario. Los estilos y efectos interactivos de los componentes de la interfaz de usuario se pueden previsualizar en línea.

Marco cruzado

  • Flutter (más popular recientemente): el lenguaje de desarrollo Dart de Flutter, que se puede compilar en código ARM 64, x86 y JavaScript

  • ReactNative (disminuyendo gradualmente): aplicación, web

  • Taro: manzanas, H5

Marco de desarrollo de aplicaciones de escritorio

  • Marco de electrones. Caso: El software VS Code está desarrollado con Electron.

Electron es muy popular, utilizado por una gran cantidad de empresas y tiene muchos programas exitosos, como VS Code, Facebook Messager, Twitch, Microsoft Teams, etc. Aunque Electron es fácil de iniciar, el problema es obvio, es decir, es lento, consume memoria y es grande . Electron consume memoria porque el Chromium empaquetado consume contenido. Al mismo tiempo, Hello World costará más de 120 millones después de la compilación.

Las herramientas de desarrollo de VS Code, Chrome y applets básicamente ejecutan kernels de Chrome. Entonces encontrará que estos tres programas ocupan mucha memoria y están muy atascados. Yo lo llamo los " Tres mosqueteros de los dolores de cabeza frontales ".

Marco de visualización frontal, biblioteca de gráficos

  • ECharts: la biblioteca de gráficos de código abierto de Baidu.
  • D3.js: biblioteca visual js.
  • Three.js : un motor 3D basado en el  paquete WebGL nativo  . Sistema Solar Caso  #
  • Motor Cocos : marco de desarrollo de animación de juegos.
  • Egret Engine : motor de juego H5, un conjunto completo de soluciones de juego H5. La empresa donde se encuentra el motor Egret quebró a principios de 2022 y no se recomienda su uso.

marco del editor

  • wangEditor: muy popular en China
  • TinyMCE: Muy popular en el extranjero
  • ueditor: marco de código abierto de Baidu. Más antiguo y en declive gradual.
  • Editor de Mónaco: versión en línea de VS Code

Marco Node.js

  • Koa: un marco Node.js de nueva generación.
  • Egg.js : Egg es un marco de desarrollo web de nivel empresarial encapsulado aún más sobre la base de Koa.
  • Express: un marco Node.js más antiguo.

marco de renderizado del lado del servidor

  • Next.js (basado en React.js)

  • Nuxt.js (basado en Vue.js)

Marco de prueba de front-end

  • Mocha : Marco de pruebas JS.
  • Tiga : SDK de pruebas automatizadas para proyectos cruzados (H5, applet). Producido por Bump Labs.

5. Optimización del rendimiento de front-end

herramienta de análisis de rendimiento

  • Gráfico de cascada de la consola Cascada

  • La herramienta de rendimiento de la consola: observe y analice el rendimiento del tiempo de ejecución durante el proceso de desarrollo diario

  • LightHouse en la consola: puntos de ejecución, informes de rendimiento de salida, análisis de rendimiento

  • WebPageTest Website: Evaluar el rendimiento del sitio web

  • Rendimiento Esta API: mida dinámicamente el rendimiento en tiempo real

parámetro de rendimiento

  • Tiempo de primera pantalla = tiempo de pantalla blanca + tiempo de renderizado. Preanálisis, precarga, prerenderizado, carga diferida, ejecución diferida.
  • Velocidad de fotogramas FPS
  • Medida de rendimiento: el modelo RAIL
  • Entorno de red débil, comparación que requiere mucho tiempo

Optimización de renderizado del navegador

  • Comprender el proceso de renderizado, la ruta de renderizado crítica
  • Reduzca los reflujos y los repintados
  • ¿Qué proceso atravesó el usuario desde que ingresó la URL hasta que se completó la pantalla de carga de la página?

Optimización de JavaScript

  • Optimización de recursos JS: carga bajo demanda, compilación y empaquetado, análisis y ejecución, carga asíncrona
  • Principio de funcionamiento del motor V8, principio de optimización del rendimiento
  • Estabilización y estrangulamiento
  • Lista de desplazamiento infinito: hacer reciclaje de nodos
  • Esqueleto de pantalla de esqueleto: reduce el movimiento del diseño
  • Fragmentos de tiempo: divida una tarea de larga duración en tareas más pequeñas y ejecútelas en bloques para reducir la sensación de retraso del usuario.
  • Gestión de memoria JS

optimización de recursos

  • Compresión y fusión de recursos: reduzca la cantidad de solicitudes http; reduzca el tamaño de los recursos solicitados; use caché http
  • Optimización de HTML: reduzca el uso de iframe; evite el anidamiento profundo de nodos; evite usar el diseño de tablas
  • Optimización de CSS: reduzca el bloqueo de CSS de la representación de páginas, cargue CSS lo antes posible; use GPU para generar animaciones CSS; use el atributo de contenido para reducir el diseño y el consumo de tiempo de dibujo
  • Optimización de imágenes: use CSS3, SVG, IconFont en lugar de imágenes; carga diferida de imágenes; precarga de imágenes; imágenes progresivas; imágenes receptivas; use base64 en lugar de imágenes de menos de 8kb.
  • Optimización de fuentes: problema de parpadeo de fuentes; al usar fuentes especiales, se recomienda cargar dinámicamente las fuentes web
  • Carga asíncrona de recursos de terceros: los recursos de terceros incontrolables afectarán la carga y visualización de la página

optimización de compilación

  • sacudidas de árboles, división de código (División de código)
  • ofuscación de minificación de código
  • Al empaquetar, evite compilaciones repetidas de bibliotecas que no cambian.

Optimización de transmisión de red

  • Habilitar Gzip para comprimir recursos
  • Transmisión de CDN: todos los recursos estáticos se colocan en el CDN, de modo que los usuarios puedan obtener el contenido requerido cerca y reducir en gran medida la distancia de transmisión de fibra óptica.
  • Evite los redireccionamientos: los redireccionamientos 301 y 302 ralentizan la respuesta
  • Análisis previo de dns: use dns-prefetch para resolver los nombres de dominio por adelantado para mejorar la velocidad de carga de recursos. La resolución previa de DNS puede reducir el tiempo de carga en aproximadamente un 5 % al acceder a sitios web basados ​​en imágenes.
  • PWA, trabajador de servicio
  • Representación del servidor SSR/nodo directo

6. Herramientas y recursos de front-end

documentación de front-end

Comunidad de front-end

  • GitHub
  • desbordamiento de pila
  • pepitas

Recursos de aprendizaje JS

Especificación de código JS

1, Guía de estilo JavaScript de Airbnb:

2, código limpio JavaScript:

Preguntas sobre el pincel frontal

Recursos de aprendizaje de CSS

Recursos relacionados con las fuentes

herramienta de captura

Visor de compatibilidad

Herramientas relacionadas con la imagen

Herramientas de diseño

herramienta de diagrama de flujo

notas de esquema

editor de rebajas

  • tipora
  • Código VS

editor de código

  • Código VS
  • Texto sublime

7. Libros de front-end recomendados

Libros clásicos de JS

  • Libro Rojo: "Programación Avanzada JavaScript"
  • Little Yellow Book: "JavaScript que no conoces" Volumen 1 y Volumen 2
  • Libros de Rhino: la guía definitiva de JavaScript
  • Libro verde: "Esencia del lenguaje Javascript y práctica de programación"

JS avanzado

  • "Conocimiento básico avanzado de desarrollo front-end"
  • Veinte años de JavaScript
  • "Ilustración de JavaScript"
  • "Comprensión profunda de JavaScript moderno"
  • "Trucos de JavaScript Ninja"
  • "Escribir JavaScript mantenible"
  • "Ingeniero de JavaScript increíble: desde el front-end hasta el avanzado completo"
  • "Patrones de diseño de JavaScript y prácticas de desarrollo"
  • "Información privilegiada sobre tecnología WebKit"
  • El Apocalipsis JavaScript

CSS

  • "Mundo CSS"
  • "CSS Nuevo Mundo"
  • "CSS Desmitificado"
  • "Dominar CSS"

Vue.js

  • "Diseño e Implementación de Vue.js"
  • "Explicación detallada de Vue.js"

Nodo.js

  • "Explicación detallada de Node.js"
  • "Node.js: una docena de extensiones de C++"

Estructuras de datos y algoritmos

  • "Alma de la Computación"
  • "Estructura de datos de Big Talk"
  • "Aprendizaje de estructuras de datos y algoritmos de JavaScript"

extremo posterior

  • "Diseño dirigido por dominio"
  • "Práctica del sistema de recomendación"
  • "Diseño de sistemas de aplicaciones intensivas en datos"
  • "El camino hacia la mejora del código: de Code Farmer a Craftsman"

Gestión de Proyectos y Concientización

  • "Hombre mítico Luna"
  • "El hacker y el pintor"
  • Libros de Joel Spolsky: "Software Caprice", "Joel habla sobre software", "Joel habla sobre excelentes métodos de desarrollo de software"
  • "Proyecto Fénix"
  • "Entrega continua 2.0"
  • "Ingeniería de software de Google"
  • Soft Skills: una guía de supervivencia más allá del código
  • "Reinicio 3: Saltar del loco ajetreo"
  • "Entrenamiento de pensamiento del programador"
  • "Sentido común de la gestión"

producto

  • "Revelación"
  • "Red"
  • "Todos somos Product Manager"
  • "Elementos de la experiencia del usuario"
  • "Análisis efectivo de necesidades"
  • La belleza de la lógica del producto: creación de sistemas de productos complejos
  • "La vista del producto detrás de WeChat"
  • "Metodología del producto Yu Jun"
  • "Victoria decisiva en el extremo B: el camino hacia la actualización de Product Manager"
  • "Tecnología para Product Managers"
  • "Análisis de datos ajustados"
  • "Colección de entrevistas de gerentes de productos"
  • "Experience Engine: exploración panorámica del diseño de juegos"

diseño

  • Cuatro volúmenes de "Psicología del diseño"
  • "Elementos de la experiencia del usuario"
  • "Tianshichengjin"
  • "Libro de diseño para todos"
  • "Acerca de Face 4: La esencia del diseño de interacción"
  • "Diseño en Diseño"
  • "Mariposa de capullo"
  • "La simplicidad primero: cuatro estrategias para el diseño interactivo"
  • "Diseño de formularios web: el arte de convertir la piedra en oro"
  • Tocando corazones: diseñando excelentes aplicaciones para el iPhone
  • Belleza momentánea: cómo el diseño de la interfaz web hace que los usuarios se muevan
  • Métricas de la experiencia del usuario: recopilación, análisis y presentación

funcionar

  • Dos volúmenes de "Operación Luz"
  • "Estoy haciendo crecimiento de usuarios en primera línea"
  • "Growth Hacking: trucos de crecimiento de ingresos y usuarios para empresas emergentes"
  • "Piscina de flujo"
  • "Superoperaciones"

Negocio

  • "Biografía de Steve Jobs"
  • "Cima de la ola"
  • "ganar"
  • "Por qué haces un buen trabajo en Internet: del pensamiento técnico a la lógica empresarial"
  • "Publicidad Computacional"
  • "Discusión detallada: Zuo Hui"
  • "En línea: los datos cambian la naturaleza de los negocios, la informática remodela el futuro de la economía"
  • "La filosofía de la venta al por menor"
  • "Veo comercio electrónico"
  • "Compañía en una tabla de surf"
  • "Un libro para entender los informes financieros"

pensamiento y cognición

  • "Aprender a hacer preguntas"
  • "Pensando, Rápido y Lento"
  • "El arte del pensamiento claro"
  • "Tómate el tiempo como un amigo"
  • "intelectuales"
  • "El camino menos transitado"
  • "Métodos de comunicación"
  • "Por qué dormimos"

8. Resumen y cognición de front-end

Perspectiva de I+D, cómo entender los requisitos

Haga clic para ver la imagen más grande .

Como puede ver en el diagrama de flujo anterior, ¿cuáles son los entregables del gerente de producto? es prd? Obviamente no.

El trabajo de un gerente de producto es muy diferente al de un diseñador o un ingeniero. Se espera que los ingenieros entreguen un código de trabajo, se espera que los diseñadores entreguen maquetas. Y para los gerentes de producto, entregar un prd no es suficiente.

Los gerentes de productos son responsables de hacer un seguimiento de todo el ciclo del producto, incluidos los efectos de página y el rendimiento de los datos después del lanzamiento. Escribir una especificación de requisitos es un medio de comunicar y hacer avanzar el proyecto , pero la especificación en sí misma no tiene valor intrínseco . Muchos gerentes de productos no usan prd para comunicar sus ideas, pueden usar la conversación y pueden dibujar ideas en la pizarra. También hay algunos gerentes de producto que escribieron especificaciones, pero no las siguieron para implementarlas.

¿Qué habilidades y cualidades debe poseer un ingeniero front-end?

  • Fundamento técnico, visión técnica, búsqueda técnica.
  • Además de desarrollar funciones comerciales, también es necesario tener una cierta comprensión y práctica de las especificaciones de desarrollo, la ingeniería, la creación de componentes, la modularización, las pruebas y los patrones de diseño.
  • Habilidades de comunicación y expresión, habilidades de expresión escrita, hábitos de revisión de resumen
  • Pensamiento global, pensamiento abstracto, conciencia de entrega continua
  • Responsable de la primera posición del proyecto, con sentido de trabajo en equipo.
  • Compensación integral: costo, eficiencia, calidad, riesgo, experiencia
  • Concéntrese en el producto, el diseño, los negocios y otros campos. La interdisciplinariedad conduce a más innovaciones.

Cognición frontal

1. Aunque la mayor parte de nuestro tiempo se dedica al desarrollo comercial, aún necesitamos acumular otros aspectos de la precipitación y hacer cosas más interesantes y sostenibles, como compartir resumen, desarrollo de capacidades básicas, mejora de la eficiencia de I + D, construcción de operaciones técnicas, precipitación de tecnología, etc.

2. Aprenda a hacer preguntas. Cuando preguntamos y resolvemos problemas en nuestra vida diaria, a menudo somos propensos a caer en problemas XY , lo que resulta en objetivos poco claros, pensamiento poco claro, baja eficiencia de comunicación e incluso desperdiciamos una gran cantidad de recursos, tiempo y energía en una dirección completamente equivocada. Se muestra tanto en la persona que pide ayuda como en la persona que la da.

Cuando se enfrente a un problema, comprenda la intención, el hecho, la emoción, la expectativa de la oración. Aprender a hacer preguntas y aprender a responderlas es una especie de sabiduría. Vea la sabiduría de hacer preguntas  .

3. Seguimiento de todo el proceso, entrega continua y creación de valor comercial.

4. La esencia del front-end es vincular las capacidades comerciales, de diseño y de cómputo para brindar a los usuarios una experiencia profesional de interacción humano-computadora.

5. La capacidad del producto y la capacidad técnica son: juzgar la información, comprender los puntos clave, integrar recursos limitados, empaquetar el valor propio en un producto para su entrega y obtener recompensas.

6. Hay muchos roles en el sistema departamental: operación, producto, visión, desarrollo, pruebas, arquitecto, líder, marketing, análisis de datos, operación y mantenimiento, etc. Algunos trabajos no son una cuestión de "hacer o no hacer", sino una cuestión de grado. Bajo la premisa de prestar atención a los límites, tomar la iniciativa para asumir la responsabilidad, pensar de manera integral y tener más empatía, esta es una manifestación del aumento gradual de la capacidad y la responsabilidad.

7. La humildad, el respeto y la confianza son la base de un funcionamiento coordinado y una sana cooperación.

8. ¿Cuál debe ser la relación entre las personas de la organización? Algunas personas piensan que es la relación entre la gestión y ser gestionado, y algunas personas piensan que es una relación de cooperación. Y creo que la relación dentro de la organización es una relación de dedicación . No existe una relación organizacional sin una base de dedicación. Existe una relación de contribución mutua entre las personas de la organización, una relación de contribución mutua entre departamentos y una relación de contribución mutua entre superiores y subordinados.En tal relación de dedicación mutua, la organización realmente existirá y desempeñará su función.

El fenómeno básico producido por la relación de dedicación es: cada persona en el proceso está más preocupada por la contribución que puede hacer para el siguiente proceso; cada departamento está preocupado por cómo ajustarse para tener una interfaz armoniosa con otros departamentos; Prestando atención a la forma en que coopera puede brindar apoyo a sus superiores, y sus superiores le pedirán que resuelva problemas y brinde ayuda a sus subordinados.

La habilidad es importante, pero la dedicación es aún más importante.

9. Las personas excelentes tienen varias características: sensibles, intolerables y capaces de optimización manual.

10. El front-end se enfoca en la interacción humano-computadora y la experiencia del usuario, y el back-end se enfoca en la lógica comercial y el procesamiento de datos a gran escala. En teoría, en los productos orientados al usuario, todos los problemas (incluidos los problemas de producto, diseño, back-end e incluso invisibles) estarán expuestos al front-end, y solo algunos problemas (problemas de datos, problemas de cálculo, problemas de seguridad, etc.). .) Estar expuesto en la parte trasera significa que la parte delantera juega un papel vital en el transporte y la conexión .

11. La actualización de la tecnología front-end cambia cada día que pasa, la selección de tecnología del marco front-end surge en un flujo interminable, la tendencia de la estética visual cambia constantemente, el efecto de visualización es extremadamente bueno, el sistema operativo del usuario se refina gradualmente; en el agua; las actualizaciones y adaptaciones de dispositivos inteligentes son infinitas. Todo esto tiene un requisito para el campo de front-end y los estudiantes de front-end: tirar, amar tirar y tirar repetidamente.

Supongo que te gusta

Origin blog.csdn.net/weixin_47367099/article/details/125262681
Recomendado
Clasificación
Diario
Más
2024-05-02(0)
2024-05-01(4)
2024-04-30(33)
2024-04-29(5)
2024-04-28(9)
2024-04-27(28)
2024-04-26(22)
2024-04-25(34)
2024-04-24(31)
2024-04-23(29)

Code World

© 2018 codetd.com