Front End Development Guide
Common Tasks of a Front End Developer
- Optimizing the user experience.
- Developing and maintaining the user interface.
- Implementing design on mobile websites.
- Creating tools that improve site interaction regardless of the browser.
- Managing software workflow.
The Discipline of Frontend Architecture
Frontend architecture is a collection of tools and processes that aims to improve the quality of frontend code while creating a more efficient and sustainable workflow.
Design
The overall look and feel of the website is still squarely in the hands of skilled designers, but the frontend architect crafts the frontend approach and design system philosophy. By designing a system all frontend developers are going to work within, the architect sets a clear vision of what the end product, the code, will look like.
Planning
With a clear design in mind, the planning stage involves mapping out the development workflow. What steps will a developer take to write a line of code and see that code through to production?
Oversight
Frontend architecture is never a “set it and forget it” proposition. No design or plan is ever perfect or complete. Clients needs (as well as the needs of developers) will change and evolve over time, and a process that was working well in one phase of the project might need to be revisited later to improve efficiency or reduce errors.
Foundation of Frontend Architecture
- The Code
- The Process
- The Testing
- The Documentation
Workflow
Frontend Workflow
let’s look at the importance of a good prototyping process and ensuring that your team’s frontend developers are all set up to succeed. Many of these topics are cross discipline, but all of them have a profound impact on the productivity and happiness of your frontend developers. Now, we can’t make any assumptions about what our developers know or are already equipped with, so our frontend workflow starts as soon as a new developer is hired. It is important to understand all of the steps required for a new developer, sitting down in front of code for the first time, with a new laptop, to write their first line of quality code.
Provisioning
The first step for any new developer is to install the necessary software and create the required setup for your code environment. This typically involves installing and setting up your favorite code editors, installing a few products, and downloading your favorite browsers. Once software is up and running, there are usually several steps to setting up Git and server access. Lastly, your new developers will be trying to sort out the hundreds of various web services and passwords. Yes, this might seem a bit mundane, but the more streamlined this process can be, the quicker they can move on to actually working on your code.
Spinning Up Local
Interacting with version control will usually be the first thing a developer does when they start the day, and the last thing they’ll do when they’re done. It is the tool that gives them access to your website’s code and allows them to push new code once they are done. At this point, they’ll probably be cloning your code to their local environment and setting it up to run on their own machine.
Story Writing
Whether you call them tasks, tickets, stories, or jobs, there is a communicational need to distill a human’s thoughts and desires into a focused, actionable, and testable request. It’d be great if we could just read everyone’s minds, but short of that we are writing user stories that describe in great detail the problem, the proposed solution, and the requirements that must be met before that story is complete. This need to define everything into bite-sized requests is no different in frontend development.
Development
Now that we have a story that is focused on updating the system, rather than updating a page, we can proceed in making this contrived, and arguably minimal, change to the design system. So, now that our developer’s code has been merged into the main branch, it’s time to get this code into production.
Distribution
Our developer has done it!
Tagged Releases
One of the powers of Git is its ability to create tagged releases. A tag is a snapshot in a project’s history, based off the code at a single commit. Tags are a convenient way to distribute your code whether you are pushing to a production server or pushing to a distribution channel. One of the powers of a tag is that the code can be based off of any branch, not just your production branch.
Front-End on a Team
A front-end developer is typically only one player on a team that designs and develops websites, web applications, or native applications running from web technologies and etc.
