-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4cc8a8b
commit 7dcbdf4
Showing
10 changed files
with
157 additions
and
206 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,66 +1,7 @@ | ||
| # Empezando con EsJS | ||
| <script setup> | ||
| import { useRouter } from 'vitepress' | ||
|
|
||
| ## Introducción | ||
| const router = useRouter() | ||
|
|
||
| EsJS es un lenguaje de programación con sintaxis en Español. EsJS compila a JavaScript, por lo que puedes utilizarlo en cualquier lugar donde se ejecute JavaScript. | ||
|
|
||
| Si quieres conocer más sobre el propósito de EsJS, puedes visitar la sección [¿Por qué usar EsJS?](./por-que-usar-esjs). | ||
|
|
||
| ## Prueba en línea | ||
|
|
||
| ¿Quieres probar EsJS sin tener que instalar nada en tu equipo? Puedes hacerlo en línea utilizando el [EsJS Editor](https://editor.esjs.dev/). | ||
|
|
||
| ## Ejemplos de EsJS | ||
|
|
||
| EsJS ofrece varias alternativas para desarrollar aplicaciones: | ||
|
|
||
| - [Modo Terminal](https://demo-esjs-terminal.vercel.app/): permite ejecutar código en el navegador web utilizando una terminal como interfaz para el usuario. De esta manera, puedes centrarte en la lógica de tu programa sin pensar en la interfaz gráfica. | ||
| - [EsVue](https://demo-esvue.vercel.app/): utiliza [Vue](https://vuejs.org/) para permitir escribir componentes de un único archivo [(Single File Components)](https://vuejs.org/api/sfc-spec.html#overview) con lógica escrita en EsJS. | ||
| - [Node.js / Express](https://demo-esjs-express.vercel.app/): permite desarrollar aplicaciones que se ejecutan del lado del servidor. | ||
|
|
||
| ## Creando un proyecto EsJS | ||
|
|
||
| La manera más fácil de crear un nuevo proyecto EsJS es utilizando una de las siguientes plantillas: | ||
|
|
||
| ### Modo Terminal: [crear-terminal-app](https://github.com/es-js/crear-terminal-app/) | ||
|
|
||
| Puedes generar un repositorio a partir de la plantilla [crear-terminal-app](https://github.com/es-js/crear-terminal-app/generate) en GitHub: | ||
| <a href="https://github.com/es-js/crear-terminal-app/generate"> | ||
| <img src="https://img.shields.io/badge/Utilizar%20esta-plantilla-blue?logo=github"> | ||
| </a> | ||
|
|
||
| Puedes crear un espacio de código en línea con todo lo necesario para ejecutar tu programa en [GitHub Codespaces](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=583951106): | ||
| [](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=583951106) | ||
|
|
||
| Puedes desplegar tu aplicación en Vercel en un par de clics! | ||
| [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fes-js%2Fcrear-terminal-app&project-name=mi-esjs-terminal-app&repository-name=mi-esjs-terminal-app&demo-title=EsJS%20Terminal%20App&demo-description=Aplicaci%C3%B3n%20Web%20escrita%20en%20EsJS&demo-url=https%3A%2F%2Fdemo-esjs-terminal.vercel.app%2F) | ||
|
|
||
| --- | ||
|
|
||
| ### EsVue: [crear-esvue-app](https://github.com/es-js/crear-esvue-app/) | ||
|
|
||
| Puedes generar un repositorio a partir de la plantilla [crear-esvue-app](https://github.com/es-js/crear-esvue-app/generate) en GitHub: | ||
| <a href="https://github.com/es-js/crear-esvue-app/generate"> | ||
| <img src="https://img.shields.io/badge/Utilizar%20esta-plantilla-blue?logo=github"> | ||
| </a> | ||
|
|
||
| Puedes crear un espacio de código en línea con todo lo necesario para ejecutar tu programa en [GitHub Codespaces](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=583951133): | ||
| [](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=583951133) | ||
|
|
||
| Puedes desplegar tu aplicación en Vercel en un par de clics! | ||
| [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fes-js%2Fcrear-esvue-app&project-name=mi-esvue-app&repository-name=mi-esvue-app&demo-title=Esvue%20App&demo-description=Aplicaci%C3%B3n%20Web%20escrita%20en%20EsVue&demo-url=https%3A%2F%2Fdemo-esvue.vercel.app%2F) | ||
|
|
||
| --- | ||
|
|
||
| ### Node.js / Express: [crear-express-app](https://github.com/es-js/crear-express-app/) | ||
|
|
||
| Puedes generar un repositorio a partir de la plantilla [crear-express-app](https://github.com/es-js/crear-express-app/generate) en GitHub: | ||
| <a href="https://github.com/es-js/crear-express-app/generate"> | ||
| <img src="https://img.shields.io/badge/Utilizar%20esta-plantilla-blue?logo=github"> | ||
| </a> | ||
|
|
||
| Puedes crear un espacio de código en línea con todo lo necesario para ejecutar tu programa en [GitHub Codespaces](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=584128802): | ||
| [](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=584128802) | ||
|
|
||
| Puedes desplegar tu aplicación en Vercel en un par de clics! | ||
| [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fes-js%2Fcrear-express-app&project-name=mi-esjs-express-app&repository-name=mi-esjs-express-app&demo-title=EsJS%20Express%20App&demo-description=Aplicaci%C3%B3n%20que%20se%20ejecuta%20del%20lado%20del%20Servidor%20escrita%20en%20EsJS&demo-url=https%3A%2F%2Fdemo-esjs-express.vercel.app%2F) | ||
| router.go('/primeros-pasos') | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,7 @@ | ||
| # Guía EsJS | ||
| <script setup> | ||
| import { useRouter } from 'vitepress' | ||
|
|
||
| Esta guía está basada en la [Guía de JavaScript](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/) de [MDN Web Docs](https://developer.mozilla.org/), convenientemente adaptada a EsJS. | ||
|
|
||
| Es importante entender que el código EsJS que escribimos es transpilado a JavaScript en el momento previo a ejecutarse. Por lo que, si bien escribimos código EsJS, en realidad se ejecuta código JavaScript. | ||
|
|
||
| De esta manera, esta guía enlazará algunos términos/conceptos a documentación que corresponde a JavaScript, pero que también aplican a EsJS, sólo que utilizando tokens en español. | ||
|
|
||
| La lista de tokens en español que emplea EsJS, y su equivalencia a JavaScript, puede consultarse en: | ||
|
|
||
| WIP | ||
| const router = useRouter() | ||
|
|
||
| router.go('/introduccion') | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,7 @@ | ||
| # ¿Por qué usar EsJS? | ||
| <script setup> | ||
| import { useRouter } from 'vitepress' | ||
|
|
||
| EsJS fue creado con la intención de facilitar a los hablantes de español el desarrollo de aplicaciones web al utilizar palabras del idioma español, pero con la misma capacidad de JavaScript. | ||
| const router = useRouter() | ||
|
|
||
| ## ¿Qué es EsJS? | ||
|
|
||
| EsJS es un lenguaje de programación que utiliza palabras del idioma español para escribir código. La gramática de EsJS es la misma que la de JavaScript, solo que utiliza tokens del idioma español. Al ejecutarse, el código transpilado de EsJS es equivalente al código JavaScript. | ||
|
|
||
| El siguiente código EsJS: | ||
|
|
||
| ```esjs | ||
| funcion iniciar() { | ||
| const fecha = crear Fecha() | ||
| consola.escribir("Hola Mundo!", fecha) | ||
| } | ||
| iniciar() | ||
| ``` | ||
|
|
||
| Produce el código JavaScript: | ||
|
|
||
| ```js | ||
| function iniciar() { | ||
| const fecha = new Date() | ||
| console.log("Hola Mundo!", fecha) | ||
| } | ||
|
|
||
| iniciar() | ||
| ``` | ||
|
|
||
| ## ¿Cómo funciona EsJS? | ||
|
|
||
| EsJS es un plugin de Babel. Analiza cada token del código de entrada y busca su equivalente en JavaScript. Este proceso ha sido altamente inspirado en el artículo ["Rebuilding Babel: The Tokenizer"](https://www.nan.fyi/tokenizer) de [Nanda Syahrasyad](https://www.nan.fyi/). | ||
|
|
||
| WIP | ||
|
|
||
| ## ¿Cuál es la diferencia entre EsJS y JavaScript? | ||
|
|
||
| EsJS es un lenguaje de programación que utiliza palabras del idioma español para escribir código. EsJS compila el código escrito en español a código JavaScript. | ||
|
|
||
| A su vez, JavaScript es un lenguaje de programación interpretado, que utiliza palabras del idioma inglés para escribir código. Es uno de los lenguajes de programación más utilizados en el mundo. | ||
|
|
||
| Por lo tanto, EsJS y JavaScript son lenguajes muy similares, y gracias a la utilización de plugins adecuados, EsJS puede hacer prácticamente lo mismo que JavaScript. De esta manera, EsJS es prácticamente igual a JavaScript en términos de funcionalidades y capacidades. | ||
|
|
||
|
|
||
| ## Alternativas | ||
|
|
||
| - [Lenguaje Latino](https://www.lenguajelatino.org/) | ||
| router.go('/introduccion') | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.