codeframe
1.0.0
CodeFrame es la forma más rápida y fácil de construir e implementar páginas web estáticas rápidas, y está diseñado para ser el mejor lugar para aprender cómo crear cosas para la web, en la web. Puede encontrarlo ejecutando en vivo en CodeFrame.co.
Es fácil de usar. CodeFrame se crea en primer lugar para experimentos rápidos y para las personas que aprenden a codificar por primera vez, por lo que evita la complejidad y las características adicionales para simplificar y facilidad de uso.
Es rápido. Su entorno de desarrollo debe moverse a la velocidad de sus ideas, y sin herramientas de compilación, no hay razón para que CodeFrame no pueda ser instantáneo. Creé CodeFrame para reducir el tiempo de la idea al prototipo compartible tanto como sea físicamente posible. Simplemente abra el editor, escriba el código y comparta en un solo clic.
? Es de código abierto y totalmente inspeccionable. Todo lo que ejecuta CodeFrame, desde la pila de backend hasta el código JavaScript detrás del editor CodeFrame, es de código abierto e inspeccionable en el navegador. Creo que tener un código fuente legible en el producto entregado marca la diferencia para las personas que aprenden a codificar, y CodeFrame prioriza esto sobre complejidad adicional y pequeñas ganancias de eficiencia con paquetes minificados y fuente patentada.
Si no necesita específicamente algo diseñado para la velocidad o para los estudiantes nuevos en la codificación, hay otras herramientas que podrían funcionar mejor para usted, con más características. CodePen es el IDE web clásico en el navegador con características más potentes y opciones de personalización; Codesandbox es increíble para experimentar con proyectos con pasos de compilación / agrupación, y Repl.it tiene un increíble conjunto de herramientas de desarrollo para su entorno HTML, incluida la capacidad de crear archivos / carpetas y multijugador adicionales, lo que permite una colaboración suave en tiempo real.
Todo lo que necesita para ejecutar su propia versión de CodeFrame está en este repositorio de código abierto. Así es como puede ejecutar su propia versión en CodeFrame en su computadora o servidor.
Necesitarás estas herramientas:
git , para copiar el repositorio de GitHub a su computadora. Obtén Git aquí.npm (o su yarn alternativo) para instalar dependencias como Express. NPM típicamente viene con Node.js.ls , cd , etc.Una vez que tenga estas herramientas instaladas y listas, el primer paso es clonar este repositorio de Git a su computadora. Vaya a un directorio donde le gustaría configurar CodeFrame y ejecutar
$ git clone https://github.com/thesephist/codeframe.git (Si tiene SSH configurado para GIT y sabe cómo usarlo, puede usar el git:// URL. Si no lo hace, no se preocupe por eso).
Ahora, cd en el nuevo git de directorio codeframe acaba de crear, y debería ver todos los archivos en el repositorio de CodeFrame.
$ cd codeframe/
$ ls
src/ static/ docs/ README.md LICENSE ... Aquí, intentemos iniciar CodeFrame con Node.js usando el comando npm start .
$ npm start
...
Error: Cannot find module ' express '
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
... Esto significa que Node.js no pudo encontrar express , una biblioteca de JavaScript para crear servidores web de los que depende de CodeFrame. Instalemos dependencias como Express ejecutando npm install , luego intente nuevamente.
$ npm install
...
$ npm start
Codeframe running on localhost:4556 Puede notar que NPM crea un nuevo directorio llamado node_modules/ , donde instalará las dependencias de CodeFrame.
Si ve el Codeframe running on localhost:4556 , esto significa que tiene CodeFrame en funcionamiento en su computadora. Vaya a su navegador y abra la dirección http://localhost:4556 . Esto debe decirle a su navegador que encuentre la página que se ejecuta en el puerto 4556 (el puerto predeterminado de CodeFrame) en su computadora y cargue la página principal de CodeFrame.
Después de cambiar cualquier archivo de servicio de backend (en src/ ), puede reiniciar el servidor con npm start (CTRL + C para finalizar un servidor en ejecución) para ver que los cambios tienen lugar. Si está editando el código frontend, no hay necesidad de reiniciar, ¡solo vuelva a cargar la página en el navegador!
Si tiene curiosidad sobre el trabajo interno de CodeFrame, estoy construyendo una versión totalmente anotada de la base de código disponible aquí en las páginas GitHub utilizando una herramienta llamada Litterate. Si bien ese es un buen lugar para ver cómo se implementa todo, esta sección proporciona una descripción general de alto nivel de cómo está diseñado el sistema.
Todos los marcos de código son (por ahora) un par de archivos, un archivo HTML y un archivo JavaScript, que podemos tratar como trozos de texto. CodeFrame almacena todos los archivos, tanto HTML como JavaScript, en el mismo lugar, de la misma manera, de una manera que no se puede modificar una vez que se guardan. Esta es la base de datos inmutable basada en hash de Codeframe.
Cuando un usuario crea un nuevo archivo o una nueva versión de un archivo, el editor envía el archivo al backend. El backend obtiene el archivo y lo hashes (actualmente usando SHA256) y usa el hash para crear un nombre de archivo corto y prácticamente único para el archivo. El archivo se guarda en una ubicación en el backend ( db/ por defecto) con ese nombre de archivo hash. Esto asegura que, si intentamos guardar el mismo archivo varias veces, solo guardaríamos un archivo en el backend. Debido a que esto sucede mucho en la práctica usando CodeFrame, esto es eficiente.
Cada archivo es identificado por su hash de esta manera, por lo que al usar dos hash (uno para los archivos HTML y JavaScript de un CodeFrame), podemos definir cualquier código único. Así es como funciona CodeFrame; La URL de cada CodeFrame contiene dos hashes, uno para HTML y JavaScript. Cuando solicita un CodeFrame, el backend encuentra archivos guardados antes de usar esos hashs como nombres de archivo, y devuelve los archivos al editor o al navegador para su visualización.
Esta base de datos basada en hash de archivos tiene algunas ventajas. El hecho de que cada archivo se guarde una vez y nunca sobrescrito significa que cualquier CodeFrame, en cualquier momento, se caracteriza por completo por su URL. Su ChangeLog es efectivamente el historial de su navegador, y cualquier CodeFrame que comparta permanecerá exactamente esa versión para siempre. Esto también significa que el servicio de backend sigue siendo extremadamente simple: es un diseño completamente funcional sin efectos secundarios fuera de la base de datos, que es una tienda inmutable de valor clave.
La implementación actualmente, que se basa en el sistema de archivos, también se queda corto en algunas áreas. Principalmente, utiliza el FS como la capa de almacenamiento de la base de datos. Dado que los sistemas de archivos no están diseñados para usarse de esta manera, en grandes números podemos alcanzar un cuello de botella de escalabilidad donde tendremos que cambiar a una tienda de valor clave diferente como el S3 de Amazon. Actualmente también almacenamos cambios incrementales en cada archivo en un archivo completamente separado en la base de datos. Esta es también la forma en que GIT maneja los cambios, pero con el uso de CodeFrame, esto puede resultar ineficiente enormemente. Estos problemas de arne en este momento, pero pueden volverse más importantes en el futuro, momento en el que nos abordaremos.
La interfaz de usuario frontend de CodeFrame se crea como un único componente de Torus, que es el editor de CodeFrame. Este editor puede ejecutar independientemente, como lo hace en la vista del editor de pantalla completa de cualquier CodeFrame, o puede integrarse como <iframe> en ciertos sitios web permitidos, como está en la página principal. Todo lo demás que ves en la interfaz, incluido el resto de la página de inicio, es HTML, CSS y JavaScript simple y escrito a mano.
Elegí Toro para construir el frontend porque (1) escribí la biblioteca, así que lo sé de adentro hacia afuera y está diseñado para adaptarse a mis gustos, (2) es rápido y liviano, al igual que CodeFrame está diseñado para ser, y (3) hace que la prototipos sea muy, muy rápido; El V1.0 de CodeFrame se construyó en 20 horas durante 2 días, por lo que la creación rápida de prototipos fue una prioridad, mientras que cosas como el apoyo para los navegadores más antiguos no era un objetivo central. También fue una buena oportunidad para dejar que Toro estirara las piernas y las pruebara en un entorno de producción.
Todo el editor se implementa en un solo archivo de JavaScript, en static/js/main.js , que puede leer aquí.
Para el editor de texto Inside CodeFrame, en los navegadores de escritorio, estoy usando Monaco, un editor de texto creado para el navegador del editor de código Visual Studio de Microsoft. Es rápido, elegante y funciona muy bien en los navegadores de escritorio. Sin embargo, falta el soporte móvil de Mónaco, por lo que en los navegadores móviles, enviamos un editor diferente, CodeMirror. CodeMirror se usa ampliamente en Chrome Devtools y Glitch, entre otras herramientas, es liviano y rápido de cargar, y mucho más utilizable en los navegadores móviles que Mónaco. Las experiencias de usar ambos editores están casi paridad para la experiencia básica, mientras que cada editor trae algunas mejoras de características más pequeñas sobre la otra. Puede leer sobre cómo logramos esta arquitectura conectable en la sección "Backend del editor conectable" a continuación.
El panel de vista previa en el editor es un simple <iframe> que abre una vista de la página HTML + JS generada para el CodeFrame, por lo que puede verlo a medida que se actualiza en vivo. Hoy, opera completamente independientemente del editor, pero en el futuro podemos agregar algo de comunicación entre los dos para hacer posibles las funciones más elegantes, como las actualizaciones en vivo.
El editor de CodeFrame solo tiene una sola dependencia del núcleo: Torus, que es un marco de interfaz de usuario ligero. Para la velocidad de desarrollo, CodeFrame actualmente envía la dependencia como una etiqueta <script> simple en el editor HTML que apunta a la versión más reciente del paquete NPM en UNPKG. En el futuro, podemos agrupar torus con una versión compilada de nuestro script editor. Pero hasta ahora, UNPKG ha demostrado ser lo suficientemente confiable.
La porción del editor de código de CodeFrame no está contenida en esta base de código. Aunque hay una implementación de referencia de un editor muy desnudo aquí implementado como A <textarea> , en la producción, como se explicó anteriormente, CodeFrame usa Monaco o CodeMirror como el editor de código de elección, dependiendo del cliente (navegadores de escritorio móviles versuses de escritorio). Podemos cambiar de manera fácil y confiable entre estos tres editores y otros potenciales en el futuro porque el CodeFrame Frontend interfaces con el editor a través de un pequeño conjunto de API que se pueden implementar en torno a cualquier editor de código razonable. Llamamos a este conjunto de API la interfaz EditorCore .
CodeFrame se envía con envoltorios EditorCore para Mónaco y CodeMirror, y elige cargar uno u otro en tiempo de ejecución dependiendo del cliente (si no estamos usando un editor, ninguna parte del código de ese editor se carga en el navegador). Si tuviéramos que cambiar a un editor de backend diferente o intercambiar un editor con otro en el futuro, esta arquitectura de envoltura con una pequeña superficie de API lo hace muy fácil, unas pocas horas como máximo para envolver la interfaz alrededor de un nuevo editor. Mientras el contenedor del editor implementa la interfaz correctamente, el editor funcionará con REST of CodeFrame.
CodeFrame es de código abierto por dos razones.
Hasta el segundo punto, hay muchas esquinas de CodeFrame que son ásperas y pueden usar algo de esmalte. Si eres un desarrollador de JavaScript experimentado y quieres ver a CodeFrame mejorar, mis DM y las relaciones públicas están abiertas.
Pero lo más importante, hice un código abierto CodeFrame con la intención de que los recién llegados a la programación web pudieran aprender de leer la fuente de CodeFrame. Si se encuentra con un poco de código en el repositorio que lo confunde, no dude en presentar un problema o agregar una solicitud de extracción de mejores explicaciones, aclaraciones o mejor código.
Una parte clave de CodeFrame es su biblioteca de plantillas de inicio amigables. Es un conjunto pequeño por ahora, pero quiero convertir esto en un repositorio de marcos de código de muestra de alta calidad que permiten a las personas entrar y aprender sobre nuevas tecnologías web fácilmente.
Si tiene CodeFrames o muestras que desea incluir en la página principal de CodeFrame como otra plantilla de inicio, agregue un archivo en starter_fixtures/ y dentro de const STARTER_FIXTURES en src/models.js , ¡y presente una solicitud de extracción! Las plantillas de inicio configuradas de esta manera se configuran en la base de datos en el momento de la implementación, asegurando que cada versión en ejecución de CodeFrame lo tenga configurado.
Una de las características clave del editor CodeFrame es su característica "Recargar como escribe". Es decir, en el modo predeterminado (con la función habilitada), el editor recargará periódicamente el panel de vista previa con el código del editor, a veces en el medio de la escritura. Esto generalmente es una experiencia de edición superior: sin cambiar lo que estamos haciendo, podemos ver el resultado de nuestro código inmediatamente a medida que editamos, y ese bucle de retroalimentación ajustado es excelente para el desarrollo.
Sin embargo, en ciertos casos, especialmente cuando se escribe JavaScript, esto significa que la vista previa se vuelve a cargar en el medio de la escritura, cuando estamos escribiendo JavaScript potencialmente inválido o con errores. Uno de esos comportamientos con errores que podríamos recargar inadvertidamente en el panel de vista previa es un bucle infinito. En ciertos contextos, por ejemplo, cuando estamos escribiendo for(){} y while(){} bucles, podemos crear un bucle infinito en el medio de escribir nuestro programa que se vuelve a cargar en nuestra ventana de vista previa, que por diseño muele toda la pestaña del editor a un alto y da como resultado una posible pérdida de datos en las ediciones realizadas en el editor.
CodeFrame no es el primer editor en encontrarse con esto, y CodePen.io tiene un enfoque interesante para instrumentar a JavaScript en un entorno de recuperación en vivo para evitar este comportamiento. El problema es desafiante porque prevenir infinitos bucles en el caso general es imposible: es una variante clásica del problema de detención. En el caso de CodePen, instrumentan el código JavaScript generado, de modo que cuando el mismo bucle se ejecuta continuamente durante más de un período de tiempo o iteraciones, detiene el bucle. Es una solución pragmática, aunque poco elegante. Glitch, por el contrario, no hace nada para prevenir infinitos bucles en entornos de recarga en vivo.
Descubrí que, en la práctica, es bastante raro escribir accidentalmente el código JavaScript de sintaxis que también resulta en bucles infinitos. Y para esos casos raros, CodeFrame tiene la opción de deshabilitar la recarga de tipo de tipo en el editor. Pero de forma predeterminada, CodeFrame sigue la precedencia de Glitch al no modificar o instrumentar JavaScript para evitar la ejecución infinita. Si nos encontramos con más casos de uso en los que esto se convierta en un problema, podemos volver a visitar este problema.
Un efecto secundario ordenado de la simplicidad del código que puede escribir en CodeFrame (sin paso de compilación, sin agrupación) es que la salida que obtiene en una página de vista previa HTML está literalmente el código que escribió en el editor, además de algún código HTML de envoltura. Entonces, en lugar de agregar explícitamente un botón "Exportar" o elemento de menú, el usuario simplemente puede abrir la vista previa y guardar el documento HTML en sí mismo para "exportar" cualquier código de código que hayan creado.
Si le gusta usar CodeFrame y desea apoyar lo que hago en el futuro, considere hacer una donación a CodeFrame a través de PayPal o Venmo.
Alternativamente, considere donar a algunas de las mejores organizaciones sin fines de lucro que realizan un gran trabajo en el espacio educativo CS, Khanacademy, Hack Club y Stutech.
