Ya trabajo con HTML5 CSS3 JavaScript y jQuery, ¿qué tecnologías como Sass puedo aprender para acelerar mi proceso de desarrollo?

Todo el mundo sigue diciendo que gruñido / trago aceleraría su proceso de desarrollo. Creo que eso está mal. Si esta pregunta es sobre cómo construir productos más rápido, entonces no lo obtendrá agregando una herramienta de construcción con mucha configuración. Las herramientas de construcción como gruñidos / tragos surgen de la necesidad y casi seguramente ralentizan las cosas.

Están sucediendo algunas cosas en este momento que he notado que han acelerado el desarrollo de manera significativa.

1. Paquete web
2. Nueva versión de javascript (Ecmascript6,7, 2015 … etc.) usando babel
3. Reaccionar
4. Flujo (específicamente Redux)

¿Por qué un sistema como este es más rápido para el desarrollo?

1. Webpack elimina la necesidad de herramientas como gruñir y tragar. Esto le libera de la necesidad de escribir herramientas de compilación y ejecutarlas cada vez que cambie el código. Algunas personas discutirán con eso y dirán que hay observadores que pueden ayudar. Todavía no estoy de acuerdo, la construcción es lenta. Webpack hace cosas a pedido, eso es lo que quieres.

2. Babel y las nuevas versiones de javascript simplifican muchas tareas comunes que normalmente quieres hacer. ¡Oh, quieres clases reales y no quieres jugar con la herencia prototípica ahora que lo obtienes! No quiero escribir la palabra “función” 300 veces al día, sí, lo tenemos. ¿Quieres bucles que hagan lo correcto? ¡No hay problema! ¿Desea bloquear el alcance para que no tenga que preocuparse por todas las estupideces de las que se queja su peluquero? Sí, también tengo eso.

3. React elimina la necesidad de jQuery más o menos. También reúne HTML y JS de una manera que tiene sentido.

4. Flux / Redux, le da a su aplicación alguna estructura. Te dice dónde poner tu código. Te dice cómo construir. Hace que cosas como escribir “deshacer / rehacer” sean realmente fáciles.

Reescribimos una aplicación completa con 1 desarrollador en el tiempo que le tomó a 4 desarrolladores hacer lo mismo. “Reelaboramos” otra característica en aproximadamente dos semanas para usar React. La conversión es rápida, y escribir características futuras en esta pila se sentirá increíblemente refrescante.

Cómo empezar:

– Instalar nodo: creationix / nvm

– Instalar yeoman `npm install -g yo`

– Instale este generador de código: generator-redux `npm install -g generator-redux`

– Inicie un nuevo proyecto: `yo redux` (siga las instrucciones)

– `npm start`, escribe un código y mira cómo se recarga en tiempo real.

Sass es un gran comienzo. Puede ver el lenguaje precompilado en su conjunto:

SASS, MENOS, Stylus, Brújula. También puedes mirar Jade, HAML y Coffeescript.

También me centraría en Grunt o Gulp: son más o menos lo mismo. Pero esencialmente son administradores de tareas. Administran las tareas que nosotros, como desarrolladores web, tendríamos que hacer manualmente. Actualizar navegadores, compilar SASS, minificar, comprimir, etc. ¡Habilidad realmente valiosa para tener!

Comience con la tarea de automatización que encuentre repetitiva, hay dos bibliotecas excelentes para este puprose:

• El JavaScript Task Runner
• el sistema de compilación de transmisión

Para acelerar el desarrollo

• Sass or Less: le da a css más poder
• coffeescript: elimina la necesidad de escribir caracteres repetitivos al escribir javascript
• Gulp: genera automáticamente todas las tareas aburridas. Por ejemplo, convierte sass a css, coffeescript a js. Concatena todos los archivos que deben ser: js / css, optimiza la imagen. Genera un servidor y recarga el navegador cuando ocurren cambios. Y mucho, mucho más.

ES6, 7, … Si aún no está utilizando funciones emergentes y compilando de nuevo a ES5 con Babel, comience hoy. El paso de compilación es como un polyfil para calzar las características basadas en estándares futuros.

Git, Gulp (o algún otro sistema de compilación), una base de datos relacional o de documentos (recomiendo MongoDB, una base de datos de documentos) y una herramienta de prueba (como Jasmine).