Brackets vs SublimeText3: ¿Cual escoger?

Tenía en mi blog local un borrador bastante avanzado sobre la comparación que venía haciendo entre Brackets y SublimeText3, pero en el día de hoy he tenido que cambiar casi todo, pues los pocos defectos o carencia de opciones que le fui encontrando a Brackets, se pueden opacar haciendo uso de extensiones.

Brackets ha causado sensación. El hecho de ser un editor de código abierto le ha otorgado un Plus frente a otras alternativas, y viniendo de Adobe, no es para menos que como mínimo cause curiosidad.

Pero bueno, vamos al tema. Lo que pretendo es hacer una comparación entre Brackets y SublimeText3, este último lo he venido usando por algún tiempo por diversos motivos.

¿Cómo obtener Brackets?

Para descargar Brackets solo tenemos que ir a la página de descargas de su sitio oficial y bajar un .deb. Los pasos de instalación en Ubuntu y derivados ya los vimos acá, pero en el caso de ArchLinux les mostré un método que ahora ha cambiado un poco.

Básicamente ahora lo que tenemos que hacer en ArchLinux es lo siguiente:

• Bajamos el .deb y lo descomprimimos.
• Se nos crea la carpeta brackets-sprint-29-LINUX64 la cual tendrá el fichero data.tar.gz adentro.
• Descomprimimos también el fichero data.tar.gz y nos quedan dos carpetas: opt/ y usr/.
• Abrimos un terminal y ejecutamos:

$ sudo cp -Rv opt/brackets/ /opt/
$ sudo cp usr/bin/brackets /usr/bin/
$ sudo cp -Rv usr/share/doc/brackets/ /usr/share/doc/
$ sudo cp -R usr/share/applications/brackets.desktop /usr/share/applications/
$ sudo cp usr/share/icons/hicolor/scalable/apps/brackets.svg /usr/share/icons/hicolor/scalable/apps/

Si ya habíamos realizado la instalación de la forma que les mostré anteriormente, tendremos que ejecutar en el terminal:

$ sudo rm -Rv /usr/lib/brackets

Ahora nos queda modificar o crear el fichero /usr/share/applications/brackets.desktop para que nos quede de esta forma:

[Desktop Entry]
Name=Brackets
Type=Application
Categories=Application
Exec=/opt/brackets/Brackets %U
Icon=brackets
MimeType=text/html;

De todos modos, dentro de la carpeta /opt/brackets viene el fichero original. Eso es todo, ya podremos ejecutar Brackets desde el Menú. Si tienen algún problema para iniciarlo, por favor lean el artículo anterior de como instalar Brackets en Arch Linux de forma manual.

¿Cómo obtener SublimeText3?

En el caso de SublimeText, solo tenemos que ir a su sitio web oficial y bajar la versión según nuestra arquitectura. Después descomprimimos el fichero descargado en algún lugar y para tener SublimeText disponible desde el Menú de Aplicaciones, nos creamos el fichero /usr/share/applications/sublimetext3.desktop y le ponemos adentro:

[Desktop Entry]
Version=3.0
Type=Application
Name=Sublime Text 3
GenericName=Text Editor
Comment=Sophisticated text editor for code, markup and prose
Exec=/home/elav/Linux/Paquetes/Desarrollo/SublimeText3/sublime_text %F
Terminal=false
MimeType=text/plain;
Icon=/home/elav/Linux/Paquetes/Desarrollo/SublimeText3/Icon/256x256/sublime-text.png
Categories=TextEditor;Development;
StartupNotify=true
Actions=Window;Document;

[Desktop Action Window]
Name=New Window
Exec=/home/elav/Linux/Paquetes/Desarrollo/SublimeText3/sublime_text -n
OnlyShowIn=Unity;

[Desktop Action Document]
Name=New File
Exec=/home/elav/Linux/Paquetes/Desarrollo/SublimeText3/sublime_text --command new_file
OnlyShowIn=Unity;

Por supuesto, tienen que cambiar la ruta /home/elav/Linux/Paquetes/Desarrollo/ por la carpeta donde tienen descompactado a SublimeText3. Dentro de la carpeta de Sublime también viene el fichero .desktop.

Interfaz

La interfaz de ambos editores es muy similar. Un panel a la izquierda con los Proyectos y ficheros abiertos, un menú en la parte superior con las opciones del editor, aunque en el caso de Brackets, este aparecer sobre el área del edición.

Algo que me gusta de SublimeText es el MiniMapa que sale en la parte derecha del área de edición, que nos permite desplazarnos por todo el documento de forma fácil. Pero como dije al principio, en Brackets también se puede gracias a las Extensiones.

SublimeText también nos permite cambiar la apariencia del área de edición gracias a una serie de estilos que ya vienen incluidos por defecto, así como establecer nuestras preferencias como usuario y lo más importante de todo, nuestros atajos de teclado.

¿Y adivinen que? Pues vuelve a la carga las extensiones de Brackets que nos permiten hacer lo mismo:

Rendimiento

El arranque de SublimeText3 es mucho más rápido que el de Brackets, diría que es casi instantáneo. Brackets se ejecuta rápido, sobre todo desde la última versión (Spring 29), pero demora unas milésimas de segundo en cargar el proyecto que dejamos abierto anteriormente.

Con dos ficheros abiertos en ambos editores, el consumo de SublimeText es ligeramente superior al de Brackets, y se mantiene así con el uso de cada uno.

Usabilidad

A simple vista, examinando cada menú, nos damos cuenta de que SublimeText tiene muchas más opciones que Brackets. Como comentaba anteriormente nos brinda más atajos de teclado y la posibilidad de cambiarlos y personalizarlos por defecto. Ambos comparten la mayor parte de ellos, como por ejemplo el de comentar una línea usando Ctrl + /.

SublimeText posee pestañas (Brackets lo logra con una extensión, aunque no está muy pulida), lo que nos facilita mucho movernos entre nuestros ficheros sin tener que ir al panel lateral.

Pero, Brackets tiene algo que me encantó y lo hace muy, muy productivo.

En Brackets cuando estamos editando un fichero HTML, y queremos editar el código CSS de una etiqueta, o el código JS, no tenemos que abrir el fichero .css o .js para ello. Solo ponemos el cursor sobre la etiqueta a editar y presionamos Ctrl + E. Y miren lo que sucede:

Como ven, se nos despliega una zona que nos muestra el código CSS asociado a dicha etiqueta. Ahí podemos editarlo y guardarlo sin necesidad de abrir el .css original.

Además, se nos mostrará en todos los ficheros .css que se le aplique estilo a dicha etiqueta y en la línea donde se aplica el estilo.

Otro detalle que me gusta de SublimeText sobre Brackets, es que cuando nos ponemos sobre una etiqueta de apertura o cierre, nos indica cual le corresponde ya sea al final o al principio. SublimeText además nos permite colapsar una etiqueta padre y su contenido.

Otra funcionalidad de SublimeText que me gusta es la de poder organizar el texto alfabéticamente, muy útil cuando queremos tener bien ordenado nuestro fichero .css.

Autocompletado

Otro punto a favor de Brackets es el auto-completado, el cual es mucho mejor que SublimeText por dos motivos: Muestra una sugerencia como lo hace BlueFish y tiene más opciones de auto-completado (propiedades CSS y etiquetas HTML).

Eso si, Brackets por defecto no cierra las llaves { } automáticamente, pero esto lo solucionamos fácilmente en el Menú » Edición » Completar paréntesis automáticamente. Y listo.

Extensiones

Ambos editores poseen Extensiones, las cuales se pueden instalar relativamente fácil. En el caso de SublimeText, hay un complemento genial llamado Package Control que nos permite instalar el resto de las extensiones de forma muy fácil.

El único problema que le encuentro, es que no sé como hacerlo de forma manual, o sea, descargar la extensión desde Internet en un archivo aparte y no directamente desde el editor.

No es que no se pueda, solo que en Brackets es más simple. Solo tenemos que abrir el Gestor de Extensiones y podremos ver las que tenemos instaladas o las que podemos instalar:

También podemos entrar al directorio de Extensiones, bajar el .zip, descomprimirlos y ponerlos dentro de ~/.Brackets/extensions/user/. Reiniciamos el editor y ya está.

Edición en línea

Esta funcionalidad es excelente aunque no la uso para nada, por lo que no puedo dar un criterio objetivo al respecto. En teoría, usando Chromium + Node.js, los cambios que vamos efectuando en nuestros ficheros HTML y CSS se pueden ir visualizando automáticamente en el navegador.

¡Brackets abrirá una conexión en vivo con tu navegador local y le enviará los cambios en el archivo CSS conforme escribas! Así de fácil lo describen los chicos de Brackets.

Actualmente, Brackets sólo soporta Desarrollo en Vivo para CSS. Aún así, en la versión actual, los cambios en ficheros HTML y JavaScript son detectados y recargados automáticamente en el navegador cuando guardas. En estos momentos estamos trabajando en añadir soporte para Desarrollo en Vivo de HTML y JavaScript. Además, las actualizaciones automáticas sólo son posibles en Google Chrome, pero esperamos poder trasladar próximamente esta funcionalidad a todos los grandes navegadores.

Vista Rápida

Para aquellos que todavía no han memorizado las equivalencias de color entre HEX y RGB, Brackets permite ver exactamente qué color se está utilizando rápida y fácilmente.

Tanto en CSS como en HTML, simplemente mueve el cursor sobre cualquier valor de color o gradiente y Brackets mostrará una previsualización del mismo de manera automática.

Lo mismo sirve para imágenes: simplemente pasa el cursor sobre la dirección de una imagen en Brackets, y éste mostrará una vista en miniatura de la misma.

Conclusiones

Aunque esto ha sido solo un breve repaso por ambos editores ¿Cual entonces es el mejor?

Se pueden haber percatado que me decanto un tanto por Brackets, pero solo por el hecho de que es de Código Abierto y la nueva forma de editar CSS más rápido. Pero aún le falta mucho para superar a SublimeText, tanto en funcionalidad como estabilidad.

El desarrollo de Brackets está muy activo y mejora con cada nueva versión, por lo que tengo todas mis expectativas puestas sobre él. Pero no se puede negar que SublimeText tiene un largo camino recorrido y se nota con su uso. Estoy consciente de que no uso ni la mitad de las cosas que ofrece.

El hecho de que haya que pagar una licencia por SublimeText no es problema, se puede usar sin ella. Es un excelente editor, posiblemente el mejor que he usado hasta ahora, pero todo queda a gusto y elección de cada quién. Por ahora uso ambos, y así voy viendo la evolución de Brackets, que promete bastante.