Guía de introducción para ingenieros de front-end web: le enseñará cómo convertirse en un ingeniero de desarrollo de front-end web
La mayoría de los desarrolladores web han pasado por todas las etapas anteriores y pueden sentirse frustrados con algunas de ellas al principio, pero luego, cuando ven su sitio web funcionando y personas de todo el mundo usándolo, la sensación general fue realmente emocionante y sorprendente. Los desarrolladores web son responsables de mucho trabajo, desde recopilar los requisitos hasta diseñar el sitio web y manejar las partes de back-end del sitio web para que sirva con éxito a los usuarios. Cada año surgen nuevas tecnologías y herramientas en la industria para mejorar la eficiencia de los desarrolladores y proporcionar a los usuarios mejores sitios web. Para ellos, mantenerse a la vanguardia del desarrollo web es cada vez más desafiante. Hoy discutiremos el mapa completo para convertirse en desarrollador web en 2020. Esta será una guía práctica para todos los desarrolladores (front-end, back-end y full stack).
1. Primero determina tu objetivo o camino.
Discutiremos muchas tecnologías, tendencias y herramientas, pero no queremos que te sientas abrumado, por lo que primero debes decidir qué quieres hacer para convertirte en desarrollador web, ya que esto te ayudará a elegir la opción adecuada. una herramienta. y habilidades de estudio. Hay muchas razones para convertirse en desarrollador web. Aquí tienes algunos factores de selección:
Quieres hacer desarrollo web en una empresa, este es el motivo más común.
Quieres iniciar tu propio negocio o agencia como desarrollador independiente.
Puede ser consultor de otras empresas.
Puedes crear tus propias aplicaciones para ganar dinero.
Codificar es tu hobby.
A partir de las áreas u objetivos de interés anteriores, puede elegir las herramientas y tecnologías adecuadas que se adapten a sus objetivos. Si su objetivo es convertirse en desarrollador front-end, puede elegir herramientas y tecnologías de desarrollo front-end. Lo mismo ocurre con el desarrollo backend y full-stack.
2. Herramientas y software básicos para el desarrollo web.
Ordenador y sistema operativo: Sin un ordenador y un sistema operativo no se puede escribir código. Para aprender desarrollo web no necesitas una computadora de alta gama (sería mejor si tuvieras una). Puede utilizar cualquier tipo de computadora portátil o de escritorio de tamaño mediano. En cuanto al sistema operativo, puedes utilizar MacOS, Windows (la última versión) o Linux que más te convenga.
Editor de texto/
IDE: No hay duda de que VSCode es adecuado para la mayoría de situaciones y la mayoría de idiomas. Tiene buen rendimiento, buena escalabilidad, capacidades de terminal integradas y toneladas de funciones. En la encuesta StackOverFlow de 2019, VSCode también fue la primera opción entre los desarrolladores. También hay otras buenas opciones disponibles, como Sublime.
Texto o átomo. Si hablamos de IDE, es visualización.
Studio (# o C#), Eclipse y Netbeans (Java). es una buena elección.
Navegador web: Chrome o Firefox son la primera opción para la mayoría de los desarrolladores. Chrome es rápido y utiliza el motor V8 (motor JavaScript). Firefox también ha hecho grandes progresos y hay algunas cosas buenas que el navegador Chrome no tiene. Ambos navegadores tienen excelentes herramientas de desarrollo para solucionar problemas de desarrollo web.
Terminal: utilizará algunos comandos del sistema para realizar mucho trabajo en la CLI. Puede utilizar terminales predeterminados o de terceros para sus proyectos de desarrollo web. Bash, Zsh, Powershell, Git
Bash, iTerm e Hyper son todas opciones disponibles.
Diseño (opcional): No todo el mundo necesita aprender. En una empresa hay equipos dedicados a crear imágenes, logotipos o bocetos, pero si eres autónomo, quizás quieras aprender Adobe.
XD, Photoshop, Sketch o Figma.
3. Comience con HTML y CSS.
HTML y CSS son los componentes básicos del desarrollo web. No importa qué tan avanzada sea su aplicación web, y no importa qué marco y lenguaje de back-end utilice, debe usar HTML y CSS para crear la aplicación de front-end. Por tanto, esto es lo primero que hay que aprender en el desarrollo web.
Html 5 (elementos semánticos, atributos, tipos de documentos, etc.)
Conocimientos básicos de CSS color, fuente, posición, modelo de caja, etc.
CSSGrid y Flexbox alinean contenido o crean columnas.
Propiedades personalizadas de CSS
4. Diseño responsivo
Su aplicación debe poder verse y utilizarse en todo tipo de dispositivos (por ejemplo, teléfonos inteligentes, tabletas, computadoras de escritorio, iPad o cualquier otro dispositivo de tamaño de pantalla). Por lo tanto, es importante saber cómo crear un diseño o maquetación responsiva. Echemos un vistazo a algunos temas importantes.
Aprende cómo configurar la ventana gráfica.
Los medios preguntaron sobre los diferentes tamaños de pantalla.
Ancho del fluido
Unidades Rem
Prioridad de movimiento
5. Componentes CSS reutilizables personalizados
En lugar de confiar En un marco CSS grande (como Bootstrap), es mejor crear sus propios componentes CSS modulares reutilizables para usar en sus proyectos. Si crea su propio diseño personalizado, no necesita importar la biblioteca completa. Crea un componente que solo requiere una interfaz de usuario específica. Recientemente, también han surgido nuevas tendencias en CSS que ayudan a escribir códigos CSS de manera más eficiente. Si ya conoce CSS, no necesita esforzarse mucho en aprender Saas. Saas es un preprocesador de CSS que puede agregar más funciones al CSS estándar y hacerlo más eficiente. Puede utilizar variables, anidamiento y declaraciones condicionales para reducir la duplicación de CSS y mejorar la eficiencia. También puede crear un archivo Saas independiente para cada componente reutilizable. Sass realmente ahorra tiempo y definitivamente debes aprenderlo en 2020.
6. Marco CSS
Aprender el marco CSS no es tan popular como el año pasado, pero sigue siendo muy relevante o útil para los desarrolladores que no son buenos en diseño. Hay muchos marcos CSS populares disponibles, algunos de ellos son los siguientes.
Bootstrap es el framework CSS más popular. Las guías de estudio también son útiles para aprender otros marcos.
Tailwind
CSS es otro marco popular que es casi igual que otros marcos. Es un conjunto de clases de utilidad para que puedas crear tus propios botones y otras cosas que se ven diferentes de otros botones. También son altamente personalizables.
Concrete
Bulma
7. Lenguaje front-end: JavaScript
Después de aprender HTML y CSS, lo siguiente que hay que aprender es vainilla.
Javascript. Para los desarrolladores, es muy importante dominar los conocimientos básicos de javascript. Utilizarás mucho JavaScript en lenguajes del lado del servidor como PHP, Python o #, y realmente necesitas aprender este lenguaje si quieres usarlo con React, Angular, NodeJS, Vue o cualquier otro marco o biblioteca de JavaScript. . Aquí hay algunos temas importantes que debes cubrir en JavaScript
Conceptos básicos de JavaScript (variables, tipos de datos, funciones, condicionales, etc.)
Modelo de objetos de documento
JSON (Representación de objetos JavaScript)
Extraer API (solicitud/respuesta/Ajax)
Si desea cambiar a React, Vue, Angular u otros marcos, los conceptos del JS moderno (ES6 ) son muy importantes El aprendizaje es importante.
8. Algunas herramientas importantes
Algunas herramientas se utilizarán para el desarrollo web. Estas herramientas lo ayudarán a depurar, aumentar la productividad, administrar código, colaborar con otros desarrolladores y más. Analicemos algunas de estas herramientas.
Git (control de versiones) y Github son las herramientas más populares que definitivamente aprenderás en 2020. Git es muy útil para colaborar con otros desarrolladores y administrar código.
También puedes elegir otras opciones como GitLab, Bitbucket, etc.
Aprenda a utilizar las herramientas de desarrollo del navegador. Ya sea Chrome o Firefox, debes saber utilizar diferentes pestañas, como pestañas de elementos, consolas de JavaScript, pestañas web de solicitud y respuesta, pestañas de aplicaciones y otras pestañas para diferentes propósitos.
La mayoría de los IDE o editores de texto tienen la capacidad de agregar extensiones o complementos, que son muy útiles para mejorar la productividad y crear aplicaciones web. Por ejemplo, la extensión VSCode en Visual Studio Code puede ayudar a descargar extensiones como un servidor en vivo o un compilador saas en vivo para usar con React.
Emmet es otra gran herramienta que te permite escribir HTML y CSS muy rápido, lo que ayuda a aumentar la productividad del desarrollador.
Aprende a utilizar gestores de paquetes JavaScript, como NPM y Yarn. Si está utilizando un marco o biblioteca de Javascript (como React), estos administradores de paquetes se usarán mucho, pero para otros lenguajes (como Python o Php), usará diferentes administradores de paquetes.
Si desea instalar paquetes NPM en el front-end, debe usar Webpack o paquete. Si desea crear su propio módulo u obtener un archivo javascript en otro archivo javascript, no puede simplemente usar el navegador para hacerlo de forma predeterminada, debe usar Webpack o paquetes.
9. Implementación básica
En este punto, una vez que sabes qué herramientas o tecnologías debes aprender para el desarrollo front-end, necesitas saber cómo implementar un sitio web front-end. En Internet. Si está creando una pequeña aplicación, una página de destino o un sitio web personal para una pequeña empresa, no necesita aprender AWS o DevOps solo porque son nuevos y están de moda. Harás las cosas más complicadas que simples. Hay algunas herramientas de implementación y pasos que aprender en 2020.
Registro de nombres de dominio (Namecheap, Google, etc.)
Hosting (InMotion, Hostgator, Bluehost, etc.)
Hosting estático (Netlify, páginas Github )
p>
Certificado SSL.
FTP, SFTP (Protocolo de transferencia de archivos) son muy adecuados para aplicaciones pequeñas.
SSH (Secure Shell) se utiliza para aplicaciones avanzadas.
CLI y Git.
Cualquier herramienta, tendencia tecnológica o paso que hayamos comentado hasta ahora forma parte del desarrollo front-end. Aún no conoce los marcos, pero puede crear sitios web para individuos y pequeñas empresas, y también puede crear diseños aptos para dispositivos móviles. También puede implementar pequeñas aplicaciones o proyectos utilizando las herramientas o técnicas analizadas hasta ahora. Si quieres encontrar trabajo, sería fantástico aprender algunos frameworks front-end (como React, Vue o Angular).
10. Marco front-end y gestión del estado
Este marco le permite realizar un desarrollo front-end más avanzado. Los marcos le brindan muchas ventajas, como componentes reutilizables, interfaz de usuario o interacciones de páginas más organizadas. Esto favorece más la colaboración y ayuda a escribir código limpio. Además, aprenda sobre la gestión estatal. Cada marco tiene un enfoque diferente. A continuación se muestran algunos marcos populares y administradores estatales en 2020.
react: la biblioteca reaccionar es la forma más popular de aprender desarrollo web y es bastante fácil en comparación con otros frameworks y bibliotecas. Los desarrolladores de React todavía tienen mucho trabajo por hacer. Puedes usar Redux y
ContextAPI con ganchos para la gestión del estado.
Vue:
Vue se está volviendo cada vez más popular y los desarrolladores prefieren aprender Vue. Comparado con React y Angular, Vue es el más fácil de aprender. VueX es un administrador de estado creado para vistas.
Angular: Este framework se suele utilizar en grandes organizaciones. Tiene una curva de aprendizaje bastante pronunciada. Aprender desde un ángulo
TypeScript también es muy bueno. Le permite utilizar escritura estática opcional y admite funciones de ES2015.
NGRX y los servicios son buenos administradores estatales para aprender este marco.
Aprendizaje opcional:
Si conoce uno de estos tres marcos, también puede utilizar Svelte, un compilador de JavaScript que le permite generar código JS puro y sin formato y le ayuda a crear un interfaz de usuario fácilmente.
Más información sobre el renderizado del lado del servidor. NextJS (React) y NuxtJS (Vue) son marcos que le permiten ejecutar React y Vue en el servidor. Ambos tienen excelentes características como mejor SEO, enrutamiento del sistema de archivos, división automática de código, exportaciones estáticas, CSS en JS y muchas más.
Generadores de sitios web estáticos: Gatsby (reactivo) y Gridsome (Vue)
Hemos analizado todas las herramientas y tecnologías de desarrollo front-end. Ahora analicemos los lenguajes y tecnologías para convertirse en un desarrollador backend o un desarrollador full stack.
11. Idioma del lado del servidor (elige uno)
Debes conocer al menos un idioma del lado del servidor. Para elegir un idioma en 2020, aquí tienes algunas opciones. ...
NodeJS (no es un lenguaje, sino un entorno de ejecución)
Python (ideal para principiantes)
Java (ideal para grandes organizaciones)
Php (apto para autónomos)
Ruby (menos de dos polos en 2020)
C#
Go
Nota: No importa qué idioma del lado del servidor prefiera aprender, asegúrese de conocer las estructuras de datos y los algoritmos utilizados en ese idioma. Las estructuras de datos y los algoritmos lo ayudarán a presentar datos a los usuarios y a optimizar el código en su aplicación web. Recomendamos especialmente centrarse en matrices y cadenas (lo más importante). Utilizará ambos métodos.
12. Marco del lado del servidor (elija uno)
Una vez que aprenda el lenguaje del lado del servidor de su elección, podrá utilizar uno de los marcos de lenguaje. Puede elegir una de las opciones que se indican a continuación. ...
Node.js_Express, Koa, Adonis, Feather.js, Nest.js
Django, Flask,
Java: SpringMVC, Grails
PHP: Laravel, Symfony, Codeignitor, Slim
Ruby: Ruby on Rails en Sinatra
C#: ASP. NETMVC
Ir a: Carnival
13. Base de datos (elija una)
La mayoría de las aplicaciones web requieren un lugar para almacenar datos. En algunos casos, determinadas bases de datos pueden utilizar determinadas tecnologías o lenguajes. Por ejemplo, en la pila Mern, m significa MongoDB y en la pila LAMP, m significa MySQL, pero todo depende de qué base de datos desee elegir para su aplicación. Discutiremos algunas bases de datos populares en 2020.
Base de datos relacional: RDBMS sigue siendo la base de datos más popular. Mis favoritos son PostgreSQL, MySQL y MSSQL.
NoSQL: MongoDB, RethinkDB, CouchDB
Base de datos en la nube: Firebase, AzureCouldDB, AWS.
Ligero y con almacenamiento en caché: Redis, SQLlite, NeDB
Cuando aprendas sobre bases de datos, también aprenderás SQL (Structured Query Language), ORM (Object Relational Mapper) o RDBMS ODM (Object Data). Mapeador). GraphQL
(Opcional) Puede obtener información sobre el popular GraphQL. Este es el lenguaje de consulta para la API. Tiene una sintaxis simple similar a JSON y es fácil de implementar.
14. CMS: Gestión de contenidos
Definitivamente debes conocer los sistemas de gestión de contenidos, especialmente si eres autónomo. CMS se utiliza para agregar contenido a su sitio web o aplicación. Los clientes pueden actualizar su propio contenido, lo cual es genial.
CMS tradicionales: WordPress (PHP), Drupal (PHP), Keystone (Javascript), Enduro (Javascript).
Otros CMS: DEDECMS, Empire CMS, PHPcms, Prismic.io, Strati.
15. Implementación y DevOps
Alojar una aplicación back-end o full-stack es más complejo que simplemente alojar una aplicación front-end, especialmente si tiene una base de datos. Asegúrese de saber cómo realizar la implementación mediante la CLI. Aprenda lo siguiente sobre la implementación de aplicaciones.
En la mayoría de empresas existen diferentes equipos trabajando en DevOps. Por tanto, comprender DevOps es completamente opcional. Puedes aprender esto si estás trabajando en tu propio proyecto.
SSH (Secure Shell)
Entorno de servidor web: NGINX, Apache
Hospedaje de aplicaciones: Linode, Heroku, AWS, Azure, Now.
Virtualización: Docker, Vagrant
Pruebas: unitarias, funcionales, de integración, etc.
Balanceo de carga, monitorización y seguridad.
Todas las herramientas técnicas anteriores son suficientes para convertirte en un desarrollador front-end, back-end o full-stack. Elija las herramientas y técnicas adecuadas según su objetivo final.
Lo anterior es la guía introductoria para ingenieros de front-end web que el editor compartirá con usted hoy: un artículo que le enseña cómo convertirse en un ingeniero de desarrollo de front-end web. Espero que este artículo pueda ser útil para los socios que participan en el trabajo de front-end web y para aquellos que están aprendiendo conocimientos sobre front-end web. Si desea obtener más información sobre el front-end web, recuerde prestar atención al sitio web oficial, Beida Jade Bird Web Training. Finalmente, les deseo a mis amigos todo lo mejor en su trabajo y que se conviertan en un excelente ingeniero de desarrollo web front-end.
Inglés #/cómo-ser-una-guía-completa/traducción | desarrollo web front-end (ID: web_qdkf)