FrontEnd Development

Front-End Development

Front-end development generally refers to the coding of the systems you see. This means the code that delivers the content from the back-end systems to the user. The front-end developer takes the designs that were done and turns them into views.

Very often, especially nowadays, there is overlap between front-end and back-end for front-end developers because in order to see the data in a meaningful way the front-end developers benefit from being able to tap into the data to deliver information.

Front-End Developer Tasks

What this often means for SaaS development is that your front-end developer can take the designs your designer did and turn them into something you can click through and load as a web page, even if there is no functionality behind them.

The front-end developer could make the view of a calculator, but when the user clicks on the buttons, nothing would happen. In reality, they could very often do more than this, but it's a good example.

Starting up Front-End development

When your designs are done, it’s time to give them to your front-end developer. This developer can work in parallel with back-end development, but since the book has to be written linearly, we’re starting here.

What the front-end developer needs to do their job:

• The Information Architecture - with explanations of features, pages, elements, etc.

• Content - this is the text that goes on the page. Remember, web pages are built around content, not content around design!

• Wireframes and/or Flows - so they can see what the page should look like

• Style guide - so they know what different features should always look like and have consistency.

• Project Plan - This is a set of deadlines and explanations of who will have what done when that the other team members need to progress. Remember, developers are optimists! Give them deadlines, but plan on them missing the deadlines by at least 20%. Project deadlines are set up as part of the Project Plan. More on this in the Managing your team section.

• Management - With multiple team members doing different kinds of jobs and relying on one another, even the most experienced and responsible developer benefits greatly from help getting what they need from other team members and coordinating timelines so they are not waiting.

• Regular Meetings & Communication - Even if everything is planned perfectly, there will be questions and things will change.

Saving Time

The more information a front-end developer has, the less they will come back to you with questions. This is where the flows, designs, and information architecture come in. The front-end developer will take these pieces of information and develop pages and views from this information and deliver them to you for review and revisions.

PROTIP: At each step down the process, the cost of making changes goes up. So get as much as possible finalized before coding begins. Changes during coding can crush an MVP build budget!

To make a front-end code change often takes a lot longer than making a change in a graphics editing system, like the one your UX designer is working with. So do all your designs there before getting into coding. In addition, making logic changes have far reaching effects, so make sure you’re happy with the system the front-end developer is doing BEFORE you hand it over to the back-end developer.