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

Front-end development workflow

19 June 2018
Jan Poživil

I wanted to share a series of short technical blogs looking at our front-end development workflow and highlighting some of the more useful things I have learned during its evolution.

This blog post gives a bit of an introduction to the topic generally and identifies the things that I plan to cover over the next 3-4 entries in the series. Look to the "related content" in the sidebar for links to those posts as they start to appear.

For the uninitiated, when we talk about a "front end application" it conjures up something devilishly complex, but really we are just talking about how we are taking content and functionality and presenting it to you, the user, and setting the parameters of how you can interact with different components (eg form workflows, navigational behaviours, and so on).

Over the past two years I have slowly been developing a workflow that makes sense for me and for Netuxo, enabling us to sketch out ideas for components and pages, rapidly spin up prototypes and easily deploy when tweaked to satisfaction. This is producing efficient, high-quality, low-impact results for our clients and has taken Netuxo's front-end work in a very positive direction, with user experience much closer to its heart.

In the coming series I plan to look at how to make prototyping and Webpack really work for you, challenges and tips in RESTful vs native platform theme implementation, and offerr some shortcuts and tips that can make development work just that little bit easier.

Used technologies
  • HTML5
  • Stylus
  • SCSS
  • LESS
  • CSS
  • ES6
  • jQuery
 
Workflow
  • Wire-framing
  • Prototyping
  • Theme development
Tools
  • Wire-framing => Balsamiq
  • Prototyping => Webpack with BrowserSync, Babel, Animate.CSS, Isotope + imagesLoaded, PrismJS, Slick carousel
  • Theming => supplying data to the prototyped front-end application
 
Useful links and sources: