# Campo de batalla. Entiende el ecosistema del desarrollo frontend y su nicho de trabajo

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Toda esta información tiene como base el siguiente enlace 👉🏼 <a target="_self" rel="noopener noreferrer nofollow" href="https://frontendmasters.com/guides/front-end-handbook/2024" style="pointer-events: none">Frontend Handbook 2024</a></div>
</div>

Un frontend dev usa principalmente tecnologías como HTML, CSS y JavaScript

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1754066796011/54dfbd95-4992-4ce1-b47a-7db65c373b20.jpeg align="center")

Según [MDN - Web technology for developers](https://developer.mozilla.org/en-US/docs/Web) si y no 😁

Es decir que también salen a la luz temas como accesibilidad, performance, privacidad y seguridad

También podemos ver conceptos como:

* Web Assembly
    
* Web APIs
    
* Media (técnicas para embeber contenido multimedia)
    
* SVG (que por si solo es un campo amplio)
    
* MathML (Maneja notación compleja en la Web)
    
* URI
    
* Web drivers (emula las acciones de una persona usando un navegador)
    
* Extensiones Web
    
* Web app manifests (instalación de aplicaciones Web bajo definiciones pre establecidas)
    
* Progressive Web Apps (PWA)
    
* Open Search (Define un sistema de búsqueda que el mismo navegador puede utilizar)
    
* XML
    
* XPath (Identifica diferentes puntos de un documento XML, HTML tambien entra 😊)
    

En sí, la forma más simple que un Frontend developer puede generar un resultado visible es con una página web escrita con solo HTML

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1754068631702/abe3e801-780a-44b2-9afc-0c4e3fa921c1.gif align="center")

# Que puede producir un Frontend dev?

En general tenemos 3 categorías

## Website

Es una colección páginas web interconectadas que va desde una Web simple a páginas web dinámicas mas complejas

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1754068849077/0b6b7508-991a-4a29-8f3a-dcfa8e097ae7.png align="center")

## Aplicaciones Web

Por ejemplo [open.spotify.com](https://open.spotify.com/)

Usualmente una Web app interactua constantemente con una base de datos para almacenar, recuperar y manipular data, como estan desplegados en una web no necesitan ser instalados y son mayormente considerados multi plataforma, mas allá de solo usar vanilla JavaScript (que es usar JavaScript puro) mayormente utilizan frameworks/librerías como React, Angular, Vue, Svelte, etc y etc.

Incluso mas allá utilizan algunas abstracciones un poco mas avanzadas como Next, Nuxt, SvelteKit y bueno, la lista sigue 🤓

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1754069059484/19a1786b-0dc2-469d-a921-dc877bdc0ec6.png align="center")

## Aplicaciones nativas a partir de tecnologías Web

Un excelente ejemplo es Discord que a través de Electron ha lanzado una app nativa para Windows, macOS, Linux, etc), esto se logra a través de una única base de código de tecnologías Web de la cual se derivan los productos nativos

Electron se usa para aplicaciones de escritorio y React Native para móviles (aunque existen alternativas como Capacitor)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1754069493531/e1a3b6ec-3a64-4899-935c-01fe51a96828.png align="center")

### Aplicaciones Web Progresivas (PWA)

Como bonus una PWA puede producir una aplicación instalable a partir de una base de código de tecnologías Web

# 🏃🏼‍♂️ Línea de carrera

Este handbook nos provee un excelente recurso escrito vía un repositorio público y creado/moderado por Sarah Drasner bajo el título de Senior Director of Engineering, Core Infrastructure at Google (humildemente 😁)

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Mira el recurso acá 👉🏼 <a target="_self" rel="noopener noreferrer nofollow" href="https://career-ladders.dev/engineering/" style="pointer-events: none">career-ladders.dev</a></div>
</div>

| Nivel | Descripción |
| --- | --- |
| Junior Engineer | Nivel inicial, enfocado en aprender, usualmente guiado por un Senior engineer |
| Engineer | Mid-level, con 2 a 5 años de experiencia, toma tareas mas esenciales y complejas para el producto |
| Senior Engineer | Tiene mas de 5 años de experiencia. Maneja tareas complejas y lidera equipos |
| Lead Engineer | Lidera equipos o proyectos, toma decisiones técnicas o de arquitectura |
| Staff Engineer | Experto técnico, trabaja en la arquitectura y diseño del producto |
| Principal Engineer | Altamente especializado. Tiene mas de una decada de experiencia. Tiene una influencia a nivel de compañía en el desarrollo de productos |
| Fellow / Distinguished Engineer | Toma o influencia en decisiones a nivel corporativo. Trabaja o diseña futuros proyectos |

También existe esta otra referencia que puedes encontrar en [levels.fyi](https://www.levels.fyi/?compare=Standard,Amazon,Facebook,Microsoft,Google&track=Software%20Engineer)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1754428151561/ca8705e6-1c2c-4573-b163-8ca3acdf7438.png align="center")

# 💪🏼 Desafíos a enfrentar

## La gran DIVISIÓN

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Link a la publicación <a target="_self" rel="noopener noreferrer nofollow" href="https://css-tricks.com/the-great-divide/" style="pointer-events: none">La gran división (inglés)</a></div>
</div>

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1754431221221/0aee9e1d-738c-4ca5-895b-9ef1e831141e.png align="center")

Esto viene de una publicación hecha por css-tricks.com en la que se menciona que el desarrollo Frontend llega a dividirse en 2 facciones

* Aquellos que solo ven JavaScript, centrados en los frameworks y programación para las aplicaciones Web
    
* Aquellos que se dedican a trabajar con HTML y CSS, especializados en patrones UI, experiencia de usuario, interacciones, accesibilidad, SEO
    

En 2025 podemos decir que el mercado laboral favorece a los frontend developers centrados en JavaScript, Terminal/CLI, Node.js, APIs, GIT, Testing, CI/CD, conceptos de programación, etc. Claro que esto es solo una reflexión y no califica cualitativamente cualquier elección

## Rotación tecnológica

Esto debido a la rápida evolución de tecnología, lo cual llega a ser desafiante y emocionante pero a la vez cansador

## Compatibilidad web

Hay que preocuparse por la consistencia a traves de diferentes plataformas web! (Navegadores, web views, Electron, etc)

## Desarrollo multiplataforma

El título habla por si solo, pero debes considerar teléfonos, tablets y equipos de escritorio ademas de su respectivo sistema operativo (Que de alguna manera es mitigado por ser tecnología Web)

## Desafíos

En general el Desarrollo Frontend ha ido perdiendo su esencia, que en un inicio era preocuparse mas por la interfaz del usuario y su experiencia, pasó a un tema de estudio para Ciencias de la Computación, las buenas prácticas, frameworks y etc llegaron a un punto de complejidad que necesita ser mitigado

Ademas un punto importante es que este [post de Christian Heilmann](https://www.linkedin.com/pulse/ongoing-defence-frontend-full-time-job-christian-heilmann-%3FtrackingId=VHhV08dKVjv7a9ga59Govw%253D%253D/?trackingId=VHhV08dKVjv7a9ga59Govw%3D%3D) explica como el nicho de un Frontend developer esta ahora en una constante disputa con una creciente demanda para un desarrollador Full Stack

Por si tienes curiosidad de saber quien es [Christian Heilmann](https://www.linkedin.com/in/christianheilmann/) 😁

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1754431278978/6b8af1ff-0faf-4869-aa8a-2c65e45a3414.png align="center")

# 📖 Versículo de despedida

<div data-node-type="callout">
<div data-node-type="callout-emoji">📖</div>
<div data-node-type="callout-text">!Que Dios reine con poder para siempre!. Amén. 1 Pedro 5:11</div>
</div>

# **Gracias por leer!**

🔗 Puedes seguirme en mis redes sociales!

[**Twitter**](https://twitter.com/KievAndresMRV) | [**LinkedIn**](https://www.linkedin.com/in/kievandres/) | [**Facebook**](https://www.facebook.com/profile.php?id=100090037513292) | [**Instagram**](https://www.instagram.com/kievandres/) | [**kievandres.dev**](https://www.kievandres.dev/)