¿Qué es lo mejor después de la codificación? ¡El editor de código, por supuesto!
Los editores de código son la segunda razón más importante para las guerras de llamas de los programadores (la primera es el formateo de código).
Para algunos, Vim es el único editor sensato jamás creado, mientras que para otros todo lo que no encaja en el mundo de Emacs, similar a Inception, es ridículo. Si está buscando atención desesperadamente, todo lo que necesita hacer es ir a una comunidad de programación y comenzar un hilo como «¿Por qué creo que X (elija cualquier editor de código popular) apesta/es el mejor?» Tome una cerveza y relájese.
Argumentos, contraargumentos e insultos seguirán entrando y saliendo de la discusión durante toda la noche, y pasarán muchos meses antes de que el veneno en el hilo se enfríe.
La pregunta es: ¿por qué?
Claro, los seres humanos se las arreglan para hacer un gran problema con todo, pero creo que los editores de código son particulares cuando se trata de programadores. Un programador típico pasa casi todo su tiempo (más del 98%, si tuviera que apostar) en el editor de código de su elección. Conocen bien el editor: sus fortalezas, debilidades, límites, peculiaridades y gemas ocultas.
Nada es más frustrante que tener que luchar con el editor cuando estás escribiendo código (¡piensa en lo molesto que es cuando tienes que enviar un correo electrónico extenso y urgente en un teclado nuevo!). Los editores de código reducen la fricción mental y le permiten ser más productivo, razón por la cual son tan importantes y reciben tanta atención.
Entonces, ¿cuál es el mejor editor de código?
Honestamente, ¡ni siquiera me atrevería a ir allí! 😀 😀
Sin embargo, si te gusta el desarrollo web, hay una alternativa en la que quiero que pienses: ¡editores de código en línea! También puede llamarlos editores de código basados en la nube.
No confunda el editor de código con un entorno de desarrollo integrado (IDE). Ambas son dos cosas diferentes y, como desarrollador, debe estar familiarizado con estos IDE multilingües.
En pocas palabras, estos son editores que residen completamente en un servidor remoto y son accesibles a través del navegador.
Suena raro, ¿verdad?
Yo también lo sentí cuando me encontré con ellos hace 3 o 4 años. ¿Por qué diablos alguien querría entregarle todo a un estúpido navegador?
¿Puede incluso competir con un editor de código instalado de forma nativa?
Resulta que en la mayoría de los casos, y especialmente para el desarrollo Web, la respuesta es sí. Ahora, aunque no he adoptado los editores en línea como mi medio principal, me encuentro usándolos cada vez más en escenarios específicos.
Antes de sumergirnos en los editores de código disponibles para usar, hagamos una pausa y pensemos cuándo los editores de código en línea pueden tener sentido.
Tabla de contenido
Configuración cero
No sé ustedes, pero configurar mi editor favorito a mi gusto en un nuevo sistema no es algo que anhele. Complementos, temas, fuentes, accesos directos, fragmentos, configuraciones. . . Hay una lista interminable de cosas que deben equilibrarse antes de que todo sea utilizable. Es fácil pasar por alto algo, solo para enojarse más tarde cuando se interrumpe su flujo de trabajo.
Por el contrario, no hay nada que hacer con un editor en línea una vez que finaliza la primera configuración. Compilaciones oficiales, actualizaciones, compilaciones nocturnas, plataformas compatibles, arquitectura del sistema, sincronización de FTP, canalizaciones de CI/CD: ¡nada de eso importa siempre que tenga un navegador!
Colaboración
La mayoría de las veces, necesita colaborar con otros desarrolladores para resolver problemas o depurar algo.
El editor de código tradicional no está diseñado para esto: no hay posibilidad de editar, comentar o resaltar código simultáneamente, y es un desafío agregar soporte para ello.
Seguridad de datos
Ahora, es un hecho que ningún proyecto hoy en día está sin control de versiones, lo que significa que existe una copia del código en el repositorio en todo momento. Dicho esto, hay ocasiones en las que el control de versiones no es suficiente:
- Te olvidas de presionar las confirmaciones recién creadas y tu computadora portátil se incendia.
- Tiene otros archivos importantes y volcados de datos con los que interactúa su código, aunque estos no son parte de la aplicación en vivo. ¿Qué les sucede si su computadora portátil se incendia?
(Está bien, parece que estoy obsesionado con que los cuadernos se incendien, pero entiendes el punto, ¿verdad?)
Hacer cumplir la disciplina
Esto también podría argumentarse en contra en el tribunal de los derechos de los desarrolladores (si tal cosa existe), pero la verdad es que los desarrolladores rara vez sacrifican sus caprichos por el bien común.
Por ejemplo, un entusiasta incondicional de Sublime Text aceptará por completo cualquiera de los excelentes editores de JetBrains y encontrará todas las oportunidades para señalar su naturaleza hambrienta de memoria y su rendimiento más lento.
Lo mismo ocurre con las pestañas frente a los espacios (o incluso las pestañas de dos espacios frente a las pestañas de cuatro espacios): es ingenuo si cree que los programadores de su equipo no se enfrentarán.
En tales casos, un editor en línea es una bendición: usted decide la configuración de los proyectos (incluso cómo se debe formatear el código), y simplemente se negará a aceptar el trabajo hasta que cumpla con todos los estándares. ¡Duro para el individuo, tal vez, pero excelente para el proyecto!
Por ahora, me estoy quedando sin casos de uso, así que pasemos a ver qué opción tenemos cuando se trata de editores de código en línea, especialmente para el desarrollo web.
JSFiddle
Tiempo JSFiddle no puede reemplazar un editor de texto completo, hace un muy buen trabajo al manejar scripts frontend únicos.
Es tan popular que los sitios de preguntas y respuestas como StackOverflow ya admiten la incorporación de enlaces JSFiddle directamente en su plataforma.
Para que las cosas comiencen rápidamente, JSFiddle ofrece algunos repetitivos al principio; lo que significa que si desea obtener una demostración de, por ejemplo, React, comenzó, todo lo que necesita hacer es hacer clic en el botón correspondiente y comenzar a escribir el código. Una vez que presiona Guardar, el «violín» se guarda, obtiene una URL permanente (consulte este tonto violín que creé: https://jsfiddle.net/tuqd76c4/ y tenga en cuenta que puede hacer sus cambios y presione Guardar para crear un nuevo versión de esta URL).
Esto es lo que hace que JSFiddle sea una plataforma viable para el desarrollo web front-end:
- De uso gratuito (sin tarifas ocultas ni funciones gratuitas). JSFiddle se respalda a sí mismo a través de anuncios (al menos al momento de escribir), y puede ver un anuncio de Adobe en la parte inferior izquierda de la captura de pantalla anterior.
- Funciones de colaboración de código: ideal para construir conceptos juntos, entrevistas, etc.
- Múltiples diseños, tamaños de fuente, temas claros/oscuros, etc.
- Formateo de código (ordenar), próximo soporte para linters (CSS y JS) y más.
Y ahora, sollozo, sollozo, por lo malo:
- JSFiddle es un editor puramente frontal. No hay forma de codificar y ejecutar su lenguaje de back-end favorito.
- No hay concepto de archivos y carpetas aquí (o cargas, para el caso). Todo lo que tiene es un solo espacio para el código, sin importar cuánto haya.
- JSFiddle no se puede usar para alojar código en su servidor. El código tiene que estar en JSFiddle y es público todo el tiempo.
- No hay forma de construir una canalización de CI/CD, usar Git, etc.
Dicho esto, JSFiddle tiene su punto ideal y brilla cuando necesita repartir pruebas de concepto y colaborar a la velocidad de la luz. Es y seguirá siendo una identidad importante entre los editores en línea.
CódigoSandbox
CódigoSandbox puede considerarse como una versión mucho más potente y completa de JSFiddle. Fiel a su nombre, CodeSandbox proporciona una experiencia de editor de código completa y un entorno de espacio aislado para el desarrollo de front-end.
CodeSandbox es una potencia real y un producto dulce, dulce. Me quedaría sin papel si tratara de enumerar todas sus ventajas, pero aquí hay algunas características increíbles:
- Compatibilidad con npm: sí, puede agregar prácticamente cualquier paquete que esté disponible en npm.
- Archivos, carpetas, módulos: puede dividir su código en varios archivos, agregar/eliminar imágenes de la carpeta pública y crear/importar módulos como mejor le parezca. El flujo de trabajo refleja el de un paquete de módulos moderno, por lo que no necesita configurar (casi) nada.
- Soporte para TypeScript, recarga en caliente, exportación de GitHub, alojamiento de archivos estáticos, etc.
- Se basa en el editor de Mónaco, la misma bestia que alimenta al favorito. Código VSC editor. ¡Esto trae características poderosas como «Ir a», «Buscar referencias» y la refactorización necesaria al alcance de su mano!
- Compatibilidad con fragmentos de Hormiga
- Herramientas de desarrollo integradas, linting, superposiciones de errores, marcos de prueba (Jest), combinaciones de teclas y más.
- Potente CLI para importar directamente proyectos locales a CodeSandbox.
Si bien la versión gratuita de CodeSandbox no admite código privado, puede obtener esa función (y aumentar los límites de tamaño en general) ayudándolos a Patreón por tan solo $5 al mes (paga lo que quieras, hasta $50 al mes).
código en cualquier lugar
Un problema con la mayoría de los editores de código de esta lista (al menos hasta ahora) es que esperan que mantengas el código en sus servidores en todo momento, o requieren que sincronices el código a través de la línea de comandos con regularidad.
No es así con código en cualquier lugar.
En su punto más fuerte, CodeAnywhere tiene dos características que se destacan para mí:
- Imágenes de contenedores preconstruidas para más de 72 lenguajes y marcos de programación. ¡Esto significa que puede aprovisionar un nuevo entorno de desarrollo directamente desde el editor! Por supuesto, el código se aloja automáticamente en el contenedor recién creado y los archivos se entregan directamente desde allí.
- Conéctese a cualquier cosa. Sí, literalmente cualquier cosa. No está obligado a almacenar su código en los servidores de CodeAnywhere. Ya sea que su código resida en FTP, plataformas de intercambio de archivos como Dropbox, Amazon S3 o en plataformas de control de versiones sofisticadas como GitHub, puede configurar fácilmente CodeAnywhere para leer y escribir en esa fuente, utilizando el editor de código exclusivamente para . . . Bueno, edición de código. 😛
Una cosa más que quiero señalar: si no se siente cómodo con Git cuando se trata de ver el historial y las diferencias, CodeAnywhere puede parecer un suspiro de alivio. El editor utiliza su sistema diff para comparar archivos, lo que le permite comparar dos archivos en dos revisiones cualesquiera (se crea una revisión cada vez que guarda un archivo).
Sin embargo, hay un pequeño problema con las revisiones: la versión gratuita le permite mantener solo una revisión, mientras que el plan pago más pequeño permite 20 revisiones como máximo. En términos generales, no es un problema, ya que rara vez desea mirar más allá de la última revisión número 20, pero dado que la mayoría de los programadores tienen la costumbre de presionar Guardar varias veces por minuto, puede volverse doloroso.
Todo dicho y hecho, CodeAnywhere es una oferta sólida y agradable para aquellos que desean migrar a la nube y permanecer allí. 🙂 Dado que sus poderes van más allá del código front-end, en mi opinión, ¡es muy recomendable!
ApilarBlitz
Si le gusta principalmente el front-end y no puede alejarse de la interfaz de VSCode, ApilarBlitz fue creado solo para ti.
¿No ves nada especial?
Yo tampoco lo hice hasta que me desplacé un poco hacia abajo e hice clic en el botón Angular. ¡Auge!
Adivina qué, eso no se creó deliberadamente para parecerse a VSCode: ¡se basa en el editor de VSCode! Tanto es así, que puede instalar extensiones, buscar en las carpetas y organizar archivos de la manera que esperaría de una instancia normal de VSCode.
¡Pero espera hay mas!
Es posible que haya notado o no que:
- ¡Todas las aplicaciones creadas en StackBlitz también se implementan automáticamente en sus servidores! Entonces, esta aplicación de juguete angular que acabo de crear se aloja automáticamente en https://angular-yvyi2j.stackblitz.io/. Lo más probable es que la URL siga funcionando (aunque se cargará lentamente, como es de esperar cuando está alojada de forma gratuita).
- Puedes bifurcar y compartir el proyecto. Mientras comparte, obtiene un mayor control sobre lo que otros pueden hacer.
- Puede conectarse a un repositorio de GitHub y también permitir que el código se extraiga/envíe directamente desde allí. O simplemente puede descargar el proyecto como un archivo zip de la buena manera.
¡Pero espera hay mas!
¡En serio! 😀
Aquí está la lista de características oficiales que ofrece StackBlitz:
- Soporte nativo para Firebase (que es algo que personalmente no uso, pero bueno, es una bendición para aquellos que no quieren sumergirse en las turbias profundidades del backend)
- Intellisense, búsqueda de proyectos
- Recarga en caliente mientras escribes
- Importar paquetes npm
- ¡Edita sin conexión cuando no estés conectado!
StackBlitz está lleno de (hermosas) sorpresas cuando se trata de eliminar los obstáculos del desarrollo y la implementación web. ¡Incrustar VSCode en su sitio web ya no es cosa de sueños!
Nube de AWS9
nube9 Podría decirse que fue el primer IDE basado en navegador que ofreció características serias y tomó la idea de la corriente principal del navegador como editor. No es de extrañar que Amazon lo adquiriera más tarde, y hoy, Cloud9 es parte de las ofertas de AWS.
Si está conectado remotamente (o interesado en) la plataforma AWS, Cloud9 es donde termina su búsqueda de un editor perfecto (bueno, casi perfecto).
Veamos por qué:
- No hay cargos adicionales por usar Cloud9. Puede conectar Cloud9 a una instancia de cómputo de AWS nueva o existente y solo paga por esa instancia. También es posible conectarse a un servidor de terceros a través de SSH, ¡exactamente sin cargo! 🙂
- Soporte de primera clase para aplicaciones sin servidor de AWS (depuración, etc.)
- Acceso de terminal directo a AWS desde el editor (honestamente, un editor interno decente, el terminal con pestañas es lo que todavía extraño en VSCode)
- Compatible con más de 40 lenguajes de programación (Go, C++, Ruby, Node, Python, PHP, Java… elija el que desee)
Las funciones de colaboración en Cloud9 también son deseables, ya que permiten que las revisiones/entrevistas se realicen sin problemas.
Otra característica excelente es una reproducción de estilo de video de los cambios realizados en un archivo, lo que hace que el proceso de revisión sea una alegría:
¿Mi consejo?
Si le gusta AWS, no espere y tome Cloud9 ahora mismo. Y si aún no está en la nube pero ha estado pensando en hacer un cambio, adopte AWS e integre Cloud9 en su flujo de trabajo. ¡No puedes tomar una mejor decisión de cualquier manera!
Gitpod
Gitpod es una versión refrescante de los editores de código en la nube (o IDE, por así decirlo) que tiene como objetivo mantener su código siempre probado y actualizado. En otras palabras, está profundamente integrado con GitHub, y cada vez que agrega código, ejecuta sus pruebas y canalizaciones de CI/CD para asegurarse de que el código esté siempre al 100 % de salud.
Vale la pena echarle un vistazo si te encanta la experiencia de VSCode y quieres algo que admita todos los principales lenguajes y marcos de back-end/front-end (Django, Rails, Revel, lo que quieras).
Teia
Si es un fan acérrimo de SOLID y un arquitecto de software quisquilloso, el IDE hará cosquillas en tu hueso de separación de preocupaciones. Es un IDE de código codificado con TypeScript (¡cinco puntos para el estilo de inmediato!) que tiene un front-end y un back-end perfectamente separados. El front-end se ejecuta en un navegador, mientras que el back-end puede estar en cualquier lugar: ¡una máquina local o la nube!
Pero eso no es todo: el front-end se puede ejecutar como una aplicación Electron con un entorno de navegador aislado completamente funcional, lo que le brinda la apariencia de una aplicación de escritorio nativa si lo desea.
Espacios de código de GitHub
Espacios de código de GitHub proporciona máquinas virtuales de alto rendimiento para ejecutar códigos con el fin de desarrollar aplicaciones web. Usando Visual Studio Code que incluye un editor y un ecosistema completo, encontrará que trabajar en el navegador es más fácil.
Pruebe el entorno de desarrollo más reciente para los proyectos, junto con imágenes prediseñadas. Experimentará una baja latencia en varias regiones al escalar sus máquinas virtuales hasta 64 GB de RAM y 32 núcleos. Comience a codificar con los entornos estandarizados, las especificaciones de hardware, la configuración del editor, las extensiones y los requisitos de tiempo de ejecución.
Puede aislar las dependencias entre los proyectos con docker-compose y contenedores. Además, obtenga una vista previa de los cambios que ha realizado fácilmente en el navegador y comparta puertos públicos y privados con sus compañeros de equipo. También puede editar o agregar incluso detalles nerds como espacios, pestañas, claro, oscuro, embellecer, más bonito, solarizado, Monokai y muchos más.
Los principiantes que quieran probar suerte pueden usar GitHub Codespaces de forma gratuita con beneficios limitados, pero tendrá suficientes funciones para continuar. Si es un equipo o una empresa, puede comenzar a usar GitHub Codespaces a $40/usuario/año.
JetBrains
Obtenga entornos de desarrollo de nube espacial nuevos, reproducibles, listos para usar y automatizados en segundos y comience a codificar con JetBrains IDE – Espacio. Es la solución única para proyectos y equipos de software al asumir la responsabilidad del ciclo de vida completo del desarrollo, desde las canalizaciones de CI/CD y el alojamiento de los repositorios de Git hasta los paquetes de publicación.
Space es la máquina virtual dedicada con el contenedor Docker. Puede instalar todas las bibliotecas y herramientas esenciales que necesita en el proyecto. Optimice y acelere la experiencia de incorporación compartiendo y reproduciendo los espacios de trabajo de codificación cuando lo desee.
Permita que los recién llegados comiencen a desarrollar un código al instante sin perder tiempo desarrollando una máquina local. Obtendrá un IDE completo listo para usar cada vez que necesite comenzar a escribir el código, depurarlo y ejecutarlo en segundos para probar el resultado. JetBrains ofrece una plataforma centralizada para administrar los entornos de desarrollo.
Todo lo que haces y cada recurso que usas se rastrea en un solo lugar. También puede integrar los recursos en la canalización de desarrollo con bastante facilidad. De acuerdo con su proyecto, puede elegir el tipo de máquina virtual que prefiera para adaptarse al tamaño del proyecto. Space ahorrará sus recursos al hibernar el espacio de trabajo de codificación para que pueda comenzar a trabajar en el mismo después del descanso.
Comience su viaje hoy y experimente la belleza de esta bestia de forma gratuita.
CódigoSabroso
CódigoSabroso es un IDE en la nube extensible, inteligente y moderno con muchas características adicionales que le encantarán. Le ayuda a escribir código limpio y legible de forma más inteligente en tiempo real en su idioma preferido.
Obtenga el editor de código para tener una experiencia fluida con compilación integrada, finalización de código, herramientas de detección de errores y mucho más. No se preocupe por la configuración; levántate y empieza a trabajar en los proyectos que tienes delante.
Tendrás la misma sensación que trabajar con tu escritorio cuando edites tus códigos en la nube mientras disfrutas del mismo rendimiento y velocidad. CodeTasty entiende las necesidades de cada desarrollador; y por lo tanto, le permite instalar tantas extensiones como desee para aumentar su productividad. Además, admite más de 40 idiomas y cien líneas de código en un solo archivo.
Pruebe CodeTasty gratis para obtener un espacio de trabajo sandbox, 2 espacios de trabajo FTP/SSH, colaboración, opción de terminal y 2 colaboradores. También puede comenzar con un plan pago de $ 4 / mes y tener la oportunidad de revisar sus códigos antes de ejecutar.
Repetir
Aprenda, escriba y cree código con RepetirEl IDE gratuito, integrado en el navegador y colaborativo que admite más de 50 idiomas sin perder mucho tiempo en las configuraciones. Puede comenzar a codificar en su idioma en cualquier dispositivo, sistema operativo y plataforma.
Invite a sus compañeros de equipo, colegas o amigos a editar el código en los documentos de Google. Puede importar su código a GitHub para ejecutar y colaborar con repositorios de GitHub sin configuraciones. Ya sea que se sienta cómodo con C++, Python, CSS o HTML, puede escribir el código y editarlo en una sola plataforma.
Además, en el momento en que esté listo con el código, instantáneamente se activará en todo el mundo. Si también quieres aprender sobre código, Replit tiene más de tres millones de tecnólogos, creativos, programadores apasionados y más. Con la colaboración en tiempo real con sus equipos, su equipo será más productivo. Además, puede crear aplicaciones, bots, etc., con la ayuda de complementos mientras codifica. La herramienta también te ayuda a desarrollar tus proyectos directamente desde tu navegador.
Regístrese para obtener una cuenta y comience a codificar ahora.
PaizaCloud
Cree aplicaciones web en su navegador con PaizaCloud IDE. Es un entorno de desarrollo web para Node.Js, MySQL, Django, Java, PHP, Jupyter Notebook, Laravel, WordPress y más.
PaizaCloud le permite escribir sus códigos sin problemas sin preocuparse por configurar el entorno. Simplemente abra el navegador y su entorno estará listo en tres segundos. Ya sea que esté utilizando la versión Mac, iPad, OS o Windows, puede operar el mismo entorno en todos los navegadores.
Además, puede usar shells de Linux para configurar entornos de desarrollo basados en web de manera más fácil y flexible. También puede publicar los servicios ideales para su cartera, como servicios de alojamiento, actualizando al plan básico.
Ejecute comandos, administre archivos, edite códigos y más en el mismo navegador. PaizaCloud elimina la necesidad de agregar comandos como vim, ssh, etc., para editar archivos o iniciar sesión. En cambio, puede operar los servidores de manera fácil y eficiente como si estuviera ejecutando una computadora de escritorio.
Realice una prueba de manejo con el plan gratuito con 2 núcleos y 2 GB de memoria. O aproveche la vida útil ilimitada del servidor con $ 9.80 / mes y obtenga 1 GB de espacio en disco adicional.
Conclusión
Esto cubre más o menos todos los IDE y editores de código que existen al momento de escribir. He dejado fuera dos tipos de ofertas en esta lista: aquellas que se enfocan puramente en entrevistas y no tienen entornos completos (excepto nuestro amado JSFiddle clásico, por supuesto), y aquellas que no parecían ofrecer algo. sustancial y tenía poco más que una elegante página de inicio.
Si necesita algo ligero para el desarrollo web, puede explorar estos editores de código.