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="/sql-functions/">Funciones Sql</a> </li><li> <a href="/atoms-ions/">Átomos E Iones</a> </li><li> <a href="/net-framework/">.Net Framework</a> </li><li> <a href="/excel/">Sobresalir</a> </li><li> <a href="/rpa-tutorial/">Tutorial De Rpa</a> </li><li> <a href="/physical-quantities/">Cantidades Fisicas</a> </li><li> <a href="/binary-representation/">Representación Binaria</a> </li><li> <a href="/python-utility/">Utilidad-Python</a> </li><li> <a href="/r-dataframe-function/">Función R Dataframe</a> </li><li> <a href="/csharp-generic-hashset/">Csharp-Generic-Hashset</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">empresa hcl</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Empresa HCL con lista de empresas, empresa de TI, empresa multinacional, empresa de software, empresa Flipkart, empresa de Amazon, empresa Tata, empresa Tesla, empresa Samsung, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/hcl-company"> <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="/mark-zuckerberg">Mark Zuckerberg</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-color-does-blue">¿Qué color produce el azul y el verde cuando se mezclan?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/jsp-include-action-tag">jsp: incluir etiqueta de acción</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/flatten-list-python">Aplanar lista en Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-string-split-method">Método JavaScript String split()</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="/difference-between-fox">lobo o zorro</a>
</li><li><a href="/how-insert-watermark-word">marca de agua en word</a>
</li><li><a href="/mia-khalifa">edad de mia khalifa</a>
</li><li><a href="/binary-search-tree">ejemplo de árbol de búsqueda binaria</a>
</li><li><a href="/how-generate-random-number-java">número aleatorio gen java</a>
</li><li><a href="/difference-between-row">fila y columna</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="//pt.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>
</body>
</html>