If you’re new to coding, or even just curious about the dozens of apps and websites you use every day, you’ve probably found yourself wondering how applications are built. We’ve got you covered.
In the video below, web developer Pat DePuydt walks us through The Development Cycle — the process through which an idea becomes software. He introduces us to the key members in an application’s creation and illustrates how they all contribute to its development with an adorable example: Kitten Academy. Read on — or watch the video below — to learn more.
The Development Team
Let’s say you’re working for a company that decides to create a website to connect new cat owners with veterinarians who can answer all their questions. This is a huge project that will require various members to contribute to its execution. In this section, we’ll take a look at each of the key members of a product team and the roles they play.
Product managers
First, we have product managers, who Pat compares to ship captains. Responsible for keeping the ship on course, product managers have a high-level focus, oversee the product’s success, and manage its many stakeholders. Product managers supervise the entire development cycle and break its many complexities down into projects that they delegate to project managers.
Project managers
Project managers work directly with developers and designers to make sure everything stays on track. They also help product managers make decisions and keep them from being blindsided by sending important matters up the chain of command. Project managers oversee the creation of complex features, breaking them down into epics that they assign to developers and designers.
Let’s go back to our Kitten Academy example. One of our designers recommends implementing a video conferencing feature into our website. Our product manager will be responsible for overseeing its buildout, so they send it along to the project manager, who breaks it down into smaller projects that they assign to designers and developers. The smaller projects might include building user flows, visual designs, account management features, and reminders.
Designers
Each team member plays a vital role in the development cycle. While product and project managers oversee the application’s progress, designers and developers bring the ideas to fruition.
Designers usually come up with an application’s features and create user flow charts to illustrate how people will interact with it. This phase includes some visual design, typically wireframes like those in the example below.
Developers
After designers decide on the application’s features, developers make them a reality. This sounds straightforward, but even the simplest features can require large amounts of time to create.
Let’s say someone comes up with the idea to include a dropdown list of available vets for each time slot on Kitten Academy. While this would be a great feature, our developers would have to build and maintain a database of KA veterinarians, along with an application for them to sign up and set their availability. This could potentially double the project’s developmental time.
In this case, our developers would explain to our project manager that the dropdown functionality was out of scope with the project’s current timeframe. Our project manager would then relay that information to our product manager, who could either extend the deadline or deem the feature noncritical.
Developers usually consist of a mix of front-end and back-end engineers. Front-end engineers use programming languages like HTML, CSS, and JavaScript to create the parts of a website that users interact with. Back-end engineers use Python, Ruby, and other languages to develop the hidden background processes that keep everything running smoothly.
Processes
Now that we’ve taken a look at the key members in an application’s development, let’s go through the processes in which plans are developed and executed.
Sprint Cycle
The sprint cycle involves planning and executing all the work related to the project and identifying any pressing issues. In this phase, work is broken down into tasks, and tickets are assigned to be completed in sprints. Pat summarizes the sprint cycle in five steps in the video above:
- Roadmapping: The team decides whether to undertake the project, estimates the length of its duration, and assigns team members their tasks.
- Sprint Planning: Team members are informed of the priorities for the next release cycle.
- Sprints: Time-boxed periods in which specific tasks are completed.
- Backlog grooming: Identifying tasks and issues that had been placed on the back burner but might now become more relevant for the product’s success.
- Retrospectives/Retros: The team discusses what they should start, continue, and stop doing in the next sprint. Many teams use Kanban boards in this phase.
Types of tickets
Traditionally, there are three types of tickets: epics, stories, and bugs.
- Epics: High-level tasks (e.g., creating user accounts so people can sign up for Kitten Academy) that are usually broken down into stories.
- Stories: Subsets of epics (e.g., building user interfaces, appointment dashboards, and pet info storage).
- Bugs: Unintended software behaviors that stem from coding issues (e.g., letting people from other countries sign up for KA despite it only being available in the US).
Quality Assurance
To keep from breaking their websites, most teams have an identical copy of its server where they can deploy new code and test its functionality. A developer or QA engineer can then test all the ways a user might interact with the software (either correctly or incorrectly). If the new code passes this stage, it goes live and is implemented into the website.
Tools
Throughout the processes listed above, developers use various tools to keep track of tasks and work on code simultaneously. In this section, we’ll discuss Kanban boards, Git, and GitHub.
Kanban boards
Kanban boards are used to visually depict work in various stages of development. We actually use them ourselves here at Codecademy. While completing a Career Path, learners use Kanban boards to keep track of their Portfolio Projects’ progress.
To create a Kanban board, all you need are cards and columns. The cards represent work items, and columns represent stages of completion, as seen in the example below.
Popular tools used to create Kanban boards include Jira and Trello, but you could just as easily use a whiteboard and some post-it notes. Note that the example above is just a model. Most teams have their own ways of building Kanban boards, unique to their own types of tickets.
Git version control management software
Git is a command line software with user interface features that allow developers to track changes to an application. It’s used locally to push up and pull down changes and track them to a remote repository.
GitHub
GitHub is a popular remote code-hosting software. Despite sounding similar, it’s completely different from Git. Whereas Git tracks changes to code on a developer’s computer, GitHub is where those changes are stored so other developers can download it and use it in their work. Check out our Learn Git & GitHub course to learn more about their differences and how to use both tools.
As a developer, you can use GitHub to submit a pull request to allow your teammates to review your code and ensure it doesn’t conflict with their own. It also gives them a chance to make sure your code is written properly. As Pat points out, it’s important that your naming and programming patterns match the rest of the codebase.
Another advantage of pull requests is that they help ensure your code runs in different environments. Once your feature is complete and running smoothly, it could then be implemented into the application.
Getting Started
Now you have a basic understanding of how applications are created. The next step is getting in there and doing it yourself. To help you get started, we offer a wide range of courses and Career Paths:
- Front-End Engineer Career Path
- Back-End Engineer Career Path
- Full-Stack Software Engineer Career Path
