Notepad + + — —

Darío Ruellan

about.me/darioruellan

@ecimtech / @sfidastudios

programo desde hace 30 años

en HTML desde hace 20 años

Programo desde hace 30 años

Programo tecnologías de Internet desde hace 20

Cuando pedí mi primer acceso a Internet, me dieron un diskette donde venía esto...

En el diskette venía esto:

+ winsocket + magia y más magia...

Al parecer eso funciona con esto...

Y funciona con esto:

Primero una advertencia

Warning

Voy a hablar de muchos editores, pero no de todos

¡Si se les ocurre algún editor interesante que pasé por alto, me pueden decir!

Nop, tampoco VIM / EMACS → https://xkcd.com/378

Un montón de editores van a quedar afuera

Y funciona con esto:

En Windows, busqué la mejor herramienta para manejar texto sin formato

Bloc de Notas

Había que buscar algo mejor

EditPlus

Todavía hoy en día uso Editplus

Encoding / Format / case

Regex search & replace multifile

Algunas herramientas de editores especializados

Pero lo más revelador para mí ...

¡Colorización de código!

Colorización de código

Lindo visualmente pero hay algo más

Mejor interpretación del código

¡Vaya! es como que quiere ayudarme

Por ejemplo, algunos temas que usé en Eclipse

Símbolos oscuros monocromos

Colorización de tags, elementos y propiedades

Separación de código con distintos contrastes

Separación de código cromática, con paletas

Allaire HomeSite

Uno de mis editores favoritos hasta que lo compró Macromedia para integrarlo en su producto Dreamweaver

Editor especializado en HTML

Validador de código y tabla de propiedades

Podías aprender mientras trabajabas el código

TopStyle

Otro de los editores de Nick Bradbury

Uno de los editores que empezaron a surgir especializados en Frontend

Mejor selector de propiedades CSS y preview

Es la preview la que evolucionó en una vertiente de editores

Branching

WYSIWYG

Cambio de ámbito. El desarrollo frontend es ahora parte del diseño.

No necesariamente tenías que ser desarrollador para crear una página, sólo saber usar la herramienta

Herramientas de creación enfocadas a un público particular. Ej:empresas.

HotMetal Pro

Hotmetal Pro incluía una interesante vista híbrida

Fue comprado por Corel y convertido en un editor XML

Realmente intentaba congeniar dos vertientes, que era inevitable se separaran

Microsoft Frontpage

Parte de la suite Office. Destinado principalmente a sectores empresariales, se popularizó entre usuarios

Componentes ActiveX y tecnologías de MS. Soporte para propiedades exclusivas de IE

De hecho, el código resultante era tan propietario que no terminaba de funcionar bien en otros navegadores, y no podía ser editado por otro programa

Netobjects Fusion

Claramente enfocado a competir con Microsoft FrontPage

No pretende se tenga acceso al código fuente para nada, ni siquiera usa HTML como formato de archivo

El trabajo se compila a HTML y se publica

Permite definir acciones y animaciones

Complementos avanzados, como galerías, carritos de compra y animaciones Javascript

Casi un generador de páginas estáticas

Macromedia Dreamweaver

Dreamweaver comenzó como un editor con 3 modos: código, pantalla partida, wysiwyg

Emitía un código moderamente prolijo (sobre todo comparado con Frontpage) y era respetuoso con los estándares

Macromedia Dreamweaver

Macromedia supo potenciarlo hasta convertirlo en un editor de referencia

Poco a poco se fue integrando en el pipeline de los estudios de diseño

Macromedia Dreamweaver

8 años después, la UI y el editor se habían convertido en una herramienta sumamente compleja

Todavía se podía editar y desarrollar código, pero la estrella era la UI WYSIYWG

Microsoft Expression Web

Microsoft Expression es una copia bastante aproximada de Macromedia Dreamweaver

Pero también empezó a incorporar herramientas interesantes, como la Super View

WYSIWYG Pros

• Feedback inmediato del diseño.
• Posibilidad de realizar mockups y prototipos rápidos con una sola herramienta.
• Se puede variar el formato y la composición del código resultante muy facilmente.
• Toolbox: elementos con controles y propiedades exclusivas.
• No es necesario ser un desarrollador experto para producir trabajos de calidad ...
• ... pero si lo sos podés también trabajar sobre el código

¿Es entonces la herramienta definitiva de frontend?

¿Es entonces la herramienta definitiva para frontend?

No porque...

• El feedback visual no es exacto al resultado final en un navegador real.
• El código final es tan bueno como el desarrollador de la aplicación.
• Los recursos están limitados por la propia herramienta.
• Modificaciones directas al código pueden ser sobreescritas o perderse en la composición final.
• Los tiempos de actualización pueden ser largos.

Software como Microsoft Expression Web solucionaron el tema del feedback inexacto con previews

Pero no deja de ser lo mismo que abrir el navegador web

Mientras Tanto ...

Komodo Editor

Uno de los primeros editores realmente multilenguaje y multiplataforma

También uno de los primeros en permitir temas globales, que afectan todo el editor, no sólo el área de edición

Pero sobre todo...

Code completion & Intellisense

Ya otros editores venían ofreciendo "code completion" & "code hinting"

Pero "code intellisense" o "code intelligence" permitía recibir sugerencias y documentación basadas en tu propio código

Con todo esto ya estamos listo para ...

The IDE

Eclipse / Aptana Editor

Vuelco de las herramientas de programación clásicas al desarrollo de frontend y backend

Eclipse nació para la programación en Java, pero pronto se convirtió en un entorno para desarrollo de todo tipo

Este es Aptana, plugin de Elipse específico para el desarrollo web

IDE Codegasm

Como editor

• Colorización
• Documentación y ayudas
• Sugerencias (code hinting)
• Auto-completado basado en contexto (context-aware code completion)
• Auto-completado basado en el proyecto (code inteligence/intellisense)
• Validación basada en contexto (linting)

IDE Codegasm

Como entorno

• Debugging
• Deploy
• Local/Remote sync
• Varios plugins y herramientas de colaboración

Historial y comparación de código con/sin versionado

En el caso de Aptana tenías también live preview, pero no funcionaba con todos los browsers

¿Qué más se podría desear?

¿Es el entorno perfecto?

¿Es entonces el entorno perfecto?

¡Nope!

• Sumamente complejo
• Tiempos de carga muy lentos
• Pobre desempeño y escalabilidad
• Usualmente monolítico o complejo de extender
• Ciclos de actualización largos

Muchas veces había discrepancias entre los editores

Algunos eran hackeables por el usuario, como Eclipse, pero tan complejos que no valía la pena

Algunos de estos aspectos fueron mejorando, otros empeorando, pero sucedió algo...

Sublime Text Editor

Volviendo a las bases, un editor que sea bueno editando

Rápido / moderno / innovador

Extensible a base de plugins

¡Plugins!

• Sintaxis específicas
• Snippets / hints
• Anotaciones
• Bookmarks
• Validaciones
• Intellicode

Sublime Text ofrece una excelente base de extensión para los plugins

Todo esto y mucho más lo podemos obtener con plugins de terceros

Intellicode en Sublime es un port de Komodo Edit

¿Es el entorno perfecto?

¡Plugins!

SublimeGit / Sublime Linter 3 / jQuery Completions / CSS Extended Completions / GitGutter / Bracket Highlighter / Git Conflict Resolver / DiffView / Sublime SFTP / Color Highlighter / DocBlockr

Hay incluso un plugin experimental que incorpora la intellisense de Komodo

¿Es el entorno perfecto?

¿Ahora si tenemos lo que queremos?

No :(

La idea es buena, pero...

Nope x1

Ciclos de actualización lentos

Los ciclos lentos eran un problema para la sintaxis y complementos de CSS y JS

Sublime movió ahora estas extensiones a su propio repo para ayudar a mantenerlas actualizadas

Nope x2

Los plugins son creaciones de terceros

Los plugins pueden estar hosteados por terceros, con ciclos de actualización propios

Will Bond y su package control. No es un repositorio centralizado pero un índice

(Recientemente Jon Skinner reconoció el valor de esto y contrató a Will)

Nope x3

Pobre integración entre plugins

Plugins que realizan tareas similares en distintas instancias y que terminan compitiendo entre sí o son muy diferentes

Solución

Metaplugins

Un metaplugin, es un plugin que sirve de plataforma para que otros plugins agreguen funcionalidades

Sublime Linter, el mejor ejemplo. En Atom, Autocomplete Plus, que es ahora parte del core

Nope x4

Soporte y continuidad de desarrollo

La mayoría de los plugins son open source, usualmente mantenidos por un desarrollador

Pueden desaparecer o quedar abandonados en cualquier momento

Sublimerge un buen ejemplo de plugin pago

En Atom, Autocomplete Plus, que es ahora parte del core

Nope x5

Los plugins son tan potentes como la API

Y en muchos casos esta API se queda corta para integrar tal o cual funcionalidad

En tal caso, o se espera tener esa funcionalidad, o se desarrolla en el editor

Hack the Editor

Estos dos editores nacieron de la premisa de emplear tecnologías en su desarrollo

Salto importante. Ahora los desarrolladores de frontend están realizando sus propias herramientas

Brackets Editor

Brackets es un proyecto interesante por estar enfocado en frontend

Los recursos más interesantes que provee son el "quick edit"" y el "live preview"

La API para las extensiones es muy completa, y permite crear UI muy complejas, pero son poco consistentes

Brackets Editor

La API para las extensiones es muy completa, y permite crear UI muy complejas

También produce plugins muy inconsistentes entre sí

¡Extensiones!

Brackets Git / QuickDocsJS / jQuery quickdocs / colorHints / FuncDocr / Interactive Linter / CSS Class Code hint / New Project Extension / eqFTP / Extension Ratings

Brackets GIT y eqFTP son realmente excelentes

Atom Editor

Atom surgió como un proyecto de Github, y está claramente inspirado en Sublime Text

Es un editor más orientado a la programación, pero tremendamente flexible

Atom Editor

Permite plugins muy complejos, que pueden hacer uso de muchos recursos externos

¡Paquetes!

Linter / Pigments / Minimap / Atom Ternjs / Atom HiDPI / Merge Conflicts / Dockblockr / Project Manager / Remote Sync / Aligner / (Autocomplete Plus)

Aligner es interesante. Es un metaplugin que permite extender la sintaxis

Brackets Editor

Atom Editor

y soluciona bastante elegantemente las inconsistencias

Sublime Text

Atom Editor

y el overload de la UI

¿Está todo bien ahora?

Mnop

Nop #1

Seguimos necesitando una buena cantidad de plugins si queremos un entorno bien afinado

Solución

¡Crear tu propio editor!

Nucleus

Para React Native, Hack y Flow.

PlataformIO

Plataforma para IoT

Visual Studio Code

Basado en Electron como framework crossplatform

Enfocado a aplicaciones web

Usa Monaco, el editor web propietario de Microsoft

Visual Studio Code

• Code completions
• Code hinting
• Code Intellisense
• Snippets
• Extensiones

El debugger es sumamente completo

Y el codehinting es contextual, de forma que se minimizan las largas listas de recomendaciones

SublimeGit / Sublime Linter 3 / jQuery Completions / CSS Extended Completions / GitGutter / Bracket Highlighter / Git Conflict Resolver / DiffView / Sublime SFTP / Color Highlighter / DocBlockr

¿Se acuerdan de estos paquetes para Sublime Text?

SublimeGit / Sublime Linter 3 / jQuery Completions / CSS Extended Completions / GitGutter / Bracket Highlighter / Git Conflict Resolver (parcial) / DiffView / Sublime SFTP / Color Highlighter / DocBlockr (parcial)

La mayoría ya están integrados en VS Code

Según sus desarrolladores, la idea es conseguir algo a mitad de camino entre un editor y una IDE

Nop #2

Son todos editores basados en tecnologías web

Que tan "nativos" se sientan depende de que tan bueno es el renderizado del motor

Siguen teniendo problemas de escalabilidad

Pero...Todos estos editores usan tecnologías web

No podría yo...

¡SI!

¡Todos a la nube!

Mozilla Skywriter Bespin

Bespin fue uno de los precursores del editor de código en la nube

Tenía incluso capacidades colaborativas multiusuario

El core fue la base para la creación de Cloud9

Tenemos una amplia selección

Codebox

Codebox

• Lo instalás con un simple npm install -g codebox
• Hinting, completado, colorización para CSS / JS / HTML / PHP / Etc.
• Multiusuario colaborativo
• Integración con GIT
• Consola BASH
• ¡Bugs de regalo!

Tooling

Estas dos herramientas cambiaron la forma en la cual nuestros editores interactúan con el código

Ya no dependemos de un editor o un entorno IDE particular para realizar cómodamente optimizaciones del código o un deploy

El editor asegura solamente un nexo y provee la interfaz para la herramienta

• GIT ⇾ historial + versionado
• JSHint ⇾ validación
• BEAUTIFY ⇾ estilo
• LIBSASS ⇾ preprocesado
• BABEL ⇾ compilado
• GULP / GRUNT ⇾ orquestadores

Todas estas herramientas no dependen de un único editor

De hecho, no necesitan ni plugins ni extensiones, pero el editor provee un entorno y una interfaz que permite su uso sea más accesible

Su configuración, viaja con el proyecto, no con el editor

• GIT ⇾ .gitconfig / .gitignore
• JSHint ⇾ .jshintrc
• BEAUTIFY ⇾ .jsbeautifyrc
• LIBSASS ⇾ .sass-lint.yml
• BABEL ⇾ .babelrc
• GULP / GRUNT ⇾ .gulpfile / .gruntfile

Incluso VS Code usa internamente Gulp y reconoce la existencia de .gulpfile, permitiendo disparar los tasks directamente desde el editor

Emmet LiveStyle

Incluso se puede trabajar a la inversa: que el navegador (o la consola de inspección) sea tu editor de cabecera

El impulso de trabajo en equipo, especialmente de forma remota, es lo mejor que le pudo pasar a los desarrolladores, pero sobre todo, dejar que cada uno trabaje como más le gusta

Darío Ruellan

about.me/darioruellan

@ecimtech / @sfidastudios

https://github.com/druellan/notepadplusplusminmin

https://github.com/druellan/sublimetext-package-list

https://github.com/druellan/atom-package-list

https://github.com/druellan/vscode-extensions-list