1

SonarQube and ReactJS

This article is showing you how to use SonarQube with ReactJS and its JSX files. I will use both SonarQube JavaScript plugin and the additional plugin Sonar EsLint plugin.

<%- toc(str, [options]) %>

For the people who has missed my previous article, I have created a new SonarQube plugin to extends the Javascript analysis.

Installation and Configuration

The first step is to download the plugin directly from Github here.

Download the plugin

Download the plugin

Find the latest release.

Find the latest release

Find the latest release

Copy it in your Sonar extension folder.

Copy the plugin

Copy the plugin

Restart the server

Restart the server by calling the commands (here on linux)

sonarqube-6.0 ./bin/linux-x86-64/sonar.sh stop
  Stopping SonarQube...
  Waiting for SonarQube to exit...
  Stopped SonarQube.
  ➜  sonarqube-6.0 ./bin/linux-x86-64/sonar.sh start

 Enabling custom rules in SonarQube

Don’t forget to modify your SonarQube profile to enable the new ESLint rules :

Add the ESLint rules to your SonarQube profile

Add the ESLint rules to your SonarQube profile

Enable the ESLint rules to your SonarQube profile

Enable the ESLint rules to your SonarQube profile

Preparing your project

 Handling SonarQube Scanner

Most projects requires the SonarQube scanner (Wiki Link to analysis Javascript. Download it somewhere on your disk and unzip it.

Creates a file sonar-project.properties̀ into your project.

Copy-paste this content and modify it :

sonar.projectKey=sleroy:reactjs-demo
sonar.projectName=ReactJS demo
sonar.projectVersion=1.0
sonar.sources=src
sonar.sourceEncoding=UTF-8
sonar.javascript.file.suffixes=.js,.jsx

Don’t forget the line sonar.javascript.file.suffixes=.js,.jsx, it’s the hack to make SonarQube working on JSX files!

OK! SonarQube Scanner is configured!

Preparing ESLint

We want to perform the SonarQube analysis with the additional results of ESLint. Eslint is a popular linter that provides recent rules for many javascript frameworks – ReactJS included.

ESLint is thereby often upgraded and contains through its extension system, rules and frameworks that you won’t find in the regular SonarQube installation.

If you haven’t created yet an ESLint configuration file, here is the commands :

ESLint Configuration

ESLint Configuration

You can try the configuration by launching ESLint ony your project. It may warn you that some extensions are missing. Install them with NPM or Yarn.

Missing NPM Module

Missing NPM Module

Usually, the ReactJS extension is missing of your project. You can add them like developer extensions (--save-dev) or globally (-g).

Install missing ESLINT ReactJS extension

Install missing ESLINT ReactJS extension

With the right configuration and ESLint installation, the scan of a JSX File should work :

Scanning JSX File

Scanning JSX File

OK! ESLint is configured!

 Launching SonarQube Scanner

Launchs the SonarQube scanner with the command :

~/tools/sscanner/bin/sonar-scanner

And the analysis is running …

react-jsx git:(master) ✗ ~/tools/sscanner/bin/sonar-scanner
INFO: Scanner configuration file: /home/sleroy/tools/sscanner/conf/sonar-scanner.properties
INFO: Project root configuration file: /home/sleroy/git/react-jsx/sonar-project.properties
INFO: SonarQube Scanner 3.0.3.778
INFO: Java 1.8.0_121 Oracle Corporation (64-bit)
INFO: Linux 4.10.0-21-generic amd64
INFO: User cache: /home/sleroy/.sonar/cache
INFO: Load global repositories
INFO: Load global repositories (done) | time=211ms
INFO: User cache: /home/sleroy/.sonar/cache
INFO: Load plugins index
INFO: Load plugins index (done) | time=14ms
INFO: SonarQube server 6.0
INFO: Default locale: "fr_FR", source code encoding: "UTF-8" (analysis is platform dependent)
INFO: Process project properties
INFO: Load project repositories
INFO: Load project repositories (done) | time=214ms
INFO: Load quality profiles
INFO: Load quality profiles (done) | time=94ms
INFO: Load active rules
INFO: Load active rules (done) | time=897ms
INFO: Publish mode
INFO: -------------  Scan ReactJS demo
INFO: Load server rules
INFO: Load server rules (done) | time=482ms
INFO: Base dir: /home/sleroy/git/react-jsx
INFO: Working dir: /home/sleroy/git/react-jsx/.scannerwork
INFO: Source paths: src
INFO: Source encoding: UTF-8, default locale: fr_FR
INFO: Index files
INFO: 9 files indexed
INFO: Quality profile for js: Sonar way
INFO: Sensor Lines Sensor
INFO: Sensor Lines Sensor (done) | time=41ms
INFO: Sensor SCM Sensor
INFO: SCM provider for this project is: git
INFO: 9 files to be analyzed
INFO: 0/9 files analyzed
WARN: Missing blame information for the following files:
WARN:   * /home/sleroy/git/react-jsx/src/example/hello.jsx
WARN:   * /home/sleroy/git/react-jsx/src/example/index.jsx
WARN:   * /home/sleroy/git/react-jsx/src/fixtures/this.jsx
WARN:   * /home/sleroy/git/react-jsx/src/example/index.js
WARN:   * /home/sleroy/git/react-jsx/src/example/imager.jsx
WARN:   * /home/sleroy/git/react-jsx/src/fixtures/component.jsx
WARN:   * /home/sleroy/git/react-jsx/src/fixtures/advanced.jsx
WARN:   * /home/sleroy/git/react-jsx/src/fixtures/react.jsx
WARN:   * /home/sleroy/git/react-jsx/src/fixtures/hello.jsx
WARN: This may lead to missing/broken features in SonarQube
INFO: Sensor SCM Sensor (done) | time=504ms
INFO: Sensor XmlFileSensor
INFO: Sensor XmlFileSensor (done) | time=1ms
INFO: Sensor JavaScript Squid Sensor
INFO: 9 source files to be analyzed
INFO: 9/9 source files have been analyzed
INFO: Unit Test Coverage Sensor is started
INFO: Integration Test Coverage Sensor is started
INFO: Overall Coverage Sensor is started
INFO: Sensor JavaScript Squid Sensor (done) | time=893ms
INFO: Sensor Linting sensor for Javascript files
INFO: Sensor Linting sensor for Javascript files (done) | time=1438ms
INFO: Sensor Zero Coverage Sensor
INFO: Sensor Zero Coverage Sensor (done) | time=38ms
INFO: Sensor Code Colorizer Sensor
INFO: Sensor Code Colorizer Sensor (done) | time=2ms
INFO: Sensor CPD Block Indexer
INFO: DefaultCpdBlockIndexer is used for js
INFO: Sensor CPD Block Indexer (done) | time=1ms
INFO: Calculating CPD for 2 files
INFO: CPD calculation finished
INFO: Analysis report generated in 170ms, dir size=24 KB
INFO: Analysis reports compressed in 254ms, zip size=18 KB
INFO: Analysis report uploaded in 39ms
INFO: ANALYSIS SUCCESSFUL, you can browse http://localhost:9000/dashboard/index/sleroy:reactjs-demo
INFO: Note that you will be able to access the updated dashboard once the server has processed the submitted analysis report
INFO: More about the report processing at http://localhost:9000/api/ce/task?id=AVwHr7JyDHBkCqlFC7Sx
INFO: Task total time: 8.046 s
INFO: ------------------------------------------------------------------------
INFO: EXECUTION SUCCESS
INFO: ------------------------------------------------------------------------
INFO: Total time: 10.141s
INFO: Final Memory: 48M/301M
INFO: ------------------------------------------------------------------------

Controlling the results

Go to your Sonar interface, and jump directly to the dashboard.

Our project has been analyzed.

SonarQube analysis

SonarQube analysis

We observe that the violation’s number is increasing with the new rules.

SonarQube analysis details

SonarQube analysis details

Hourra, our JSX files are analyzed !

JSX Analysis

JSX Analysis

In this article, we have installed, configured a new plugin to perform better Javascript analysis into SonarQube, working with ReactJS and JSX files.

1

I have tried Vue.js and I love it

Vue.js Framework

I have tried Vue.js and just love it.

Some weeks ago, I started a new project for which, I have to build an internet website.

Context

After spending really long hours on internet, browsing, collecting every possible testimonials and advices and comparing them to my first impressions, I decided to start with an hybrid / multiple page site.

(if you are interested by the reasons, it will be the subject of another post).

An hybrid /multiple page site is a website where the content is rendered both from server side and client side at the opposition of single page application (SPA) full client side and a classical server side site(PHP..) Since I want to use the power of modern Js Frameworks as double binding, refreshing, Ajax widgets, Es2016, reactive programming and somewhat control which pages needs to be reloaded, I had to make a choice.

The list of choice is somewhat limited if keep only the 5 most popular ones. (yes I am resolutely not a pioneer of the JavaScript Jungle)

The framework selection

I made the following list :

  • Angular 2+ (they are increasing the major version number for each patch 😅)
  • React.js
  • AngularJS
  • Ember. Js
  • Vue.js
  • JQuery (it is a joke)

Selection criteria

I defined some selection criteria besides the popularity :

No code bloat : specifically to JavaScript, the syntax and the missing OOP native programming have been producing many frameworks with dumb syntax without any semantical and often syntaxical meaning. To overcome the limitations, many frameworks are using syntax sugar, making them a nightmare to memorize. The most ridiculous is the attempt to stick on these syntaxical blobs, some pseudo theorical terms.

A good framework should offer different levels of usages from the straightforward approach to build quickly and easily a website with the common use cases to the low-level approach where the experimented developer is able to tune the required details. What has been done in Laravel, Spring framework or Symphony are good samples.

Symphony framework is known as a huge galaxy. Many components, industry quality grade, but an overwhelming complexity if you start head on.

Therefore they have created a micro — framework called Silex to bootstrap an PHP application without the nasty details and it is deadly simple. If you want more complex things, the components behind Silex are the Symphony ones.

For a web framework, always study how do they handle forms. Especially a basic post form. It takes five minutes in plain HTML to build an (unsecured) form. How long does it take with this framework?

The same thing works for **Spring* and Spring boot.

The framework must have a business friendly licence. No doubt, no legal restriction for the future company. (by the way do you know you cannot build weapons software in Java, please stick to the line…)

An extensible / plug-ins architecture. I believe the success of a framework resides in the possibility to enable the necessary functionalities (aka feature toggling) during your project. Authentication, reactive programming, lazy loading, modularity.

The evaluation (aka trolling section)

Based on these selection criteria, here is my evaluation.

Disclaimer: I have a highly respect for the guys who wrote these frameworks and I do not doubt of their outstanding skills. AngularJS

I have experienced projects with AngularJS and I renounced since it is a deprecated technology. Too much code bloat, slow (I should rather say hard-to-tune) and all efforts are concentrated on the new Angular framework. Also, I think I could have a problem with my use case and disabling the AngularJS router.

Angular 2

Angular 2: I have received a training in January and wrote several prototypes since. I have been a huge fan of typescript, angular-cli. I was happy and thinking, they took the best ideas from the other frameworks and build a big melting pot.

Angular : melting pot

In Angular, you will find web components, uses template a la React.js, you have opt-in double binding, directives, modular architecture, lazy loading and so on and so on. But I progressively hate Angular for many details, slowing me down in my developments.

I really dislike their API and concepts to build forms. You have two choices, a template form design and programmatic form design. The first one is almost useless and the second one is deadly cumbersome.

In Angular, they decided to kill HTML and recreate it. How? Case-sensitive attributes and non HTML attributes. You cannot use your normal code editor on it. Beautifier tools not works or partially works. And worse of all, they conceive this awful syntax based on brackets, parens, Well, I think their are huge practitioners of the Brainfuck language.

Brainfuck language

Brainfuck language

The last issue I encountered is with their wish to produce an industrial, scalable (in the sense if I put more developers on my project, I maintain a stable learning and complexity curve). Yes, they provide dependency injection, IOC. But it really increases the learning curve.

 React.js

I really wanted to start with React.js. As far I have studied it, the framework seems full of promises, with some nice pluggable functionalities.

However at the time I began to use it, I received a lot of news. The concern is about the React.js license, the Facebook license (link1, link2, link3).

Since there is a threat for the future business (everything can be considered as a social network after all), I have rejected it.

 Ember.js

I have never tried Ember.js. Based in my readings, the framework is definitely worth of attention to build SPA applications but not for my use case. Note : during the writing of this post, I felt on that link, confirming that maybe I was wrong about ember.js

Vue.js

On Twitter, I am receiving a lot of feedback from happy users of Vue.js and I decided to give a try.

The syntax seems deadly simple.

Here is the brief of my experience :

I did not use vue-cli, I had to create my own packaging to adapt Vue.js to multipage architecture.

Code bloat: the Vue.js framework is really simple and the documentation quite good. The documentation for the plug-in vue-loader is quite good but I really hate the webpack syntax to enable it (rant..)

Learning curve: I did not try the most hard-core functionalities of Vue.js, though I am using vue-loader, a different template renderer (pug), transitions, a little bit components and lazy loading.

My biggest difficulty have been to maintain my js bundle as low as possible by producing chunks.

The second issue has been to understand why creating a view was creating an App and my component below using the render() function. However I think that Vue.js is easier than Angular. 2.

As in the previous example, the syntax is quite straightforward, no need to learn complex concepts to begin with.

The framework is also compatible with Typescript and the logic behind is quite simple.

Vue.js can be extended with several plug-ins and functionalities. I did not try all of them and the fact you are enabling them manually is comforting me in my approach.

Vue.js is not enforcing a particular programming paradigm(IOC, interfaces, Reactive programming, or. RxJS).

The only reproach I could formulate is a little fear about the Vue.js ecosystem. Please integrate existing libraries rather trying to recreate or mimic ReactJS libraries.

In conclusion, both of these frameworks are legitimate and have their lot of practitioners, and I don’t blame it. Vue.js has been my choice and I do not regret it, yet, since it has made my project easy, fun and effective.

I will try to provide more feedback in the following weeks especially on form editing, unkt testing and E2E testing.

Thanks for your attention

0

Disruption in Software Quality Assessment ?

As many other markets, the SQA/ALM Market soon will meet #disruption. Domains like machine learning, deep learning and cloud computing will force it to evolve in the next few years. This article is presenting some predictions about the future of the quality tools.

Disruption in Software Quality Assessment

Disclaimer I am not a native english speaker and I am perfecting my english skills by writing these articles. If this topic interests you, please comment below or share the article to your friends. And every syntax, grammar mistakes will be fixed under your wise comments.

A new generation of Software quality tools is going to emerge. Machine Learning, Deep Learning, DevOps, Continuous Delivery, Continuous Integration, Cloud Computing, all these movements are influencing the SQA/ALM Software Editors. It has never before been so easy and cheap to produce a new static analysis tool to measure some aspects of a software. The Opensource movement and the market evolution are the direct contributors to this state. Made famous under the name of “linters”, well-known and unknown developers are creating the tools required to their activities. And the Software editors are faced to the dilemma : “Should I continue to build my own tools ? What should be my behaviour confronted with this plethoria of scanners ?”.

Until recently, Software developers were depending of the highly-specialized skills from the Quality Software Editors to detect, analyze and fix the bugs inside their softwares. And it is a big source of frustration. From both sides. Developers are usually complaining that the rules do not reflect their real needs or the complexity of their softwares. “Quality tools do not detect real problems or too late or under a trillion of false positives”. Software Editors are providing to the hungry population rule sets, standards to satisfy the crowd. A crowd much much bigger than their own forces.

I am predicting that the disruption may be coming from these directions :

  • From the open-source : soon or later, the basic needs of developers will be fulfilled by the open-source offer. Tools like PMD, Findbugs, and so on have inspired a whole generation of developers. The young developers through the Angular 2, ReactJS, Go are already educated to the benefits of Quality tools. And they are heavily relying on linters well-integrated in their CI or in their IDE (Atom, Code). Twitter, Facebook are continuously producing and releasing in opensource new tools to help the developer community. The recent examples of Flow or PrePack are helping a lot developers to increase the quality of their products.
  • From the digital technologies. The increasing level of maturity of the machine learning and deep-learning technologies should bring us shortly new kind of tools to predict bugs, predict code defects and usual developer decisions. I believe that the scientific researches from Microsoft and Google will contribute indirectly to the Software Quality tool market. This topic is unsurprisingly very discussed (here).
  • From the software development process transformation : Movements like Agile, DevOps, Continuous Integration and Deployment, ChatBots are deeply changing the way developers are collaborating. Several aspects are changing : communication (Slack, Hipchat), software building (Jenkins, Travis CI, Microsoft TSF & Azure), software deployment (containers, PAAS, Amazon AWS)… The way a product is conceived, built and deployed requires to track and measure several quality aspects. The integration effort to produce these metrics and KPI’s is tremendous and have to be adapted to each organization. Would the developers be enough satisfied with code quality or will they require higher levels metrics extracted from their development process.

Conclusion

Who will be the future leaders in the ALM market ? Who will be the fastest to adapt to the current technology and data disruption ? Do you have some tools that could match these descriptions ?

If that article has been useful or interesting, stay connected, I will produce new articles on that subject.

One of my future article will present Codacy, an emerging code quality platform. This platform offer to ease the quality control as soon as possible in your development process to detect the bugs early and surely. I will compare this solution with the famous market leader SonarQube.