La solution utilisé dans le cadre de cette démo est disponible sur GitHub: https://github.com/Laul0/MS365DevBootcamp20

1. SharePoint Framework
Trucs et Astuces
Laurent Sittler

2. Microsoft 365 Architecte / Consultant
Laurent Sittler
Montréal, 🇨🇦
https://blog.lsonline.fr
@laul0_68

3. NVM
PACKAGES
PNPM
FRAMEWORK
DOCKER
PATTERNS
CACHE
UNIT TESTS
DOCUMENTATION
https://github.com/nvm-sh/nvm
Node Version Manager
nvm install 10.23.0
nvm use 10.23.0
nvm use
• Changer de version NodeJS simplement
• Changer de version selon l’environnement (Online vs On-Premise)
• Changer de version selon la version de SharePoint Framework
• Utiliser un fichier .nvmrc

4. Packages NPM
npm outdated
npm uninstall <package>
npm i package@1.0.0 --save
npm i packageDev@1.0.0 --save-dev
• Mettre à jour les packages
• Valider la compatibilité des packages
• Supprimer les packages obsolètes et inutiles
• Installer les packages dans les bonnes dépendances
NVM
PACKAGES
PNPM
FRAMEWORK
DOCKER
PATTERNS
CACHE
UNIT TESTS
DOCUMENTATION

5. Optimiser les modules NPM
npm i -g pnpm
find ./node_modules | wc -l
rm -R node_modules
pnpm i
find ./node_modules | wc -l
• Diminuer le nombre de fichiers
• Réduire la taille globale de la solution (.sppkg)
• Valider compatibilité (commencer avec NPM et lancer PNPM à la fin)
78478
128334
https://pnpm.js.org
https://github.com/pnpm/pnpm
NVM
PACKAGES
PNPM
FRAMEWORK
DOCKER
PATTERNS
CACHE
UNIT TESTS
DOCUMENTATION

6. Utiliser des Framework
• Pour faciliter les développements
• Pour ne pas refaire la roue
• Et Contribuer (issue, PR, doc, etc.)
• Pour prendre connaissance des samples SPFx Web Part et Extensions
Web Part
Extension
Microsoft Graph
NVM
PACKAGES
PNPM
FRAMEWORK
DOCKER
PATTERNS
CACHE
UNIT TESTS
DOCUMENTATION

7. Docker
docker run -td -v $(pwd):/MS365DevBootcamp20 node:10
docker run -td -v %cd%:/MS365DevBootcamp20 node:10
docker exec -it <container-id> bash
cd MS365DevBootcamp20
npm run build
• Tester sur d’autres environnements
• Valider les dépendances
• Tester les Builds
Linux
Windows
NVM
PACKAGES
PNPM
FRAMEWORK
DOCKER
PATTERNS
CACHE
UNIT TESTS
DOCUMENTATION

8. Utiliser des Design Patterns
public getSPList(i: Guid): Promise<Array<Object>> {
return new Promise((resolve, reject) => {
/* votre code asynchrone */
}).catch((e) => {
reject(e);
});
});
}
public static getInstance(): MyClass {
if (!this._instance) {
this._instance = new MyClass();
}
return this._instance;
}
• 23 Design Patterns
• Favoriser le code totalement asynchrone
• Code orienté objet
• Favoriser React même dans les extensions
https://www.tutorialspoint.com/design_pattern/index.htm
NVM
PACKAGES
PNPM
FRAMEWORK
DOCKER
PATTERNS
CACHE
UNIT TESTS
DOCUMENTATION

9. Optimiser vos requêtes
return sp.web.getFolderByServerRelativePath(folderRelativeUrl).listItemAllFields.select('id').get().then((r) => { return r.ID; });
const restRequest = siteUrl + '/_api/Web/Lists/GetByTitle(‘ + t + ')/?$select=Id’;
localStorage.setItem(CACHEKEY, JSON.stringify(c));
localStorage.getItem(CACHEKEY);
sessionStorage.setItem(CACHEKEY, JSON.stringify(c));
sessionStorage.getItem(CACHEKEY);
document.cookie
• Choisir
• LocalStorage ou SessionStorage: traitement des données
• Cookies: préférences visiteur
• Expiration adaptée
• Limiter le poids de la réponse ($select)
PnPJs
REST
NVM
PACKAGES
PNPM
FRAMEWORK
DOCKER
PATTERNS
CACHE
UNIT TESTS
DOCUMENTATION

10. Les Tests Unitaires avec Jest
• Valider la résistance de votre code
• Assurer un niveau de qualité du code
• Optimiser votre code
• Avoir des métriques
• Mettre en place des Mocks
• Automatisation des tests, des builds, des déploiements
NVM
PACKAGES
PNPM
FRAMEWORK
DOCKER
PATTERNS
CACHE
UNIT TESTS
DOCUMENTATION

11. Une documentation
• Contribution
• Développeurs (prérequis, point à prendre en considération)
• Template (bug, fonctionnalité, PR)
• Fonctionnelle / Usage (ex: wiki, page, doc)
• Typedoc (^0.16.11)
NVM
PACKAGES
PNPM
FRAMEWORK
DOCKER
PATTERNS
CACHE
UNIT TESTS
DOCUMENTATION

12. FIN
NVM
PACKAGES
PNPM
FRAMEWORK
DOCKER
PATTERNS
CACHE
UNIT TESTS
DOCUMENTATION