Share
Los desarrolladores son un grupo delicado, casi hasta el punto de la superstición y la magia vudú, cuando se trata de sus herramientas. Si tomas en cuenta la cantidad incontable de cosas que usamos para crear aplicaciones (Node, Grunt, Fiddler, LESS, EC2, etc.), no es de extrañar por qué, una vez que encontramos un buen combo, lo guardamos como una ardilla con su último nuez. Y tiene sentido, ya que su entorno de desarrollo es muy importante para su éxito.
Lo que creo que hace de Visual Studio un gran IDE para el desarrollo web es una extensión llamada Web Essentials.
La única herramienta que, en mi opinión, siempre ha sido una preferencia increíblemente personal y de opinión es su IDE o editor. Todo lo que importa, desde pulsaciones de teclado y soporte de idiomas hasta complementos y temas. Todo tiene que fluir bien dentro de su estilo de desarrollo y, lo más importante, debe ayudarlo a resolver los problemas a los que se enfrenta sin hacer que salte a través de los aros..
Visual Studio es uno de los mejores IDE disponibles, incorporando fácilmente una gran cantidad de características que hacen que los desarrolladores tengan mucho éxito. Pero realmente no se ha considerado como un editor de "desarrollador web" porque tradicionalmente se enfocó en la plataforma de Microsoft con muchas características que hicieron que la codificación de esa plataforma fuera increíblemente fácil. Y, bueno, muchas de esas características no se aplican realmente a los desarrolladores que no estaban dirigidos a una plataforma de Microsoft.
Con Microsoft abrazando con entusiasmo HTML5, CSS3 y JavaScript para el desarrollo web y de aplicaciones de Windows 8, ha habido un montón de cambios con Visual Studio 2012 que lo convierten en una herramienta increíble para la creación de la web. Esto es lo que planeo cubrir a continuación, y espero que lo veas desde una perspectiva muy diferente.
Una de las mejores características del Explorador de soluciones es que puedo buscar un activo específico dentro de toda la solución.
Recuerdo haber mirado Visual Studio por mí mismo hace muchos años y no haberlo tomado en serio. No fue porque no era un IDE poderoso. Simplemente se sintió enfocado directamente en la construcción de aplicaciones y sitios .NET, y de hecho, lo era. Eso no es algo malo porque si le preguntas a cualquier desarrollador de .NET, Visual Studio es la mejor opción para sus necesidades, ya que proporciona un rico entorno de edición con capacidades integradas que otros editores simplemente no tienen de forma predeterminada. Y para aquellas características que faltaban, el ecosistema de extensión es tan completo como encontrará. Así que podría entender totalmente por qué a los desarrolladores de .NET les encanta Visual Studio.
Sin embargo, en lo que respecta a la web, las tecnologías como HTML, CSS y JavaScript fueron una idea de último momento, básicamente ciudadanos de segunda clase. Y el soporte de jQuery, que era especialmente importante para mí, era otra cosa que Visual Studio no era compatible. Tener un soporte integrado para las tecnologías y marcos básicos, pero críticos, de la web era un requisito clave y sin ellos Visual Studio, para mí, era DOA..
Afortunadamente, Microsoft dejó en claro que estas tecnologías eran increíblemente importantes para su dirección, y eso dio inicio a un montón de actualizaciones que comenzaron a dar forma al camino de Visual Studio hacia un mejor soporte para los desarrolladores web, especialmente los desarrolladores front-end. Esto incluyó soporte para HTML5, CSS3 y JavaScript, así como el envío de jQuery con Visual Studio, todas las actualizaciones importantes que me hicieron reconsiderar el IDE para el desarrollo web cuando me uní a Microsoft.
Una de las primeras cosas que hice cuando comencé a usar Visual Studio en 2010 fue crear una plantilla basada en HTML5 Boilerplate. Lo hice porque sentí que las plantillas predeterminadas de Visual Studio no coincidían con lo que yo quería, y Boilerplate es bastante similar a la plantilla de goto para la mayoría de los archivos nuevos. Esto me funcionó muy bien porque tiendo a crear muchas páginas de prueba de concepto y tener que crear un proyecto completo no sería ideal.
Visual Studio 2012 ahora aborda esto al permitirle crear un esqueleto HTML muy simple que está más cerca de lo que la mayoría de los desarrolladores web desearían:
Esto se hace a través de un simple "Archivo-> Nuevo archivo" y seleccionando "Página HTML" de las opciones de la plantilla. Lo mismo se puede hacer para las hojas de estilo o los archivos JavaScript, aunque las plantillas son barebones.
Esta plantilla es mucho menos completa que HTML5 Boilerplate, pero lo importante es recordar que es un punto de partida que no es de Microsoft (lo que es importante para mi desarrollo web).
Y como describí en mi blog, puedes crear tus propias plantillas con características extendidas.
Sé lo que estás diciendo: "Sí, eso es lindo Rey, pero muéstranos algo más que un esqueleto HTML."Estoy llegando. Paciencia, saltamontes.
La gestión de una gran cantidad de código de sitio web es donde creo que Visual Studio realmente brilla. Descargué el proyecto de marco TodoMVC de Addy Osmani y Sindre Sorhus porque es un conjunto bastante grande de archivos con los que trabajar. Para absorber el sitio, es tan simple como hacer "Archivo-> Abrir sitio web ..." y elegir un directorio:
Esto me da lo que se llama una "Solución" que ayuda a organizar todos los recursos para mi sitio web y los muestra en un estilo de vista de árbol:
Una de las mejores características del Explorador de soluciones es que puedo buscar un activo específico dentro de toda la solución. Entonces, si quisiera encontrar dónde está jQuery, solo puedo ingresar el término "jquery" y devolverá una lista de todos los directorios y archivos que coincidan:
El editor en sí tiene las características que espero de un IDE, con elementos tan básicos como los números de línea y el colapso del código para la capacidad de trabajar realmente en un modo de diseño y poner fácilmente sus archivos en modo de pantalla dividida. Una cosa que es imprescindible para mí es una buena información de código, de modo que a medida que estoy creando el código, puedo presentar los atributos. Ya es bastante difícil recordar la sintaxis de todos los lenguajes de programación, por lo que un pequeño ayudante que te diga los atributos es una bendición. VS ofrece esto a través de Intellisense que ahora admite HTML5, CSS3 y JavaScript.
Así que no solo veo los atributos que están disponibles para un elemento, sino que también me muestra los métodos que puedo usar. Tenga en cuenta que en este ejemplo, obtengo Intellisense para el elemento de video HTML5. No soy un defensor del código en línea, pero el hecho de que esté ahí todavía es muy útil.
Para CSS, aún obtienes el Intellisense que incluye la lista completa de propiedades además de una descripción de lo que hace cada una:
Y una vez que haya seleccionado una propiedad, proporciona sugerencias de código para ayudarlo a recordar cómo dar formato a sus declaraciones:
Por supuesto, junto con estas características, VS tiene características inteligentes para hacer que tareas como elegir colores sean triviales:
JavaScript y el DOM también recibieron amor en Visual Studio, siendo un lenguaje de primera clase en el IDE; No más plugins para que sea utilizable. De nuevo, centrándose en Intellisense, VS ofrece soporte completo para objetos, métodos y propiedades de JavaScript y DOM:
El soporte de jQuery se ha incluido desde hace algún tiempo, y el soporte de Intellisense para otros marcos populares se puede encontrar a través de Internet. Y Visual Studio 2012 ahora viene con jQuery Mobile para permitir a los desarrolladores crear sitios móviles.
Aquí hay algo que puede no haber sabido. Visual Studio le permite no solo probar contra los principales navegadores que ha instalado en su sistema, sino que también proporciona una herramienta llamada Page Inspector que es similar a las herramientas de depuración web que se encuentran en la mayoría de los navegadores. Con Page Inspector, puede ver su página en tiempo real y hacer cambios en vivo a CSS y DOM. Una vez que esté satisfecho con estos cambios, puede volver a guardarlos en sus archivos de origen. Por ejemplo, observe cómo he cambiado el texto del tweet en la siguiente captura de pantalla actualizándolo dentro del marcado:
El beneficio obvio de esto es que no necesita abandonar su editor para probar su página y realizar cambios. Y dado que los cambios están ocurriendo en vivo, es una simple cuestión de tomar el código afectado y volver a pegarlo en su código fuente. Esto es posible porque Visual Studio aprovecha el motor de representación Trident de Internet Explorer, así como una versión integrada de Internet Information Server (IIS) para permitirle ejecutar su sitio dinámicamente. Así es, Visual Studio viene con un servidor web (y lo ha hecho por algún tiempo).
Sin duda, esas son características útiles, pero el flujo de trabajo de un desarrollador web es más complejo que solo editar un par de páginas o estilos CSS. Y, honestamente, muchas de las funciones están disponibles para los editores de código, aunque a través de complementos comunitarios..
Visual Studio ha hecho de JavaScript un lenguaje de primera clase..
Lo que creo que hace de Visual Studio un gran IDE para el desarrollo web es una extensión llamada Web Essentials. Es la pieza faltante de un entorno de codificación sólido, ya que agrega una serie de características que son esenciales. Esta extensión amplía Visual Studio al admitir características como:
Y hay mucho más. Mads Kristensen, el creador de Web Essentials, ha hecho un trabajo estelar al destilar lo que los desarrolladores web están usando y llevar eso a la extensión..
Por ejemplo, asegurar la compatibilidad del navegador es una parte crítica de nuestros trabajos, pero con tantas propiedades para recordar, puede ser un poco desalentador recordar en qué funciona. Web Essentials le permite ver el nivel de compatibilidad del navegador para las propiedades CSS:
Y para ir un paso más allá, incluso le dirá cuándo le faltan los prefijos de los proveedores, una consideración importante para garantizar que su sitio funcione en todos los principales navegadores:
Además de permitirle insertar los prefijos de proveedores según sus preferencias de navegador de destino:
Si bien esto solo agregará los prefijos de proveedores faltantes para esta propiedad específica, Web Essentials incluye la capacidad de hacerlo en toda la página y también puede agregar la versión no prefijada faltante de la propiedad para ayudar a proteger su código en el futuro..
Ya que estamos hablando de soporte de navegador, tener que soportar versiones anteriores de IE es un poco difícil, y recordar todos los trucos necesarios para hacer que una página se muestre bien es imposible. Sí, Web Essentials ofrece la posibilidad de realizar hacks específicos para que sus páginas funcionen correctamente:
El cráneo y los huesos cruzados son bastante apropiados..
Los preprocesadores de CSS están de moda y con razón. La capacidad de hacer declaraciones de variables y crear combinaciones en CSS es un gran beneficio, especialmente cuando se administran hojas de estilo grandes. LESS es una de las soluciones más populares. De hecho, hice una encuesta en la que LESS era uno de los marcos más populares en uso. Web Essentials lleva MENOS a Visual Studio para que, al escribir, pueda ver la salida de CSS en tiempo real, a través de una ventana de vista previa:
La ventana de vista previa, junto con el soporte completo del editor y la capacidad de configurar las opciones del compilador, es una gran ayuda para los desarrolladores que desean usar Visual Studio y necesitan soporte MENOS.
Solo he arañado la superficie de las características CSS de Web Essentials. Hay tanta riqueza allí para este artículo..
Visual Studio es uno de los mejores IDEs disponibles..
Como mencioné, Visual Studio ha hecho de JavaScript un lenguaje de primera clase. Sin embargo, faltan algunas necesidades críticas de flujo de trabajo, y Web Essentials las satisface. Por ejemplo, cada desarrollador debe estar alineando su código JavaScript. Es solo una buena práctica y ayuda a prevenir errores comunes de lenguaje. JSHint es una bifurcación muy popular de JSLint creada por Anton Kovalyov y es utilizada ampliamente por los desarrolladores para analizar su código en busca de posibles problemas. Web Essentials incluye JSHint, lo que le permite forzar su código en cualquier momento. También se puede configurar para que borre todo el código en el momento de la compilación..
Como mencioné el tiempo de compilación, Web Essentials también incluye la capacidad de minimizar sus archivos en cualquier momento. Pero va un paso más allá al actualizar los archivos minificados cuando se actualiza el archivo de origen original, y también crea un mapa de origen para ayudar en la depuración más adelante.
A muchos desarrolladores les gusta usar lenguajes específicos de dominio como CoffeeScript y TypeScript. Para algunos, el lenguaje criticado de CoffeeScript lo hace extremadamente atractivo en comparación con la codificación en JavaScript simple. Bueno, esos desarrolladores pueden opinar en VS gracias a Web Essentials. Mads ha agregado soporte para ambos DSL, agregando soporte de vista previa similar que mencioné anteriormente sobre LESS. A medida que escribe en su código de TypeScript o CoffeeScript, puede ver el JavaScript resultante en tiempo real. Y una vez que esté todo listo, Web Essentials puede reducir el código por usted:
Mads también agregó características HTML limpias. Si te gusta la codificación Zen (siempre me ha parecido un poco extraño), entonces Web Essentials te cubrirá. Si escribo esto en VS y presiono la tecla Tab:
div # contentRegion.address
Obtendré el siguiente código:
Eso es genial. No es mi taza de té, pero sin embargo, fresco.
Y mientras estuvo allí, agregó soporte para motores de plantillas del lado del cliente como Handlebars & JSRender, Markdown y un generador de Lorem Ipsum..
Estoy empezando a preguntarme si Mads duerme..
Espero haber demostrado que Visual Studio por sí mismo tiene un gran soporte para HTML, CSS y JavaScript. El equipo de Microsoft ha trabajado arduamente para convertirlo en un IDE de clase mundial para desarrolladores web. Para mí, la pieza esencial que hace que sea mi elección para el desarrollo web es la extensión de Web Essentials. Me proporciona la funcionalidad adicional que necesito para administrar mi flujo de trabajo. Claro, cada desarrollador tiene necesidades diferentes y no estoy diciendo que haya abordado todas las suyas. Sin embargo, espero que haya descrito y demostrado suficientes funciones excelentes para demostrar que VS es más que capaz para el desarrollo web.
Accentsconagua