Photo of a cabin with slogan "Always room to grow"

Flujo de trabajo de desarrollo front-end

19 Junio 2018
Jan Poživil

Quería compartir una serie de breves blogs técnicos que analizaran nuestro flujo de trabajo de desarrollo front-end y destacando algunas de las cosas más útiles que aprendí durante su evolución.

Esta entrada del blog da una breve introducción al tema en general e identifica las cosas que planeo cubrir en las próximas 3-4 entradas de la serie. Consulte el "contenido relacionado" en la barra lateral para ver los enlaces a esas publicaciones a medida que comienzan a aparecer.

Para las personas no iniciadas, cuando hablamos de una "aplicación de front-end" esto evoca algo endiabladamente complejo, pero en realidad solo estamos hablando de cómo estamos tomando el contenido y la funcionalidad y presentándoselo a ti, la persona usuaria, y estableciendo los parámetros de cómo puedes interactuar con diferentes componentes (por ejemplo, flujos de trabajo, comportamientos de navegación, etc.).

En los últimos dos años, he estado desarrollando lentamente un flujo de trabajo que tiene sentido para mí y para Netuxo, permitiéndonos esbozar ideas para componentes y páginas, hacer girar rápidamente prototipos y desplegarlos fácilmente cuando son ajustados a la satisfacción. Esto está produciendo resultados eficientes, de alta calidad y de bajo impacto para nuestrxs clientes, y ha llevado el trabajo inicial de Netuxo en una dirección muy positiva, con la experiencia del usuarix mucho más en el centro.

En la próxima serie planeo ver cómo hacer que los prototipos y Webpack realmente funcionen para ti, los desafíos y sugerencias en la implementación del tema aplicando RESTful vs plataforma nativa, y ofrezco algunos accesos directos y sugerencias que pueden facilitar el desarrollo.

Tecnologías utilizadas
  • HTML5
  • Stylus
  • SCSS
  • LESS
  • CSS
  • ES6
  • jQuery
 
Flujo de trabajo
  • Wire-framing
  • Prototyping
  • Desarrollo del tema
Herramientas
  • Wire-framing => Balsamiq
  • Prototyping => Webpack con BrowserSync, Babel, Animate.CSS, Isotope + imagesLoaded, PrismJS, Slick carousel
  • Tema => suministro de datos a la aplicación de front-end prototipada
 
Enlaces y fuentes útiles: