Brackets vs Sublime Text

por Natalia Ventre el ・ podés leerlo en 6 minutos ・

Anteriormente comparé Espresso vs Sublime Text y Sublime Text salió ganador, hoy se enfrenta a Brackets, el editor de código open-source de Adobe.

Round 1: UI y espacio de trabajo

Vista rápida de imágenes en Brackets
Vista rápida de imágenes en Brackets. También disponible para colores y degradés.

Brackets

  • Brackets tiene 2 botones: desarrollo en vivo (rayo) e instalar extensión (lego).
  • Al igual que Espresso, los archivos abiertos están en el área de trabajo, arriba del árbol del proyecto en la barra lateral. La barra lateral se puede mostrar / ocultar con ⌘⇧H / CTRL + H.
  • Podés trabajar a pantalla completa o lado a lado junto con un navegador para desarrollar en vivo.
  • El tema por defecto es con fondo blanco ¡puaj!, podés instalar temas adicionales, aunque sólo encontré 2 disponibles :(

En términos generales, Brackets es sencillo y amigable con diseñadores.

Sublime Text

  • En comparación con Brackets, Sublime Text es mucho personalizable, podés mostrar/ocultar la barra lateral y el minimapa, disponer las pestañas en filas y columnas, instalar temas y esquemas de color, etc.
  • La archivos abiertos en pestañas funciona muy bien si ocultás la barra lateral.

Round 2: Características distintivas

Brackets

Brackets es un editor de código específico para desarrollo web front-end: HTML, CSS y JavaScript. Brackets está en desarrollo y las funcionalidades están en plena evolución. La versión que comento en este artículo es el sprint 24.

Desarrollo en vivo y edición rápida en Brackets
Brackets y Chrome conectados. Editando reglas CSS desde un HTML (⌘E).
  • Edición rápida: Presionando ⌘E / CTRL + E activás el modo edición rápida. Por ej. si estás en un archivo .html y tenés el cursor en una clase, id o etiqueta, podés editar rápido las reglas de estilo asociadas. En JavaScript podés editar una función desde un llamado a una función. Desde valores RGBa, HEX o HSLa (en cualquier tipo de archivo) podés invocar una interfaz de selector de color.
  • Desarrollo en vivo: Si desde un archivo HTML, presionás el botón desarrollo en vivo, Brackets abre el archivo en Chrome. Cuando editás el archivo CSS enlazado, instantáneamente ves los cambios en el navegador y te recuadra los elementos afectados. Si guardás un HTML o JS, recarga la previsualización en el navegador. La implementación no es perfecta, pero está bueno tener esta funcionalidad en el editor y no tener que recurrir a herramientas adicionales.
  • Vista rápida: Cuando pasás el mouse por arriba de un color, degradé o imagen, te la muestra en un popup (se puede desactivar), pero me sorprende que intentar abrir una imagen, da un error.
  • Documentación rápida: Presionando ⌘K / CTRL + K en las propiedades y valores CSS, podés acceder a la documentación en WebPlatform. Esta es una función muy útil para principiantes y podría serlo para todos si incorporara la documentación de JavaScript y sus librerías (jQuery, Backbone, etc.).

En HTML y CSS, las sugerencias de código son las estándar, para JavaScript usa Tern1, que es un motor de análisis de código.

Como todas las aplicaciones, tiene accesos directos del teclado:

  • Presionando ⌘⇧O / CTRL + shift + O podés abrir un archivo.
  • Con ⌘T / CTRL + T podés saltar a la definición de un método en el archivo JS actual y con ⌘L / CTRL + G a un número de línea.

Sublime Text

Sublime Text soporta múltiple lenguajes incluyendo HTML, CSS, JavaScript, PHP, Python y Ruby.

Sublime Text tiene atajos del teclado para buscar, seleccionar y editar código y modificar el espacio de trabajo. Los más útiles son ir a cualquier cosa, la paleta de comandos y los cursores múltiples.

Sublime Text tiene además algunas características avanzadas:

  • Proyectos: Si trabajás en equipo, en Sublime Text podés configurar preferencias a nivel de proyecto, que sobreescriben las preferencias del usuario. No importa si un desarrollador es fanático de las tabs y otro de los espacios, con las configuraciones por proyectos, el código va a quedar consistente.
  • Builds: Con los builds podés ejecutar programas externos desde el editor, para que no tengas que ir y venir a la terminal. En desarrollo front-end podés aprovechar los builds para compilar Sass a CSS, CoffeScript a JavaScript, etc. cuando guardás los archivos.
  • Macros y Snippets: Con los macros podés automatizar una secuencia de comandos y los snippets son fragmentos de código. Son dos opciones para evitar tareas repetitivas.

Round 3: Extensiones

Instalación de una extensión en Brackets
Instalación de una extensión en Brackets.

Brackets

En GitHub hay una lista de extensiones para Brackets organizadas por categoría. Una vez que encontraste la que querés, tenés que copiar y pegar la URL del archivo .zip o repositorio de GitHub en el cuadro de instalación.

Extensiones interesantes:

  • Emmet (aka ZenCoding): para mí es imprescindible para trabajar con HTML, nunca usaría un editor de código que no sea compatible con Emmet.
  • CanIUse: visor en línea sobre soporte a características HTML5/CSS3 de los navegadores.

Me preocupó no encontrar extensiones para Sass. Aunque no encontré información al respecto, según mis pruebas, Brackets reconoce los archivos de LESS y Sass, pero no los de Stylus. La función de “documentación rápida”, sin embargo, sólo funciona con CSS. También reconoce correctamente los archivos de CoffeeScript.

Documentación rápida en Brackets
Documentación rápida en Brackets, desde WebPlatform.org disponible por ahora sólo para CSS.

Sublime Text

En Sublime Text con Package Control es super sencillo buscar, instalar y administrar extensiones.

Round 4: Otros detalles

Brackets

  • Brackets es lo mejor de los 2 mundos: un proyecto open-source administrado por Adobe2.
  • Actualmente está en desarrollo y se actualiza con frecuencia.
  • Cuando abrís la aplicación por primera vez, te muestra una página “Primeros pasos con Brackets”. Me sorprendió gratamente que un proyecto que todavía no está “terminado” tenga ayuda y traducción al español y otros idiomas para facilitar la adopción.
  • Brackets es gratis, lo cual es obviamente un factor atractivo para estudiantes y para desarrolladores amateur.

Sublime Text

  • Según tengo entendido Sublime Text es desarrollado exclusivamente por Jon Skinner.
  • Es un editor maduro, la tercera versión se encuentra en beta (disponible para usuarios registrados).
  • Sublime Text cuesta US$ 70. Si trabajás, con un proyecto que completes para un cliente, o con un sueldo, deberías poder pagarlo, no estamos hablando de un software de miles de dólares.

Y el ganador es… ¡Sublime Text!

La edición rápida de Brackets es un modo de edición en contexto que no interrumpe el proceso creativo, es conceptualmente similar a lo que plantea Chris Granger en Light Table. Sin embargo, todavía no veo a Brackets como un reemplazo viable a Sublime Text, pero me encanta ver finalmente innovación en editores de código y por supuesto voy a seguir de cerca su desarrollo y actualizar este artículo cuando amerite.


  1. TernJS también está disponible como plugin para Sublime Text.

  2. Lo más parecido que tiene actualmente Adobe a un editor de código es Dreamweaver, el último sobreviviente de la vieja Macromedia y me intriga saber qué tiene que decir Adobe sobre HTML.