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

SharePoint Saturday Montréal#SPSMontreal Qui sommes-nous

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

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

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

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

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

SharePoint Saturday Montréal#SPSMontreal git + GitHub

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

SharePoint Saturday Montréal#SPSMontreal

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

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

SharePoint Saturday Montréal#SPSMontreal Execution du code 13

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

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

SharePoint Saturday Montréal#SPSMontreal

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

SharePoint Saturday Montréal#SPSMontreal

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

SharePoint Saturday Montréal#SPSMontreal NPM – installer gulp npm install gulp --save-dev npm install gulp --global Pourquoi installer globalement et localement? do-we-need-to-install-gulp-globally-and

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

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

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

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

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

SharePoint Saturday Montréal#SPSMontreal Large tables Utilisation de ag-grid 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

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

SharePoint Saturday Montréal#SPSMontreal Routing

SharePoint Saturday Montréal#SPSMontreal $templateCache 29

SharePoint Saturday Montréal#SPSMontreal Responsive layout

SharePoint Saturday Montréal#SPSMontreal Underscore / lodash

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();

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

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

SharePoint Saturday Montréal#SPSMontreal 35

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

SharePoint Saturday Montréal#SPSMontreal Trucs Angular

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

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

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

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

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