SharePoint Saturday Montréal#SPSMontreal 2 avril 2016 SharePoint Saturday Montréal Déveloper un add-in SharePoint d’envergure avec Angular Pierre Bourassa,

Présentation au sujet: "SharePoint Saturday Montréal#SPSMontreal 2 avril 2016 SharePoint Saturday Montréal Déveloper un add-in SharePoint d’envergure avec Angular Pierre Bourassa,"— Transcription de la présentation:

1 SharePoint Saturday Montréal#SPSMontreal 2 avril 2016 SharePoint Saturday Montréal Déveloper un add-in SharePoint d’envergure avec Angular Pierre Bourassa, Pascal Bonheur Architectes de solution - UMAknow

2 SharePoint Saturday Montréal#SPSMontreal Qui sommes-nous

3 SharePoint Saturday Montréal#SPSMontreal Un app d’envergure commence petite “There are two ways of constructing a software design. One way is to make it so simple that there are obviously no deficiencies. And the other way is to make it so complicated that there are no obvious deficiencies.”— C.A.R. Hoare

4 SharePoint Saturday Montréal#SPSMontreal Démo UManage 4

5 SharePoint Saturday Montréal#SPSMontreal Évolution de la solution 1 fichier javascript jQuery CEWP avec jslink Edit Form natif Navigation plus complexe Vues additionnelles – tableaux avec filtres “back” dans le navigateur Déploiement – code et data Création de la liste de cartes Solution : Utiliser Angular Construire en add-in

6 SharePoint Saturday Montréal#SPSMontreal Où mettre les données? AppWeb Moins visible par les utilisateurs Provisioning intégré avec l’app Désinstallation complète avec l’app

7 SharePoint Saturday Montréal#SPSMontreal Où conserver le code – quel SCM ?

8 SharePoint Saturday Montréal#SPSMontreal git + GitHub

9 SharePoint Saturday Montréal#SPSMontreal You need to sign in or sign up before continuing. : node- expat

10 SharePoint Saturday Montréal#SPSMontreal

11 SharePoint Saturday Montréal#SPSMontreal Structure du code 1 module 1 route 1 controller 1 HTML – router n directives n factories 1 module 1 route 1 controller 1 HTML – router n directives n factories

12 SharePoint Saturday Montréal#SPSMontreal Structure du code – Angular 12

13 SharePoint Saturday Montréal#SPSMontreal Execution du code 13

14 SharePoint Saturday Montréal#SPSMontreal Packaging de l’app 14

15 SharePoint Saturday Montréal#SPSMontreal Construire/packager l’add-in Beaucoup de fichiers – on doit packager Quand on a commencé: Grunt était le king

16 SharePoint Saturday Montréal#SPSMontreal

17 SharePoint Saturday Montréal#SPSMontreal 1200 plug-ins 23 000 downloads / jr Codification – javascript Pipes 4000 plug-ins 37 000 download / jr Configuration – JSON Fichiers temporaires

18 SharePoint Saturday Montréal#SPSMontreal

19 SharePoint Saturday Montréal#SPSMontreal Exemple de notre fichier Gulp

20 SharePoint Saturday Montréal#SPSMontreal NPM – installer gulp npm install gulp --save-dev npm install gulp --global Pourquoi installer globalement et localement? http://blog.dwaynecrooks.com/post/110903139442/why- do-we-need-to-install-gulp-globally-and

21 SharePoint Saturday Montréal#SPSMontreal Build dans Visual Studio Utilisation de deux modules: Module dist qui contient le contenu minifié Module Scripts qui contient le contenu pour développement et debug Le module est exclut lorsqu’on build en mode Release 21

22 SharePoint Saturday Montréal#SPSMontreal Modules externes Sans eux, la vie serait tellement plus difficile “Most software today is very much like an Egyptian pyramid with millions of bricks piled on top of each other, with no structural integrity, but just done by brute force and thousands of slaves.”—Alan Kay

23 SharePoint Saturday Montréal#SPSMontreal npm et package.json 23

24 SharePoint Saturday Montréal#SPSMontreal Support internationalization Pourquoi les appeler.uma?

25 SharePoint Saturday Montréal#SPSMontreal Large tables Défi = utilisation de Angular avec beaucoup de données binder Habituellement au delà de 2000 champs, le digest cycle commence a être lent Première tentative avec du one- way binding Utilisation de ng-grid Utilisation de ui-grid : problème de performance avec beaucoup de colonne et de la logique d’affichage 25

26 SharePoint Saturday Montréal#SPSMontreal Large tables Utilisation de ag-grid https://www.ag-grid.com/ Utilise de la « virtualisation de colonne » pour ne pas avoir de digest cycle sur les données non affiché Très performant avec beaucoup de ligne ET colonnes Excellente performance pour du style conditionnel Excellente performance pour des calculs avec toutes les données 26

27 SharePoint Saturday Montréal#SPSMontreal Search Autocomplete Objectif de la fonctionnalité = retrouver rapidement une carte dans un Board Utilisation de massAutoComplete pour Angular (http://hakib.github.io/MassAutocomplete/)http://hakib.github.io/MassAutocomplete/ Possibilité de recherche « floue » Possibilité d’utiliser une directive angularJS comme résultat 27

28 SharePoint Saturday Montréal#SPSMontreal Routing

29 SharePoint Saturday Montréal#SPSMontreal $templateCache 29

30 SharePoint Saturday Montréal#SPSMontreal Responsive layout

31 SharePoint Saturday Montréal#SPSMontreal Underscore / lodash

32 SharePoint Saturday Montréal#SPSMontreal Lodash – exemple let menuItem = _.chain(Navigation.get("topMenu")).map(function(group){ return group.items; }).flatten().map(function(group){ return group.items; }).flatten().findWhere({label: menuLabel}).value();

33 SharePoint Saturday Montréal#SPSMontreal Modules internes On ne trouve pas tout sur GitHub

34 SharePoint Saturday Montréal#SPSMontreal Accès à SharePoint

35 SharePoint Saturday Montréal#SPSMontreal 35

36 SharePoint Saturday Montréal#SPSMontreal Lecture de la taxonomie – asynchrone Promises

37 SharePoint Saturday Montréal#SPSMontreal Trucs Angular

38 SharePoint Saturday Montréal#SPSMontreal Intégrer Angular dans non-angular Challenge = App construite initialement en jQuery Objectif = Utiliser du Angular pour développer des nouvelles fonctionnalités dans un écran bati en jQuery Exemple = Fonctionnalité de Quick Entry 38

39 SharePoint Saturday Montréal#SPSMontreal Intégrer Angular dans non-angular Utilisation de la fonction angular.injector pour bâtir un injecteur en dehors d’une app Angular Utilisation de $rootScope.$new() pour bâtir un nouveau scope pour chaque élément Création d’une directive Utilisation de append pour ajouter le html et $compile pour compiler hors d’une App Angular 39

40 SharePoint Saturday Montréal#SPSMontreal En conclusion UManage est disponible gratuitement sur le App Store Angular Courbe d’apprentissage élévée Performance – pas toujours au rendez-vous Le code devient structuré et facile à modifier Une fois la structure montée, même des non-experts peuvent contribuer Angular 2 Coexistence possible Réécriture assez substantielle 40

41 SharePoint Saturday Montréal#SPSMontreal Or Argent Merci à nos commanditaires ! Bronz e

42 SharePoint Saturday Montréal#SPSMontreal Ce soir à 17h 3971 Ontario Est