Tools for Modern Web Development

Web development is ever-changing as the modern web evolves. As a web development agency, we strive to stay on top of the tools that we use here at Acro Commerce.

While there is no one right way, long gone are the days of simply changing a file and uploading it to the server via FTP. These days, it’s all about the quality of code, collaboration, automation and scalability. We thought we’d share some of the software tools that make up web development at Acro Commerce.

Our development philosophy

Before I get started, it should be mentioned that Acro Commerce is a proponent of open source technology and we try to promote and use open source tools wherever we can. It’s ingrained in our company philosophy and we feel the culture of open source is ideal for what our clients need. If we need a tool, we look to open source first. If we can’t find it there, then we move on to other options. It’s like the 100-mile diet, but for software. You can read more about why we (and others) choose open source in this post.

A typical development project (and the tools we use)

Once the ink dries (G Suite) and a project begins, a typical project often includes some sort of low fidelity prototypes (Figma, Axure) or creative design (Figma, PhotoShop, Illustrator, InDesign). Design mockups are often shared with clients (via Figma, InVision) for collaborative feedback. Most internal discussion during this phase and throughout the project happens via in-person discussion, chat (Mattermost) and video conferencing (Google Meet).

Once everyone is on the same page and a design is signed off, development starts. If it’s a new project, a central git repository is set up (Git, GitLab) for the project files (most commonly Drupal).

Our developers pull down the repo to their local machine (most commonly Ubuntu) and configure their local development environment (typically Lando). Local code development is done in our IDEs of choice (PhpStorm, VS Code). If a developer needs to deal with creative assets, we have remote desktops running the Adobe suite of programs available to access. Often, developers also turn to free online tools instead (Photopea).

When it’s time for code to be pushed to a server (AWS with a host of DevOps tools), the developer configures GitLab’s built-in continuous integration deployment tools to automatically deploy the files and build the site. A variety of automated tests happen at this point. Deployment happens in this way for development, staging or production. If we’re in charge of the production server, we use a variety of software to manage (custom bash scripts and Ansible playbooks) and monitor (New Relic and Prometheus) the server.

Changing often

And there you have it, a high-level overview of a smooth-running web development operation. Of course, a lot more goes on behind the scenes and a whole bunch of smaller tools are involved in each step of a project, but this gives you a general understanding of how a modern web dev shop runs.

The requirements for a digital agency specialing in web development and ecommerce are constantly changing, so as a company, we evolve as well. Developing skills and adopting new tools is a priority for all of our team members.

The tools we use change over time as better tools appear. We’re always looking to adopt new tools that will make our resources more accessible to one another securely in the cloud as well as tools that allow for more automation and better consistency. If that tool is open source and capable, we’re interested. Like any other industry, things change. It’s up to us to stay on top of that change and roll with it.

Your business can benefit, too!

The tools we use can also benefit your business! Let us help you architect the ideal commerce stack that adapts to your growing business.

---

_{Editor’s note: This article was originally published on January 22, 2019, and has been updated for freshness, accuracy and comprehensiveness.}