• ¡Obtenga la seguridad de la aplicación de la manera correcta! Detectar, proteger, monitorear, acelerar y más ...
  • ¿Cuál es la mejor alternativa a la codificación? ¡El editor de código, por supuesto!

    Los editores de código son la segunda razón más importante de las guerras de llama de los programadores (la primera es el formato de código).

    Para algunos, Vim es el único editor sensato que se haya creado, mientras que para otros todo lo que no encaja en el mundo de Emacs que gira en forma de espiral, como el de Inception, solo es digno de burla. Si está buscando atención, 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 un poco de 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 del 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 su camino alrededor del editor: sus fortalezas, debilidades, límites, peculiaridades y gemas ocultas.

    Nada es más frustrante que tener que luchar con el editor cuando está escribiendo código (¡piense en lo molesto que es cuando tiene 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, por eso son tan importantes y reciben tanta atención.

    Entonces, ¿cuál es el mejor editor de código?

    Honestamente, ¡ni siquiera me atreveré a ir allí! 😀 😀

    Sin embargo, si te gusta el desarrollo web, quiero que pienses en una alternativa: 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). Ambos son dos cosas diferentes y, como desarrollador, debe estar familiarizado con estos IDE multilingüe.

    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 los encontré hace 3-4 años. ¿Por qué demonios alguien querría entregar 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 a 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 que se pueden usar, hagamos una pausa y pensemos en cuándo pueden tener sentido los editores de código en línea.

    Configuración cero

    No sé ustedes, pero configurar mi editor favorito a mi gusto en un nuevo sistema no es algo que espero con ansias. Complementos, temas, fuentes, accesos directos, fragmentos, configuraciones. . . Hay una lista interminable de cosas que deben equilibrarse antes de que todo se vuelva utilizable. Es fácil pasar por alto algo, solo para molestarse más adelante cuando se interrumpe su flujo de trabajo.

    Por el contrario, no hay nada que ver 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, Tuberías de CI / CD - ¡nada de eso importa mientras tengas un navegador!

    Colaboración

    La mayoría de las veces, es necesario colaborar con otros desarrolladores al 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 él.

    Seguridad de los datos

    Ahora, es un hecho que ningún proyecto hoy en día carece de 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:

    • Olvidas enviar 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 los cuadernos en llamas, pero entiendes el punto, ¿verdad?)

    Hacer cumplir la disciplina

    Esto también podría discutirse en el tribunal de 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 siempre aceptará por completo a cualquiera de los excelentes editores de JetBrains y encontrará todas las oportunidades para señalar su naturaleza ávida 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): eres ingenuo si crees que los programadores de tu equipo no se bloqueará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 se adhiera a todos los estándares. Duro para el individuo, quizás, ¡pero genial para el proyecto!

    A estas alturas, me estoy quedando sin casos de uso, así que vayamos a ver qué opción tenemos cuando se trata de editores de código en línea, especialmente para el desarrollo web.

    JSFiddle

    Aunque la JSFiddle no puede reemplazar un editor de texto completo, hace un muy buen trabajo manejando scripts de 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 modelos estándar al principio; lo que significa que si desea obtener una demostración de, digamos, React, iniciado, todo lo que necesita hacer es hacer clic en el botón correspondiente y comenzar a escribir el código. Una vez que presionas Guardar, el "violín" se guarda y obtienes una URL permanente (Mira este tonto violín que creé: https://jsfiddle.net/tuqd76c4/ y ten en cuenta que puedes hacer tus cambios y presionar 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 freemium). JSFiddle se soporta a sí mismo a través de anuncios (al menos en el momento de la redacción), 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: ideales para crear conceptos juntos, entrevistas, etc.
    • Múltiples diseños, tamaños de fuente, temas claros / oscuros, etc.
    • Formateo de código (ordenación), próxima compatibilidad con linters (CSS y JS) y más.

    Y ahora, sollozo, sollozo, por las cosas malas:

    • JSFiddle es un editor puramente front-end. No hay forma de codificar y ejecutar su lenguaje de backend favorito.
    • No hay ningún 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 utilizar para alojar código en su servidor. El código debe 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 óptimo y brilla cuando necesitas realizar 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ódigo Caja de arena

    Código Caja de arena puede considerarse como una versión mucho más potente y completa de JSFiddle. Fiel a su nombre, CodeSandbox proporciona una experiencia completa de editor de código y un entorno de espacio aislado para el desarrollo de aplicaciones para el usuario.

    CodeSandbox es una auténtica potencia y un producto dulce y dulce. Me quedaría sin papel si trato de enumerar todas sus ventajas, pero aquí hay algunas características increíbles:

    • Soporte 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 es necesario configurar (casi) nada.
    • Soporte para TypeScript, recarga en caliente, exportación de GitHub, alojamiento de archivos estáticos, etc.
    • Está construido sobre Editor de Mónaco, la misma bestia que alimenta al favorito VSCode editor. ¡Esto trae poderosas funciones como "Ir a", "Buscar referencias" y la refactorización necesaria a su alcance!
    • Soporte de fragmentos para Hormiga
    • DevTools integrados, 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 Patreon por tan solo $ 5 al mes (pague lo que quiera, hasta $ 50 al mes).

    CodeAnywhere

    Un problema con la mayoría de los editores de código de esta lista (al menos hasta ahora) es que esperan que usted mantenga el código en sus servidores en todo momento o que le soliciten que sincronice el código a través de la línea de comandos con regularidad.

    No es así con CodeAnywhere.

    En su punto más fuerte, CodeAnywhere tiene dos características que se destacan para mí:

    • Imágenes de contenedor prediseñadas para más de 72 lenguajes de programación y marcos. ¡Esto significa que puede proporcionar 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 sirven 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 sofisticadas de control de versiones como GitHub, puede configurar fácilmente CodeAnywhere para leer y escribir en esa fuente, utilizando el editor de código únicamente 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 sentirse como un suspiro de alivio. El editor utiliza su sistema de diferencias para comparar archivos, que le permite comparar dos archivos en dos revisiones (se crea una revisión cada vez que guarda un archivo).

    Sin embargo, hay un pequeño inconveniente con las revisiones: la versión gratuita le permite mantener solo una revisión, mientras que el plan de pago más pequeño permite 20 revisiones como máximo. En términos generales, no es un problema, ya que rara vez desea ver más allá de la última revisión número 20, pero como la mayoría de los programadores tienen la costumbre de presionar Guardar varias veces por minuto, puede resultar doloroso.

    Todo dicho y hecho, CodeAnywhere es una oferta sólida y agradable para aquellos que quieren pasar a la nube y permanecer allí. 🙂 Dado que sus poderes van más allá del código de front-end, en mi opinión, ¡es muy recomendable!

    StackBlitz

    Si está en el front-end principalmente y no puede alejarse de la interfaz VSCode, StackBlitz fue creado solo para ti.

    ¿No ves nada especial?

    Yo tampoco lo hice hasta que me desplacé un poco hacia abajo y hice clic en el botón Angular. ¡Auge!

    Adivina qué, eso no se creó deliberadamente para parecerse a VSCode, ¡está construido 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 de VSCode normal.

    ¡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 se aloje de forma gratuita).
    • Puede bifurcar y compartir el proyecto. Mientras comparte, obtiene un control más preciso sobre lo que pueden hacer los demás.
    • 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 manera acostumbrada.

    ¡Pero espera hay mas!

    ¡Seriamente! 😀

    Aquí está la lista de características oficiales que ofrece StackBlitz:

    • Soporte nativo para Firebase (que es algo que no uso personalmente, pero bueno, es una bendición para aquellos que no quieren sumergirse en las oscuras profundidades del backend)
    • Intellisense, búsqueda de proyectos
    • Recarga en caliente a medida que escribe
    • Importar paquetes npm
    • ¡Edite sin conexión cuando no esté 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!

    AWS Cloud9

    Cloud9 fue posiblemente el primer IDE basado en navegador que ofreció características serias y tomó la idea del navegador como editor de la corriente principal. 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 de forma remota (o está 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 informática de AWS nueva o existente, y paga solo 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 AWS Serverless (depuración, etc.)
    • Acceso directo de terminal a AWS desde el editor (honestamente, un editor interno decente, el terminal con pestañas es lo que todavía extraño en VSCode)
    • Soporta más de 40 lenguajes de programación (Go, C ++, Ruby, Node, Python, PHP, Java... Elija)

    Las funciones de colaboración en Cloud9 también son deseables, lo que permite que las revisiones / entrevistas se realicen sin problemas.

    Otra característica excelente es la reproducción en video de los cambios realizados en un archivo, lo que hace que el proceso de revisión sea un placer:

    ¿Mi consejo?

    Si le gusta AWS, no espere y obtenga Cloud9 ahora mismo. Y si aún no está en la nube pero ha estado pensando en hacer un movimiento, adopte AWS e integre Cloud9 en su flujo de trabajo. ¡No puedes tomar una mejor decisión de cualquier manera!

    CodigoEnvy

    CodigoEnvy es un potente editor en la nube que utiliza contenedores Docker para permitirle ejecutar entornos de desarrollo preconfigurados y aislados. Está construido sobre el IDE de nube Eclipse Che de código abierto y ofrece una gran escalabilidad y DevOps opciones.

    En el momento de escribir este artículo, CodeEnvy ha sido adquirido por RedHat (¡que, curiosamente, ha sido adquirido por IBM!).

    Gitpod

    Gitpod es una versión refrescante de los editores de código en la nube (o IDE, si lo desea) 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%.

    Vale la pena echarle un vistazo si te encanta la experiencia VSCode y quieres algo que admita todos los principales lenguajes y marcos de back-end / front-end (Django, Rails, Revel, lo que sea).

    Theia

    Si eres un fanático de SOLID y un arquitecto de software quisquilloso, el Theia IDE cosquilleará su hueso de separación de preocupaciones. Es un código IDE codificado en TypeScript (¡cinco puntos para el estilo directamente!) Que tiene un front-end y un backend perfectamente separados. El front-end se ejecuta en un navegador, mientras que el backend puede estar en cualquier lugar: ¡la 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 y completamente funcional, lo que le brinda la apariencia de una aplicación de escritorio nativa en caso de que la desee.

    Coder

    Aunque su sitio web no lo dice claramente, Coder es un entorno VSCode incluido en un servidor que se puede ejecutar localmente o en la nube. La configuración recomendada es ejecutar el IDE como un servidor en la nube y acceder a él localmente a través del navegador. Hay imágenes de Docker predefinidas para configuraciones sin complicaciones y un plan empresarial en caso de que necesite soporte o tenga necesidades diferentes.

    Conclusión

    Esto cubre más o menos todos los IDE y editores de código que existen en el momento de la escritura. He omitido dos tipos de ofertas en esta lista: las que se centran exclusivamente en entrevistas y no tienen entornos completos (excepto nuestro querido clásico JSFiddle, por supuesto), y aquellos que no parecían ofrecer algo sustancial y tenían 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.