React

NWCJS Meetup: Aug 22nd – The good, the clean, and the bad. A Javascript quality double feature!

Marky Roden NWCJS, React , ,

I am happy to be talking at this month’s Northwest Chicago JavaScript Meetup at out PSC Office in Schaumburg, IL

Robert Stefanic who also works in the same building will also be talking.

 

Turning Bad JS into Clean & Clear JS
by Robert Stefanic

With so many features and oddities in the language, writing bad Javascript is easy. Lots of people can look at a block of Javascript code that is poorly written and recognize that it’s bad, but what exactly makes that block of code bad? And conversely, what would make a block of Javascript code clean, eloquent, and good? This talk will take a look at the characteristics that make up good Javascript coding practices and emphasize why these characteristics are vital. To further illustrate the characteristics of clean Javascript, we’ll take a look at some examples of bad coding practices and work through improving them.

**************

How good is your JavaScript code? Please justify your answer.
by Mark Roden

Everyone writes the best code, right? What is the best code, who’s making the rules? Who’s picking up the pieces later on and maintaining your “best code”?

In this presentation we will look at some of the modern tooling which comes along with making good quality JavaScript code. We will explore quality gates in a CI/CD process and look at the pros and cons of making quality code decisions.

**************

Schedule 6:00 – begin arriving , socialize, grab a slice of pizza and a beer.

6:30 – presentations begin

**************

 

The good, the clean, and the bad. A Javascript quality double feature!

Thursday, Aug 22, 2019, 6:00 PM

PSC Group, LLC
1051 Perimeter Drive Suite 500 Schaumburg, IL

23 Javascripters Attending

Turning Bad JS into Clean & Clear JS by Robert Stefanic With so many features and oddities in the language, writing bad Javascript is easy. Lots of people can look at a block of Javascript code that is poorly written and recognize that it’s bad, but what exactly makes that block of code bad? And conversely, what would make a block of Javascript cod…

Check out this Meetup →

Reducing SharePoint Framework Code Smells: 2 – Setting up a sample for unit testing

Marky Roden React, SPFx, SPFx PnP , , , ,

This is a series on how to set up SonarQube as a Quality Gate in your SharePoint Framework development process. The end goal is to add SonarQube to your build and release process through DevOps. These articles will explain:

  1. How to set up a sample SonarQube server in Azure
  2. Setting up a unit test sample locally
  3. How to run a sonar-scanner review manually
  4. How to integrate the code review into your Azure DevOps build and release process.

It is apparently going to take more blog posts than I expected. But I like to spread these things out – easier to maintain and easier to find what people are looking for.

Introduction

In the previous article we saw how to create a sample SonarQube server in Azure. In this article we will look at how to manually run a SonarQube scan linked to the server we created. The results might be smelly.

In this example we are going to use the SharePoint PnP example for creating unit test with React in SFPx

Setting up the repository locally

Create a new folder for the repo locally and then clone the repository through the terminal with “git clone https://github.com/SharePoint/sp-dev-fx-webparts”. We have to take the whole repo but are not going to use the whole of it – just the react unit testing section.

Then once that is complete navigate the ./samples/react-jest-testing folder

run an npm install and we are ready to go.

Initial npm test

Immediately after the install you can run and npm test and see how the sample code hang up under testing. You will get one intentional fail and some code which is not convered by tests. This is to be expected.

The reason we add unit tests to a project is ultimately to improve the quality of the code. This leads to reduction in maintenance costs, lifts the confidence of the development team and allows for continuous integration builds to identify where breaking code has been introduced into a build process within a team.

This project is a great place to start to learn how to unit test within React and the SharePoint Framework.

What we want to be able to do ultimately is collect all of this information on the SonarQube server. We will get to that 🙂

In the next article we will look at sonar scanner and how we hook that up to the SonarQube server.