Radio-Canada OHdio

L'application Web et Mobile Audio de Radio-Canada est la destination unique de tous les auditeurs de Radio-Canada qu'ils écoutent du contenu parlé ou de la musique.

Documentation

Normes de développement : Confluence Dev UI

Normes et règles d'affaires du produit OHdio : Confluence

Design : Figma, Zeroheight

Pré-requis

1. Node 8+
2. Mettre à jour NPM

npm install npm@latest -g

3. Éditeur de code Visual Studio Code - recommandé
4. Extensions VSCode recommandé - ESLint, GitLens, IndentRainbow

Installation de l'app Ohdio V5 sur votre poste (Windows ou MacOS)

Sous le répertoire GIT/Ohdio

rm -Rf node_modules (Seulement lors de changement de packages au projet)
npm install

Exécution

APP V5 Permet de :

• Lancer V5 en développement local
• Lancer V5 en développement local (SSR seulement)
• Vérifer le routage
• Supprimer la cache
• Changer de contexte - appOhdio

npm start
Changer le contexte - appOhdio (Entre un changement de projet)

Générer une nouvelles composante, un module ou une page

npm run generate

Générer le Sprite d'îcones SVG

npm run generate-svg

Validation du typage

npm run type-check

Points d'entrés

| Service | Lien | Détails | ------ | ------ | ------ | | Dev | https://lcl-v5.radio-canada.ca/ohdio/ | | Neuro version | http://aq10-rli-services.radio-canada.ca/neuro/version | Déterminé l'env Scoop utilisé sur Sphère

Déploiement des environnments

| Azure | | ------ | | Ohdio Dev | | Ohdio Staging | | OHdio Prod |

Arborescance des fichiers

.
+-- /.vscode
|   +-- launch.json               // Script de démarrage (non utilisé à ce moment-ci)
|   +-- settings.json             // Settings VSCode
+-- /appOhdio                     // Contient tous les fichiers pour l’éxécution de l’application
|   +-- /assets                   // favicon, images, js, json, svg
|   +-- /components               // Composantes de présentation (Atomic Design)
|       +-- /ads                  // Composantes publicitaires
|       +-- /attachments          // Composantes utilisé dans BodyHtml (Article de contenu)
|       +-- /cards                // Composantes de cartes de produits dans une liste ou lineups.
|       +-- /interactives         // Composantes d’éléments et modules interactifs
|       +-- /layouts              // Composantes de structure de la mise en page
|       +-- /lineups              // Composantes de lineups de contenu
|       +-- /pictorials           // Composantes graphiques
|       +-- /textuals             // Composantes de contenu et textes statiques
|       +-- /views                // Composantes des mise en pages
|   +-- /containers               // Logique affaire, gestion des actions, call aux api, etc
|       +-- /App                  // Point d’entrée de l’application
|       +-- /AppShell             // Point d’entrée App
|       +-- /modules              // Modules qui englobe une composante ayant besoin au State de l’application
|       +-- /pages                // Modèle de pages du site renvoyés selon les différents Routes fourni
|           +-- /LegacyRedirects  // Redirection dans anciens sites ICI Première et ICI Musique
|       +-- /Root                 // Point d’entrée de l’application
|   +-- /lib                      // Librairies partagé
|       +-- /ads                  // Librairies publicitaires
|       +-- /constants            // Constantes globales et de contenus
|       +-- /enums                // Fichier d’énumerations de valeur possible de props
|       +-- /generated_types      // Typage complet de Sphère généré (Convertir le format CLRF des fichiers générés en format LF)
|       +-- /helpers              // Composantes utilitaires non classifiés
|       +-- /hooks                // Hooks personalisés
|       +-- /observables          // Hook d’observation des éléments
|       +-- /styled               // Librairies de styles pour Styled-Component
|           +-- /colors           // Palette de couleur et CSSVars
|           +-- /grid             // Construction de la grille
|           +-- /interactives     // Constantes des éléments interactifs
|           +-- /layouts          // Utilitaire true/false
|           +-- /pictorials       // Styles graphiques
|           +-- /textuals         // Police et taille de font
|           +-- GlobalStyles.js   // Reset CSS, styles génériques
|       +-- /typeguards           // Validation d’union entre deux typages
|       +-- /types                // Typages globales des composantes Front du projet
|   +-- /middlewares              // Middlewares Redux
|   +-- /scripts                  // Script de génération de composantes avec command
+-- /dist                         // Destination Bundle (auto-généré)
+-- .eslintrc                     // Configuration eslint

Convention de code

Lorsque vous écrivez du code (javascript ou styled-component), la configuration de l'éditeur ainsi que l'analyseur de code (EsLint) sont basés sur les conventions airBnb.

| Syntaxe | | ------ | | Css & Sass | | JS ES6 | | React & JSX |

Langages

• Typescript: Javascript, TS, TSX
• Bunker/VCinq: C#, Razor, HTML5, Javascript
• API de présentation: C#

Normes de documentations

• Documentation UI et règles d'affaires sous Confluence.
• Chaque Interface doivent avoir des props avec description.

export interface ComponentProps {
  /** Description */
  prop?: string;
}

• Chaque composante doit avoir un titre, un description et usage.
• Chaque composante doit avoir son change log (Qui, quand et quoi)
• Les textes et libellés doivent être sous lib/constants/labels
• Les liste de valeurs doivent tous être des Enums, si global mettre sous lib/enums/
• Les types globales qui ne proviennet pas de SPhère sont géré sous lib/types
• Le typages générés par Sphère est sous lib/generated_types, les modifications ici risque d'être écrasées à la prochaine génération.

/**
 * Description de la composante et usage
 * - Prénom Nom - YYYY/MM/DD - Changements détaillés
 */

• Documenter les function et paramètres requis.

/**
 * Description de la fonctionalité
 * @param {#} paramètres - description
 * @returns
 */

Ordre des importations

1. React
2. Plugins & Dependences Radio-Canada
3. Librairies
4. Containers
5. Components
6. Relatives

Dépendances de projet

B2C Client Authentificator @cbcrc-sso/b2c-oauth-client

Nouvelle authentification Radio-Canada unifié.

Body Html @cbcradcan/bodyhtml

Projet réunissant les widgets connecté, formatage de contenu provenant de Scoop utilisé dans les articles.

Lecteur audio @cbcradcan/ohdio-player

Lecteur audio jouant des médias audio et playlists.

Shell Unit @cbcradcan/shellunit

Intégration de la navigation principale de Radio-Canada et du message d'alertes des cookies.

Vcinq @cbcradcan/vcinq

Base des projets React.

• Guide d'utilisation
• Changelog et Nouveautés
• Le déploiement de l'environnement basé sur la librairie React se fera en plusieurs phases.
• Bunker/DotCa garde la responsabilité de construire le modèle (state) de chacune des pages web. Bunker/DotCa sera remplacé à terme par une API de présentation, toujours en c#/.net
• BunkerNext (React) effectue toute les logiques de présentations incluant (html, css, interaction javascript)

Widget Perso @cbcradcan/widgetsperso

Gestion de la modale d'inscription à l'info-lettre OHdio par l'équipe Pivot/perso.

Plugins

Quelques uns des modules npm utilisés :

| Plugin | Détails | Usage | | ------ | ------ | ----- | | classNames | A simple JavaScript utility for conditionally joining classNames together. | Global | | he | “HTML entities” is a robust HTML entity encoder/decoder written in JavaScript. | Text | | html-to-react| A lightweight library that converts raw HTML to a React DOM structure. | BodyHtml | | insane | Lean and configurable whitelist-oriented HTML sanitizer | String helper | | lodash | A modern JavaScript utility library delivering modularity, performance & extras. | Global | | query-string | Parse and stringify URL query strings. | Global | | react | React is a JavaScript library for building user interfaces. | Global | | react-aria/focus | A FocusScope manages focus for its descendants. | Global | | react-dom | Entry point to the DOM and server renderers for React. | Global | | react-redux | Redux is a predictable state container for JavaScript apps. | Global | | react-transition-group | A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind. | Modal, PageTransition, TouchDrawerPanel | | redux | Redux is a predictable state container for JavaScript apps. | Global | | react-router | React Router is a collection of navigational components that compose declaratively with your application. | Global | | redux-saga | Middleware to handle side effects in Redux | Global | | reselect | Simple “selector” library for Redux | Global | | striptags | This function tries to return a string with all NULL bytes, HTML tags stripped from a given string. | Text | | style-components | Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. | Components |

Markdown-Cheatsheet