Hoy os daremos unos consejos sobre IDEs de desarrollo web. Estos consejos están basados en mi experiencia con diferentes entornos de desarrollo para tecnologías web. Los vamos a catalogar en dos grandes grupos Frontend y Backend. Recordar que el Frontend es el encargado de la programación en el cliente como HTML, CSS y JavaScript. Por otro lado el Backend se encargará de la programación del lado del servidor donde podemos encontrar lenguajes como C#, Java o PHP.
Cuando programamos en el Frontend no hace falta IDEs potentes para comenzar a trabajar. Simplemente con el Notepad de Windows y un navegador podemos crear una página web, es muy sencillo. Pero cuando te metes a programar sitios web donde utilizas diferentes frameworks de JavaScript o CSS se hace necesario tener alguna herramienta que nos ayude a programar de una manera más rápida. Hay dos cosas fundamentales a la hora de buscar un IDE para Frontend. Por un lado que nos permita ver nuestro código de una forma amigable con el coloreado de sintaxis, y por otro lado que nos permita añadir de una manera rápida trozos de código o snippets, código que se utiliza de una forma habitual.
Poder ver el código de una manera amigable y con coloreado de sintaxis es poder distinguir, por ejemplo, los comentarios marcándolos con un color diferente , los atributos en el caso de HTML, cadenas de textos, bucles, condicionales, declaración de variables, etc… Os pongo un ejemplo gráfico para que lo veáis.
Cómo podéis ver la diferencia es grande. No es lo mismo verlo en el Notepad que verlo en un editor especializado como puede ser Sublime Text.
Los trozos de código son muy importantes ya que nos ahorra mucho tiempo. En el ejemplo anterior, si lo analizamos más detenidamente, podemos comprobar que es una página web con acceso a la librería jQuery de JavaScript.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>Demo with jQuery</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="Demo project with jQuery"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <style type="text/css"></style> </head> <body> <p>Let the game begin!</p> </body> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> jQuery(function(){ }); </script> </html> |
No hay que fijarse en la sintaxis ni en lo que hace el código. Lo único que quiero que os fijéis es en todo lo que tiene. Pues ese código se ha creado a través de un snippet. Con sólo escribir docjq en Sublime Text y luego pulsar Ctrl + space, te propone una serie de snippets para elegir que te generan el código de manera automática. Esto hace que el IDE tome una potencia increíble. Existen dos maneras de añadir estos trozos de código, crear tu mismo tus propios snippets o descargar un paquete que contenga los snippets que a ti te interesen.
Estas dos opciones serían las mínimas recomendadas para comenzar a desarrollar nuestra aplicación web. Ahora veremos más opciones que debería tener el IDE que elijamos para desarrollar. Estas opciones están más orientadas al desarrollo del lado del servidor, Backend, aunque se pueden aplicar también al Frontend.
La integración con un sistema de control de versiones puede venir bien a la hora de trabajar dentro de un equipo. Esta función se integra en nuestro IDE y te permite, de una manera sencilla, interactuar con tu repositorio ya sea Mercurial, Git, Subversion o el que hayas elegido. Asegúrate de que el IDE que has elegido tiene compatibilidad con tu control de versiones.
Poder crear proyectos a través de una plantilla o template en inglés. Esta opción suele crear los archivos necesarios y la estructura de ficheros recomendada para comenzar con un proyecto utilizando alguna tecnología. Un ejemplo sería crear un proyecto que utilice el framework CakePHP. Es un frameworks muy estricto a la hora de crear la estructura de directorios y los nombres de los archivos que lo componen.
La función de autocompletar es bastante potente. En muchos casos no nos acordamos de cómo se llamaba cierta etiqueta HTML o función JavaScript. Si utilizas un IDE que te proponga y autocomplete la sintaxis estarás ahorrando mucho tiempo ya que, no tendrás que ir a la documentación y asegurarte como se escribe lo que estás intentando programar. Dentro de la función de autocompletar existen diferentes vertientes. Hay IDEs que con solo escribir una letra ya te está proponiendo la sintaxis que podría ir en esa línea, como por ejemplo el Intellisense de Visual Studio Community. Hay otros IDEs, donde es necesario pulsar una combinación de letras para que te proponga el código que podrías insertar. Esta función es muy interesante a la hora de programar en un lenguaje orientado a objetos. Si nosotros creamos una clase tendríamos que tener la opción de autocompletar con la clase que hemos creado. No todos los IDEs tienen la capacidad para realizar este autocompletado. Veremos algunos al final del artículo.
Algo que al tratarse de desarrollo web muchas veces no se tiene en cuenta es poder ejecutar un proyecto en modo debug. Este modo permite ejecutar nuestro código sentencia a sentencia e incluso en algunos casos hacer modificaciones en caliente es decir, mientras se ejecuta nuestra aplicación. Es una herramienta que cuando la conoces, no puedes desarrollar sin ella.
Por último debemos tener en cuenta poder buscar, remplazar y refactorizar nuestro código de una manera fácil y segura. Tenemos que tener la opción de buscar dentro de un archivo o en una carpeta seleccionada al igual que remplazar cualquier cadena de texto. Refactorizar nos permite renombrar variables, funciones, clases, etc… de todo nuestro proyecto, incluso en los comentarios.
En términos generales estas son las capacidades que tendríamos que observar en un IDE a la hora de elegir uno u otro.
Aún con todo lo expuesto anteriormente, es imposible recomendar un IDE sin saber que lenguaje de programación se va a utilizar. Dependiendo del lenguaje de programación que utilicemos optaremos por un IDE u otro así que vamos a hacer una clasificación de los IDEs según la tecnología de desarrollo en la parte del servidor.
También hay que tener en cuenta tu experiencia con un IDE. Hay mucha información con respecto a los IDEs informando cuales son mejores, pero la verdad es que lo único que vale es tu experiencia con cada uno de ellos. Prueba todos los que puedas y alguno más, eso te ayudará a elegir el que mejor se adapte a tu manera de programar y de entender el manejo de un software porque, no hay que olvidar que estamos hablando de un software para ayudarnos a programar.
Por último comentaros que solo voy a hablar de entornos que ofrecen alguna versión gratuita. Estoy seguro que hay IDEs muy buenos que son de pago y que ofrecen muchas funcionalidades. Mi recomendación es que se empiece siempre por los más sencillos y gratuitos.
PHP
Yo contemplo dos opciones válidas y que son las que yo utilizo. No quiere decir que sean las mejores pero si las que a mi me han servido.
- Netbeans
Aunque originalmente está pensado para trabajar con Java, también puede ser configurado para trabajar con PHP a través de diferentes plugins. Es un IDE muy completo que además da soporte para HTML, CSS y JavaScript. Puedes instalar plugins de diferentes frameworks de PHP como CakePHP y Yii. Algo a tener en cuenta es que hay plugins para trabajar con los frameworks de JavaScript jQuery y AngularJS. - Eclipse
El todo poderoso Eclipse abarca una inmensa cantidad de lenguajes de programación entre los que destaca Java. Al igual que Netbeans puedes incorporar plugins para trabajar con diferentes frameworks de PHP y de JavaScript. - Sublime Text
Un editor muy ligero para trabajar con cualquier tipo de archivos. Tiene un gestor de paquetes para instalar funcionalidades extra. Puedes programar en multitud de lenguajes y existen plugins para PHP, JavaScript, CSS, HTML, etc. - Aptana
IDE de código abierto orientado exclusivamente al entorno web. Lo conozco muy poco pero resulta muy potente si solo vas a desarrollar aplicaciones web con PHP. - Visual Studio Code
Aunque está en una etapa temprana de desarrollo, ha sido presentado este año, promete ser un IDE de referencia para muchos lenguajes de programación. Incorpora muchas mejoras y puede ser un buen complemento para el desarrollo web con PHP. - WebMatrix
Con esta herramienta tenemos el pack completo. Por un lado el servidor como ya vimos en el capítulo del podcast. Por otro lado tenemos un IDE para desarrollo web que soporta ASP.NET, PHP, JavaScript, jQuery, NodeJs, HTML y CSS - Atom
Muy parecido al Sublime Text. Es un editor muy ligero con una gran galería de plugins a través de un gestor de paquetes.
JAVA
Sin duda alguna aquí no tenemos tanto donde elegir. Nos vamos a ceñir a tres opciones que son lo suficientemente interesantes como para no tener que seguir buscando.
- Netbeans
Ya hemos hablado que puede crear sitios web con PHP, pero su punto fuerte sin duda alguna es Java. Aquí se desenvuelve de una manera natural. Java y Netbeans están hechos el uno para el otro. - Eclipse
El primer y gran IDE para Java. Lo tiene todo para que desarrolles tus proyectos con esta tecnología. Se puede usar indistintamente Netbeans y Eclipse. - Intellij
Es un IDE pensado para Java. Hasta hace bien poco solo disponía de una versión de pago pero han lanzado una versión de código abierto (Community Edition) que permite hacer grandes cosas aunque no tiene la potencia de Netbeans y Eclipse, aunque su versión de pago es igual o más potente, pero es de pago.
.NET
Cuando hablamos de desarrollar una aplicación web con .NET solo tenemos un producto en la mente, Visual Studio Community. Quizás uno de los mejores IDEs del mercado, el tiempo me dará la razón, y la apuesta por Microsoft de elevarlo al entorno de desarrollo de referencia está causando efecto.
Como ejemplo os vamos a dejar una imagen donde se muestra la tendencia de búsquedas en Google, un índice más que fiable para saber por donde debemos tirar a la hora de elegir un IDE de desarrollo.
Esta gráfica está obtenida de Google Trends. Se observa como el más importante es Eclipse pero la situación está cambiando y el entorno de desarrollo de Microsoft, Visual Studio, se está acercando mucho y no tardará en superarlo si las cosas siguen como están sucediendo hasta ahora.
Para finalizar vamos a hablar de Wysiwyg (What You See Is What You Get) Lo que ves es lo que obtienes en español. Es un término que se refiere a los editores de código, sobre todo HTML, donde escribes un documento viendo el resultado final. Con estos editores no te hace falta saber nada de programación HTML, CSS e incluso JavaScript. Yo no recomiendo, en ningún caso, utilizar estos editores por varias razones.
- Nunca aprenderás a programar si no te enfrentas a un documento vacío donde tengas que plasmar tu código.
- No sabes que código te está escribiendo el IDE. En muchos casos puede ser código obsoleto e innecesario que se podría optimizar de alguna manera. Esto repercutirá en la velocidad de carga de tu sitio web.
- Tendrás una dependencia directa de ese software. Imagínate que cambian el estándar HTML5 a HTML6. Tendrás que esperar a que el IDE actualice su versión para utilizar las nuevas funcionalidades. Hasta entonces seguirás con la versión antigua.
- Resultan demasiado pesados comparados con algunos IDEs como Sublime Text o Atom, y ya puesto a elegir, siempre hay que elegir un IDE para programadores y nunca para diseñadores.
Si realmente no es tu guerra desarrollar sitios web programando, hay opciones mucho más óptimas para crear tu sitio web sin aprender a programar. Una de ellas es WordPress, el CMS más utilizado del mundo.
Si con estos argumentos no te he convencido, te dejo a continuación algunos IDEs que utilizan Wysiwyg, eres libre de utilizarlos como quieras.
En resumen, os aconsejo que utilicéis un IDE con el que os sintáis cómodos, que lo conozcáis a fondo y saquéis el máximo partido que podáis de el. Está claro que unos IDEs funcionan mejor que otros pero la diferencia puede ser mínima. Elegir vosotros mismo vuestro propio IDE a base de probarlos y cuando realmente encontréis uno que este a vuestra altura no lo cambiéis, seguir con el digan lo que digan las estadísticas y los gurús de la programación. Al final el que va a tener que programar eres tú.
