En el desarrollo web, hay muchas herramientas disponibles para que los desarrolladores elijan. Elegir las herramientas y tecnologías adecuadas puede tener un impacto significativo en la eficiencia y funcionalidad de los proyectos. Una de las herramientas populares en el desarrollo web es EJS, que significa Embedded. javascript . EJS es un lenguaje de plantillas JavaScript simple que genera HTML con JavaScript simple. En este artículo, cubriremos qué es EJS, por qué es necesario, sus características, cómo instalarlo y brindaremos un ejemplo con resultados.
¿Qué es EJS?
EJS o JavaScript integrado es un motor de plantillas para JavaScript que se utiliza para el desarrollo web y que permite a los usuarios generar marcado HTML dinámico utilizando código JavaScript dentro de plantillas HTML. Está diseñado para simplificar el proceso de representación de contenido dinámico en aplicaciones web. Contiene una combinación de HTML y JavaScript que facilita la generación de contenido dinámico basado en datos de su aplicación.
Características de EJS
- Sintaxis sencilla: EJS ofrece una sintaxis sencilla que combina HTML y JavaScript, lo que facilita su aprendizaje y uso.
- Contenido dinámico: EJS permite la generación dinámica de contenido HTML y JavaScript dentro de etiquetas HTML, lo que mejora la flexibilidad en la creación de contenido.
- Diseño y Parciales: EJS admite diseños y parciales, lo que permite a los usuarios dividir las plantillas en componentes reutilizables, reduciendo la duplicación de código y mejorando la mantenibilidad.
- Manejo de errores: EJS proporciona mensajes de error que ayudan a los desarrolladores a depurar, mejorando la experiencia de desarrollo general.
¿Por qué necesita EJS?
- Generación HTML dinámica: EJS le permite generar contenido HTML dinámico basado en variables, condiciones, bucles y otra lógica de JavaScript. Esto es particularmente útil para representar datos dinámicos obtenidos de bases de datos o API.
- Reutilización del código: Al utilizar plantillas EJS, puede crear componentes o parciales reutilizables que se pueden incluir en varias páginas. Esto promueve la modularidad del código y reduce la duplicación en sus aplicaciones web.
- Representación del lado del servidor: Con EJS, puede realizar renderizado del lado del servidor (SSR) de páginas web. SSR es beneficioso para SEO (optimización de motores de búsqueda), ya que permite a los motores de búsqueda rastrear e indexar su contenido de manera más efectiva en comparación con la representación del lado del cliente (CSR) realizada por marcos como React o Angular.
- Fácil integración con Node.js y Express.js: EJS se integra perfectamente con Node.js y Express.js, lo que lo convierte en una opción popular para los desarrolladores que trabajan en aplicaciones JavaScript del lado del servidor. Es fácil de configurar y usar dentro de un proyecto Express.js.
- Sintaxis familiar: Si ya está familiarizado con HTML y JavaScript, aprender y utilizar EJS es sencillo. La sintaxis es similar a HTML con código JavaScript incrustado encerrado en
>etiquetas, haciéndolo accesible a desarrolladores de diferentes niveles de habilidad. - Herencia de plantillas y diseños: EJS admite diseños y herencia de plantillas, lo que le permite crear diseños consistentes para sus páginas web. Puede definir un diseño base y ampliarlo en otras plantillas, lo que facilita mantener una apariencia coherente en toda su aplicación.
¿Cómo utilizar EJS?
Paso 1: Instale EJS como una dependencia en su proyecto
npm install ejs>
Paso 2: Cree una carpeta de 'vistas' en el directorio de su proyecto si aún no existe. Dentro de la carpeta de vistas, cree un nuevo archivo con una extensión .ejs, por ejemplo, index.ejs.
Paso 3: Para integrar EJS con Express en una aplicación Express.js, configure EJS como motor de visualización en la configuración de su aplicación Express. Esta configuración permite a Express utilizar EJS para representar vistas.
app.set('view engine', 'ejs');>Etapa 4: Renderizar plantilla EJS. En sus controladores de ruta Express renderizamos la plantilla EJS usando 'res.render()' y proporcionar los datos necesarios para pasar a la plantilla.
res.render('hello', { name: 'Geeks' });>Estructura del proyecto:
Las dependencias actualizadas en paquete.json El archivo se verá así:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' }>Ejemplo: Implementación para mostrar el uso de ejs con un ejemplo.
HTML Título de ejemplo de EJS> encabezado> <body> <h1>Hola,<%= name %>!h1> cuerpo> html>></pre> </code>javascript<code class='hljs'> <pre class='hljs'>// index.js const express = require('express'); const app = express(); const port = 3000; app.set('view engine', 'ejs'); app.get('/', (req, res) =>{ res.render('hola', { nombre: 'Geeks' }); }); app.listen(port, () => { console.log(`El servidor se está ejecutando en http://localhost:${port}`); });></pre> </code> <p dir='ltr'> <b> <strong>Paso para ejecutar la aplicación:</strong> </b> <span>Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto</span></p> <pre class='hljs'>node index.js></pre><p dir='ltr'> <b> <strong>Producción:</strong> </b> <span>Su proyecto se mostrará en la URL http://localhost:3000/</span></p> <p dir='ltr'> <img src='//techcodeview.com/img/ejs-templating-language/39/what-is-ejs-why-do-i-need-it-2.webp' alt="producción"></p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Categoría</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/java-double/">Java-Doble</a> </li><li> <a href="/python-time-module/">Módulo De Tiempo De Python</a> </li><li> <a href="/tcs/">Tcs</a> </li><li> <a href="/python-csv/">Python-Csv</a> </li><li> <a href="/mysql-tutorial/">Tutorial De Mysql</a> </li><li> <a href="/java-abstract-class/">Clase E Interfaz Abstracta De Java</a> </li><li> <a href="/competitive-programming/">Programación competitiva</a> </li><li> <a href="/tally-tutorial/">Tutorial De Conteo</a> </li><li> <a href="/javascript/">Javascript</a> </li><li> <a href="/bash-tutorial/">Tutorial De Bash</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Memoria de sólo lectura (ROM)</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portal de informática para geeks. Contiene artículos de programación y ciencias de la computación bien escritos, bien pensados y bien explicados, cuestionarios y preguntas de práctica/programación competitiva/entrevistas de empresa.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/read-only-memory"> <i class="fa fa-external-link"></i> Leer Más</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Artículos De Interés</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-check-your-ubuntu-version">Cómo verificar su versión de Ubuntu: una guía</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-1-4-plus-1-4">¿Qué es 1/4 más 1/4?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/get-current-date-using-python">Obtener la fecha actual usando Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/algorithm-c-language">Algoritmo en lenguaje C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/arraylist-java">Lista de matrices en Java</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Entradas Populares</h2>
<div class="content">
<ul class="list"> <li><a href="/react-table">tabla de reacción</a>
</li><li><a href="/java-while-loop">java mientras condición</a>
</li><li><a href="/what-is-10-40">10 de 40</a>
</li><li><a href="/rajesh-khanna">rajesh khanna</a>
</li><li><a href="/sql-clauses">cláusulas sql</a>
</li><li><a href="/what-is-mouse">ratón y tipos de ratón</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Todos Los Derechos Reservados | <a href="//cs.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>