An open Macbook displaying code sitting on a white desk in front of a larger monitor featuring an out-of-focus website in a clean and minimalist office.
Blog,  Web Development Essentials

The Tiered Workflow: A Guide to Quality Web Development

Hey there, fellow web developers! Today, we’re unpacking the whole idea of a tiered workflow in web development. You might’ve come across jargon like “development,” “test”, “QA,” “production”, or “live” in your workplace or in courses you may be taking. It can sound intimidating, I know, but by the time we wrap up today, not only will you have a firm grip on what these terms mean, but you’ll also grasp their significance in delivering top-notch projects. It’s all about building a solid foundation for your coding projects, and we’re here to guide you through it.

Why Divide Workflow Into Tiers?

Let’s kick things off with a relatable analogy to get our heads around this concept. Think about the journey of crafting a bestselling book. An author doesn’t just magically produce a masterpiece in a day. They don’t sit down one morning, write a perfect final draft, and immediately send it off to the publishers. Crafting a bestselling novel requires dedication, iterations, feedback, and refinement. And you know what? That journey mirrors the tiered workflow in web development pretty closely. Let me explain how.

  1. Development Environment: This is the rough draft stage. It’s brimming with raw ideas, fluid character arcs, and evolving plotlines. Expect the unexpected. Mistakes happen frequently and are essential for growth. This phase allows you to lay down the foundation of your project, free from the pressure of perfection.
  1. Test or Staging or QA Environment: Think of this as the stage where an author revises their draft based on feedback. Edits are made to polish the narrative, tighten plot arcs, and add depth to characters. In the same way, this environment in web development lets you refine and polish, ensuring the project runs smoothly and meets desired outcomes.
  1. Production or Live Environment: This is the final manuscript, ready for the world to read. The novel, having undergone meticulous edits and reviews, is ready for the bookshelves of eager readers. Similarly, in web development, your site or application, having been tested and refined, is launched for users to experience.

The tiered development process ensures each phase of your project gets the attention it deserves. Like how a novelist wouldn’t send their first draft to a publisher, a developer shouldn’t push unfinished or untested code live. 

Through these distinct stages, you safeguard the quality of the end product, making both the development process and the final output better.

Call it What You Want (But Know What It Means)

Industry best practices have standardized having a minimum of three tiers for optimal development; however, the terminologies used to refer to each environment may vary across workplaces. While some may use “development,” “test,” and “live,” others might refer to them as “dev,” “staging,” and “production.” As you progress in your career, you will likely also encounter “pre-prod” (before production) or even “UAT” (short for User Acceptance Testing). Both typically refer to a kind of final draft before going live.

The key point here isn’t in the naming itself but understanding the function of each tier. Make sure that the terms used in your work environment clearly define each environment in your workflow and everyone is onboard with the purpose for each tier.

  • Development Environment: The drafting and building stage. It’s all about experimentation, new features, and tinkering around without real-world consequences.
  • Test or Staging Environment: The revision phase. Before showcasing to the world, here’s where you test, refine, and make sure everything is running as it should.
  • Live or Production Environment: The grand reveal! After rigorous testing and refinement, this is where your project becomes accessible to the end-users.

Aligning Your Environments

Now, while we’ve talked about the distinct purposes of each environment, it’s crucial to understand the significance of keeping them aligned. Think of it as tuning instruments in an orchestra: each instrument (or environment) plays its role, but they all need to be in harmony for the best performance.

Development, as you might expect, is the starting point. It’s where the magic of creation happens—the “lower” environment. Once you’ve developed your code in this initial environment and ensured its free from issues, you deploy it to your testing environment. This is your rehearsal before the grand show, checking if everything fits and functions as it should in a setting that mirrors the live environment. And once you’re confident the audience will love it, you deploy to the live environment. The big stage. The spotlight. 

But what about content? Well, content is a bit of a unique beast. Since your live environment is the face of your brand, any new content (like blogs, product listings, or news updates) gets added here. But—and this is vital—it’s crucial to sync this new content down to your dev and testing environments. This ensures that when you’re brewing new features or testing, you’re doing so with the most up-to-date content, keeping everything in harmony. Maintaining alignment reduces the risk of unexpected errors or conflicts.

By carefully adhering to this pattern of moving code up and content down, you maintain an efficient, effective, and error-minimizing workflow. This systematic approach not only keeps surprises at bay but ensures that you always have a holistic view of the entire project across all environments.

Best Practices for a Divided Workflow

  1. Commit Often in Development: Given that the development stage is where you experiment, commit your changes often. It makes tracking changes easier and enhances collaboration.
  2. Thorough Testing: Don’t cut corners in the QA environment; catching issues here is more efficient than addressing them post-launch. Ensure you and your team have a comprehensive and repeatable QA process or checklist.
  3. Backup Before Going Live: Before pushing any update to the live environment, backup your current live version. This way, if anything goes south, you have a stable version to revert to.
  4. Deployment Protocol: Establish a standard process detailing deployment timelines, steps, and a clear rollback plan for emergencies. This ensures efficient transitions and safeguards against issues.
  5. Code Checkpoints: While the bulk of QA occurs in the testing environment, always review and test code before transitioning between environments. Doing so ensures quality, security, and functionality throughout the development cycle.

The Local Tier: Bringing It All Home

There’s one more crucial environment worth highlighting: the local tier. For many developers, this is where the magic truly begins. Instead of directly working on a remote server or shared environment, the local tier allows you to pull a copy of your website or application repository right onto your personal machine. Picture this: your very own sandbox, free from external interruptions, where you can experiment, innovate, and yes, sometimes break things (without any real-world consequences).

Using a local environment offers a couple of neat advantages. First, you get to work offline, making development immune to internet hiccups. Second, it provides a rapid testing ground, free from the latency that sometimes comes with remote servers. However, with great power comes great responsibility. Once you’re satisfied with your local changes, you can push your work back up to the main repository. 

But—and this is crucial—you must ensure your local code is regularly synced with the main repository to avoid any merge conflicts or discrepancies. Think of it like staying in rhythm with a band; if you fall out of sync, things can get messy.

Tips for Rocking the Local Tier:

  1. Regular Pulls: Before starting your development session, make a habit of pulling the latest changes from the main repository. This ensures you’re always working with the latest code.
  2. Branch Wisely: Use branches for feature development or bug fixes. This keeps your main branch clean and conflict-free.
  3. Commit Often: Small, frequent commits are easier to manage and merge than large, infrequent ones. They also provide a clearer history of your development journey.

So, while the local environment might seem like an informal playground, treating it with the same respect and discipline as the other environments can supercharge your development process. After all, the best magic often happens at home.

Version Control and the Power of the Local Tier

The magic of developing locally becomes even more potent when paired with an effective version control system like GIT. (See our previous article on The Importance of Version Control in Web Development.) Instead of making changes directly on a shared or remote server, a local environment allows developers to experiment freely on their personal machine. However, the real advantage is leveraged when these local changes are tracked and managed using GIT. This combination ensures that developers can create branches for new features, making sure the main development line remains pristine.

Consider this scenario: Your team is halfway through building a feature when an unexpected critical security patch needs immediate deployment. If you were working directly in the development environment, you might have to jump through hoops to move your incomplete work out, apply the updates, deploy up to the test/staging environment, and then return your half-built code. With GIT and branching, you can manage such emergencies without disrupting the feature development or giving yourself unnecessary work. By having a dedicated branch for the new feature, the main workflow remains clean, ready for critical updates. This is the power of combining the flexibility of the local environment with the robustness of GIT – ensuring an efficient and error-free workflow.

Leveraging Hosting Providers vs. DIY Workflow Setup

If setting this all up sounds daunting, many of the industry-leading hosting providers have  pre-configured workflows, ready for action, ensuring that you can get started with minimal setup. It’s like having a pre-built stage, ready for your performance.

However, for the DIY enthusiasts or those looking for a more tailor-made solution, building this workflow yourself is entirely possible and, at times, preferred for specific, custom requirements. Setting up a development environment, a test environment, and a live environment might require some elbow grease, but the flexibility it offers can be worth the effort. 

By combining the convenience of pre-configured solutions from hosting providers with custom-built solutions where necessary, you can create a workflow that’s not just efficient but also perfectly tailored to your project’s unique requirements. Always remember, the goal is seamless development, testing, and deployment—however you choose to get there.

Check out DeployBot’s blog for more information utilizing multiple environments to improve workflow. If you’re interested in understanding how GIT can be configured to manage and streamline this workflow, the Atlassian tutorial on GIT workflows is a must-read.

In Conclusion

Embarking on your web development journey with a solid grasp of tiered workflows is essential.  This methodology guarantees quality, streamlines collaboration—whether you’re working solo or in a team—and dovetails perfectly with version control systems like GIT. Embrace it, and watch your projects transform!

Happy coding, and always remember: Proper preparation prevents poor performance. Until next time, let your code shine! ✨

Credits

Featured image: Photo by Christopher Gower on Unsplash.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.