aOS Genève
22 juin 2017
New Experience & SharePoint Framework
Antoine LARZILIERE & Jean NETRY-VALERE

Antoine Larzillière
/antoine-larzilliere-a9521546/
Développeur autour des technos Microsoft
Principalement SharePoint / ASP.NET
Front-end Dev (Angular & Cie)

Jean NETRY-VALERE
/jeannetryvalere/
Consultant chez Aerow
Full SharePoint depuis 2010
Office 365 depuis 1 an

Expérience Moderne

Naissance en 2000
Historique
Strategy Customer Benefit
Great Integrated Solution • Easiest place to create and find
information
• Eliminate complex integration work
Out-of-Box Web workspace • Fast solution without desktop touch
or coding
• Customize via Dashboard and add
apps via designer
Compelling Office Integration • Minimize new training
• Make desktop smarter and leverage
knowledge
Easy & Flexible Deployment • Use in bottoms-up Team Sites or
top-down Portals
• Don’t require changing infrastructure
to start

Historique
De 2001 à Online

Historique
De 2001 à Online

Historique
De 2001 à Online
Cloud First, Mobile first

Historique
De 2001 à Online

Expérience Moderne
• Disponible depuis 1 an
• Sur SharePoint Online
• Et donc OneDrive
• Delve (et l’ex-MySite)
• Pas d’annonce officielle pour SharePoint 2016 On-premise
Introduction

Expérience Moderne
Pour quels objets ?
IIIII
Groupes Offices 365 Sites d’Equipes Liste et Bibliothèques

Expérience Moderne
Groupe Office 365
Disponible pour la collection de sites
associée au groupe (GROUP#0)
Disponible pour le OneDrive du Groupe

Expérience Moderne
• Sites d’équipe « Team Site »
• Template de site STS#0 partiellement intégré
• Migration possible des Collections de sites sous-site par PowerShell
via Features
• Disponible pour les autres modèles de sites mais expérience
discontinue
Sites

Expérience Moderne
• Uniquement accessible pour
• les listes personnalisées #100
• les bibliothèques de document #101
• Possibilité de basculer à l’interface classique
• Cookie de session splnu=0
Listes et bibliothèques

Expérience Moderne
• Type de contenu « Page de site» (Site Page)
• Remplace une page de wiki ou publication
• Processus simplifié: Brouillon => Publié
• Type de contenu « Actualités » (News)
• Est une “Site Page”
• Propriétés liées
• Promoted State = 2 (au lieu de 0)
• First Published Date affectée
• Recherche
• Pages de résultats de recherche modernisées
• Recherche avancée toujours vers le Search Center
Pages

Nouveaux Paradigmes
• Simplicité et Efficacité
• Privilégié à la richesse des fonctionnalités
• Disparition du ruban Office
• Remplacée par la barre d’action
• Menu contextuel enrichi
• Navigation par panneaux
• Superposés pour les fonctionnalités
• Juxtaposés pour les éditions / consultations
Ergonomie

Nouveaux Paradigmes
• Sauvegarde automatique
• à la perte du focus (ou sortie du champ)
• Pas d’annulation d’action (undo)
• Adaptatif (Responsive)
• Pour tous les périphériques
• Dégradation gérée
Responsive & Auto-Sauvegarde

Nouveaux Paradigmes
• Orientation Single page Application
• Page based App
• List based App
• Pages de formulaires d’éléments
• 2 formulaires out of the box
• Nouveau, Modification
• Plus de formulaire de visualisation (View Form)
• Navigation direct sur le formulaire d’édition
• Promotion de PowerApps
Application monopage

Limitations majeures
• Certaines fonctionnalités de l’ancien ruban absentes:
• Connection à Office (Outlook, Access, Export Excel)
• Ouvrir en mode explorateur
• Déclarer un enregistrement
• Navigation
• Metadata navigation and filtering
• Tree view
• Columns
• External Data
• Publishing columns (Publishing HTML, Publishing Image, Publishing Hyperlink)
Expérience moderne vs classique

Expérience Moderne
• Le modèle de site « Communication Site »
Les prochaines sorties
• Nouveau modèles de pages
• Nouvelles WebParts

SharePoint Framework

Historique
La genèse…
SharePoint Portal Server 2001 SharePoint Portal Server 2003 SharePoint Office Server 2007
2001 2003 2006
ASP ASP.NET
WebParts
CAML
Publishing
XSLT

Historique
La revolution…
SharePoint Server 2010 SharePoint Server 2013 SharePoint Server 2016, SPO
2010 2012 2016…
JSOM
REST API
SEARCH
JSOM /REST API ++
Hybridation
Modern sites / pages
SharePoint Framework

SharePoint Framework
• Standards du développement Front-End moderne
• Touche un plus grand nombre de développeurs
• Mobilité au sein de l’entreprise
• Cohérence entre 1st et 3rd party (eux et nous)
• SPFx est utilisé par MS pour les WebPart « modernes »
• Mobile (nativement responsive)
Principes

SharePoint Framework
• Outils de build et de mise en place
• Node.js
• NPM
• Yeoman
• Gulp
• WebPack
• TypeScript
Stack Web Moderne

SharePoint Framework
• Framework JS
• React
• Angular
• Vue.js
• jQuery
• …
Stack Web Moderne

SharePoint Framework
• IDE
• Visual Studio Code
• Sublime
• Atom
• Visual Studio
• Notepad
• …
Stack Web Moderne

SharePoint Framework
Modern VS Classic tools
MS Build

SharePoint Framework
• Prérequis
• Node.JS
• NPM / Yarn
• Gulp
• Yo
• Pour tester en vrai
• Un site SharePoint Online (avec droits de contribution) 
• En Prod
• Un app catalog
• Un CDN (Azure / Office 365 public CDN…)
Workflow de développement

SharePoint Framework
Workflow de développement
Installation du Générateur SharePoint
Création du Projet
Code
Test
Workbench
Test SharePoint
Packaging
Déploiement
Livraison

Good to know….
• Les WebParts SPFx peuvent-elles être ajoutés à une page classique ?
• Oui
• SharePoint Framework on-premise ?
• Heheh, oui, prévu Feature Pack 2 (fin 2017)… So wait and see…
• Quid de JSLink, des Delegate control, ou des Custom Actions
• ????

Extensions
• ApplicationCustomizers
• Ajoute un script à une page et permet d’enrichir une page avec un rendu
personnalisé
• Remplacant des “Delegate Controls”
• FieldCustomizers
• Permet de customiser les vues de données modifiant les champs d’une liste
• Remplacant des “JS Link”
• CommandSets
• Permet d’ajouter des commandes d’actions au sein des menus, avec des
comportements implementé en code client
• Remplacant des “Customs Actions”
Le future

aOS Genève
22 juin 2017
Merci à nos sponsors !