FAQ - CPNV-ES/notice GitHub Wiki

How can I install the project ?

How can I debug my code ?

You can use the following debug configuration for vscode.

Put this in your launch.json config file :

{
    "configurations": [
        {
           "name": "Launch Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

002 Development environment configuration

IDEs

  • VSCode
  • Intelij Webstorm
  • Reactide

VSCode

VSCode is a mature project that is easy to setup and highly extensible. It can include any language server and has built-in support for Javascript and React.

VSCode is open source.

Intelij Webstorm

Intelij Webstorm provide built-in support for React, HTML and CSS highlighting.

They are not open source.

Reactide

We choose to not use Reactide as no new releases where made since 2019. Furthermore the github repo only has 265 commits in total and isn't maintained anymore.

It is also free and open source.

Choice

We choose VSCode as it provides all the features that we need and provides the bigest extension marketplace. It has a big community and is battle tested (~ 75'000 commits).

VS Code plugins

Other tools

  • draw.io (class and flow diagrams)
  • sequencediagram (sequence diagram)
  • jsdoc (generate documentation)
  • npm (node and javascript dependency manager)
  • git
  • gitflow

Browser

  • Profiler
  • Inspector (Firefox, Chrome)
  • (Redux Devtools)
  • React Devtools

A javascript debug config example is provided in the repository as a launch.json file.

004 Framework choice

The following frameworks were considered :

  • React
  • Vue
  • Angular
  • Ember
  • Backbone

Our choice was mainly based on the new hooks API that React ships with. The Hooks API allows to share state logique between components more easily.

Our choice was also based on the fact that React provides an hybrid mobile framework that would allow us to share code between platforms.

More details

It was also based on the ease of integration of state management librairies such as Redux. The state management might become important in the future of the app development, as there will be a lot of state to handle such as notes, text blocs, images, user profiles...

More details

Librairies used

Translations

  • react-i18next

We decided to go to i18next given its popularity, its plugin for detecting the user's preferred language, its plugin for loading translations in ajax as well as its hooks allowing us to generate all the translations

Build tools

  • webpack

State Management

  • (Redux)

005 App template choice

Our choice was mainly based on 3 criteria :

  • Available templates
  • The community size (NPM downloads)
  • Ease of use

We found the following UI frameworks :

Templates

We will use the create-react-app template to generate the base file structure and we will then redo the template pages using the react-bootstrap package.

009 Testing code produced by the framework

We considered the following testing frameworks :

  • Mocha
  • Chai
  • Jest

We choose to use Jest (@testing-library/react npm package) as it is deeply integrated in the React library. It is indeed developed by Facebook that also develops React.

We choose to not use a browser integration testing tool as it is hard to setup and time consuming. We opted for the easier approach of using the testing library provided by the react-create-app template (jest and js-dom) that will only test the UI against the js-dom implementation of the web standards. This approach will not make sure that the UI of the application is rendered correctly on the supported browsers, for this we rely on the dynamically loaded javascript polyfills provided by webpack.

Miscellaneous

Styles

The CSS styles for each pages and components must be in a separate file named : [page/component].css.