Repository navigation
Editor de codigo online - V0.10 #25
Description
Buenas!
Como habiamos hablado en la ultima JS101, hay muchos que vienen con pc's que no se puede instalar node por una u otra razon. Por eso, habia propuesto que estaria bueno hacer un editor de codigo online que corra en el browser.
Queria aprender a usar Vue + Quasar, asi que aca esta la primera version del mismo:
Repo:
https://github.com/ipsilondev/js101-editor
Demo:
http://js101.ipsilondev.com/#/
Caracteristicas principales:
- Esta echa en modo SPA
- Editor es codemirror, configurado para JS
- Todo es Vue + Quasar.
- Autosave de los archivos en local storage
- Exportacion de los archivos a zip
- Emulador de consola de parseo (ejecuta el codigo en
eval()estricto y soporta errores del tipoReferenceError,SyntaxError,TypeError - No hay limite de archivos ni de codigo a ejecutar (el unico limite serian los 5MB de local storage).
La testee bastante y creo que esta usable. Excepto un hack que tuve que realizar para poder capturar los SyntaxError de manera correcta, todo lo demas es standard. Si no me apego a alguna convencion de buenas practicas en Vue / Quasar, pido disculpas por adelantado, es la primera vez que hago algo con esto.
Estoy abierto a bugs report, y a cualquier sugerencia de como lo podemos mejorar para poder usarlo en las clases!
Gracias :D
Activity
nhsz commentedon Sep 11, 2018
Genial!
Pregunta, cuál sería la ventaja sobre usar Codepen o algo similar?
Entiendo que al principio se usaba algo del estilo, pero por temas de problemas de conexión que hubo en algún momento (usar un editor online asume que te anda bien el wifi), se pasó a Node para poder trabajar offline.
shadowofsoul commentedon Sep 11, 2018
Codepen, jsfiddle, etc.. no tienen una consola como la de nodejs, plus tiene html/css views y editores. Que no esta mal, pero creo que distraen al usuario del codigo simple que tiene que aprender y ejecutar.
Por otro lado, si tenes un algun tipo de error de sintaxis o tipo, si o si dependes de la consola, que puede estar llena de otros msg, que tambien confunde al usuario.
Todo el material esta basado en el uso de la consola. Especificamente para el curso, creo que les da un editor mas simple, con el mismo output que la consola de nodejs, que es lo que se ensenia en el material. Por otro lado, al ser SPA, aun teniendo problemas de conexion en algun momento, se podria levantar un servidor en lan para poder igualmente dar el curso, es aun mejor que tener que bajar binarios y editores para los 4 sistemas operativos que por lo menos yo vi en las 3 ediciones que fui de mentor. Hasta puede crearse una electron app y pasarla por usb (quasar viene listo para eso).
Tambien podemos agregar tips o parte del material de alguna manera a la UI (por ahi en la left sidebar o armar una right sidebar que cargue directamente el contenido), para mejorar el focus y el aprendizaje.
Esas son mis principales razones para hacer esto :)