A Simple, Yet Powerful Approach to Clean Code!

Rate this content

In this session, I'll use a demo to demonstrate how you can easily take ownership of your Code Quality with SonarCloud. You'll see how a simple, automated methodology ensures you and your Team to only commit Clean Code.

8 min
24 Mar, 2022


Sign in or register to post your comment.

Video Summary and Transcription

This Talk introduces the concept of CleanCode in DevOps workflows, highlighting the benefits of efficient and maintainable code. The use of SonarCloud and the Sonar Solution is showcased as an easy way to add clean code to the workflow, providing valuable insights and metrics. Analyzing pull requests and triaging issues is emphasized as a proactive approach to catching and correcting code issues before they reach the main branch.

Available in Español

1. Introduction to CleanCode in DevOps Workflows

Short description:

I'm going to demonstrate how easy it is to code smarter and harness the power of CleanCode in your DevOps workflows. A traditional workflow can waste a tremendous amount of developer time, with up to 42% spent on rework and remediating bad code. At Solar Source, we have a better way to add development, a clean code approach.

Hi, everyone. I'm Clint Cameron, Product Marketing Manager at Solar Source. And today, I'm going to demonstrate how easy it is to code smarter and harness the power of CleanCode in your DevOps workflows.

Now, let me first start with a traditional workflow and show how it can waste a tremendous amount of developer time. Code is written and pushed to the main branch. Auditors flag potential issues, and then devs return to the code to triage and separate real issues from false positives. The end result is that up to 42% of developer time can be spent on rework and remediating bad code.

At Solar Source, we have a better way to add development, a clean code approach. We put the developer in charge of the code quality and give them the tools to write only clean code. It's inefficient to push issues to your main branch or a feature branch only to revisit those issues later. Instead, let's find those issues as soon as they occur and eliminate them from even getting committed in the first place.

2. Adding Clean Code with SonarCloud

Short description:

The clean code approach means direct ownership of the code by the developer and the team, resulting in efficient, maintainable, and safe code that fosters innovation. Sonar Cloud and the Sonar Solution offer a free and easy way to add clean code to your workflow. By integrating with platforms like GitHub, Azure, Bitbucket, and GitLab, you can analyze your code and receive valuable insights and metrics. During the demo, we kick off an analysis, select a plan, and let SonarCloud handle the rest. Once the analysis is completed, we can identify reliability, security, and maintainability issues in the main branch.

OK, we can see that the clean code approach is more efficient. What exactly does that mean for you and your team? Well, direct ownership of the code by the developer and the team. It means efficient and maintainable code, code that's robust and reliable when executed. It means of course, code that's safe for your users and for your organization. And then finally code that fosters innovation and keeps developers happy.

OK, in a minute, I'm going to demonstrate how you can add clean code to your workflow using Sonar Cloud and the Sonar Solution. It's 100 percent free for public projects and you can analyze your code in minutes. Now, before I demonstrate, let me quickly walk you through the solution. In my demo, my project is housed in GitHub. We also have a tight integration with Azure, Bitbucket and GitLab. It all starts with a pull request, which kicks off an auto scan of your code. Now this auto scan can be easily integrated with your existing CI CD system. Now, from the analysis, we get back a set of code quality metrics and a clear indication of any issues. The analysis results are automatically synced back to GitHub. So you get valuable insights right where your team lives, eats and breathes. Now, on to the demo.

Alright, y'all, here's our code for our demonstration. First thing is to go ahead and kick off an analysis in sonarcloud.io. So we'll authenticate using our GitHub credentials. Navigate to create a new organization. That automatically gets pulled over, and we'll import that. We're gonna go ahead and select a free plan and get that project pulled in and that's it. SonarCloud will take care of the rest. It's going to prep for analysis and then fully run that analysis. Now, depending upon the size of your project, the number of lines of code containing your project, it could take a few minutes for that to run. I only have about seven minutes with y'all, so in the interest of time, let's pause and pick things back up once the analysis is done.

Alright, analysis completed. Let's take a look at it. We navigate to the main branch and see that we've got some reliability, security, and maintainability issues. That's great to get a baseline understanding of what's going on in your main branch.

3. Analyzing Pull Requests and Triaging Issues

Short description:

Let's start catching things from now and instigate a clean code process. Analyze pull requests to catch issues before they reach the main branch. We have a failed quality gate due to a vulnerability in our pull request. We can triage issues and get more information about vulnerabilities in GitHub. Dig deeper into vulnerabilities and find tips to correct them.

Now other than those vulnerabilities, those should get fixed, but everything else is kind of water under the bridge. What's important is let's start catching things from now. Let's instigate a clean code process from now, so that we're shifting left. When things happen, let's catch them as soon as possible and prevent things from ever even getting close to reaching the main branch. Let's catch them before they even reach a feature branch.

To that end, I'd like to do an analysis against a pull request. I have a branch set up already in GitHub. We'll kick off a new pull request against that. That's all it takes. That's going to go ahead and kick off automatically and scan our pull request, just like the main branch. Depending upon the size of the pull request, the number of lines of code included, it could take a few seconds, could take a few minutes for the analysis to complete and fully run. It's running right now. I expect it to finish. There it goes right there. It's finished.

We can see that we have a failed quality gate due to a vulnerability in our pull request. We don't want that, so let me show you something super cool right now. Right here you can see that if I were to try to merge this pull request, it's red, I click on it, it's blocked. Unless I have administrator privileges, you can set it up so that if you get a red quality gate on a pull request, no merging unless it is cleaned up. Okay, we'll cancel that.

Now, let me go ahead and we're in the conversations tab. Let me take you over to the checks tab. You can see we have a nice integration there as well. Now I also want to show you something cool here that is our integration with the code scanning capabilities of GitHub, and you can see there you get even more information about this vulnerability. If we go to the bottom here we can see that it looks like we could have an injection flaw. So if we click on Show Paths, we can see that we have a source right here in app.js, and we can see it traverses through five different steps, actually crosses over into another file called app handler.js, and that's our sync. The point being that we want to provide as much information in GitHub as possible. It's where you work, so let's get the right information at the right time to you so you can make decisions. And to that end, we have this little click box here. We can go ahead and triage things as maybe that's a false positive, maybe it's just used in testing or for a reason we say we're not going to fix that. Okay, let me finish off by taking you back to the Checks tab here and showing you one last feature. If I click right here, I can actually then open up this pull request, get those same set of metrics that we saw in the main branch but now it's against RPR. There's our vulnerability. I can click right there and dig into it a little more and find out exactly we see that same path here. So we have AppJS down to AppHandlerJS with three steps in between. Same information just a little more ability to dig in deeper and find out exactly what's going on with that vulnerability as well as some tips to go ahead and correct it because that's the name of the game. All right, thank you. Happy clean coding and we'll talk to you later.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Demand for DevOps has increased in recent years as more organizations adopt cloud native technologies. Complexity has also increased and a "zero to hero" mentality leaves many people chasing perfection and FOMO. This session focusses instead on why maybe we shouldn't adopt a technology practice and how sometimes teams can achieve the same results prioritizing people over ops automation & controls. Let's look at amounts of and fine-tuning everything as code, pull requests, DevSecOps, Monitoring and more to prioritize developer well-being over optimization perfection. It can be a valid decision to deploy less and sleep better. And finally we'll examine how manual practice and discipline can be the key to superb products and experiences.
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
Why is CI so Damn Slow?
We've all asked ourselves this while waiting an eternity for our CI job to finish. Slow CI not only wrecks developer productivity breaking our focus, it costs money in cloud computing fees, and wastes enormous amounts of electricity. Let’s take a dive into why this is the case and how we can solve it with better, faster tools.
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Zen of Yarn
In the past years Yarn took a spot as one of the most common tools used to develop JavaScript projects, in no small part thanks to an opinionated set of guiding principles. But what are they? How do they apply to Yarn in practice? And just as important: how do they benefit you and your projects?
In this talk we won't dive into benchmarks or feature sets: instead, you'll learn how we approach Yarn’s development, how we explore new paths, how we keep our codebase healthy, and generally why we think Yarn will remain firmly set in our ecosystem for the years to come.
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Atomic Deployment for JS Hipsters
Deploying an app is all but an easy process. You will encounter a lot of glitches and pain points to solve to have it working properly. The worst is: that now that you can deploy your app in production, how can't you also deploy all branches in the project to get access to live previews? And be able to do a fast-revert on-demand?Fortunately, the classic DevOps toolkit has all you need to achieve it without compromising your mental health. By expertly mixing Git, Unix tools, and API calls, and orchestrating all of them with JavaScript, you'll master the secret of safe atomic deployments.No more need to rely on commercial services: become the perfect tool master and netlifize your app right at home!

Workshops on related topic

DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Deploying and managing JavaScript applications in Kubernetes can get tricky. Especially when a database also has to be part of the deployment. MongoDB Atlas has made developers' lives much easier, however, how do you take a SaaS product and integrate it with your existing Kubernetes cluster? This is where the MongoDB Atlas Operator comes into play. In this workshop, the attendees will learn about how to create a MERN (MongoDB, Express, React, Node.js) application locally, and how to deploy everything into a Kubernetes cluster with the Atlas Operator.
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
The workshop gives a practical perspective of key principles needed to develop, build, and maintain a set of microservices in the Node.js stack. It covers specifics of creating isolated TypeScript services using the monorepo approach with lerna and yarn workspaces. The workshop includes an overview and a live exercise to create cloud environment with Pulumi framework and Azure services. The sessions fits the best developers who want to learn and practice build and deploy techniques using Azure stack and Pulumi for Node.js.