SlideShare a Scribd company logo
aOS Luxembourg
4 décembre 2017
SharePoint & JavaScript – Modern Development
Christopher Clément
@ChrisClement_BE
Yannick Plenevaux
@yp_code
aOS Luxembourg
4 décembre 2017
Yannick Plenevaux
SharePoint & Office 365 Consultant
MCSD App Builder
iKe Consulting
@ yannick.plenevaux@gmail.com
@yp_code
https://ypcode.wordpress.com
Christopher Clément
Business Analyst – SharePoint Specialist
MCPD – MCITP – Former MVP
iKe Consulting
@ clem.christopher@gmail.com
@ChrisClement_BE
https://christopherclementen.wordpress.com
aOS Luxembourg
4 décembre 2017
Agenda
• History of SharePoint development
• Why JavaScript ?
• General JavaScript concerns
• SharePoint Framework
• SharePoint & JavaScript concerns
• SharePoint & JavaScript embedding
• JavaScript & Permissions
• Q&A
aOS Luxembourg
4 décembre 2017
SharePoint development - History
Farm Solutions
• Globally deployed
• Fully trusted
• Server-side code (.NET)
• Within SharePoint
process (W3WP)
2007
• Sandboxed Solutions
• Locally deployed
• Restricted privileges
• Limited Server-side
code (.NET)
• Sandboxed process
• CSOM
• JSOM
• ListData.svc
2010 2013 2016
• REST API
• JSLink, CSR
• SharePoint Hosted Add-in’s
• In SP
• HTML5 apps
• Isolated
• JSOM, REST
• Provider Hosted Add-in’s
• Outside of SP
• CSOM, REST
• Any
Language/Platform
SharePoint Framework (SPFx)
• WebParts and Extensions
• Client Side (Browser)
• REST
• Targets Modern UI
• Modern Toolchain
• Common structure
• JS deployed by Admin
aOS Luxembourg
4 décembre 2017
SharePoint Add-ins
• Specific permissions are granted to Add-ins
• Full Page mode or “embedded” in SharePoint pages through Iframe’s
• SharePoint Hosted
• Hosted within the SharePoint farm/tenant
• HTML5 applications (JS Only , JSOM, REST API)
• Isolated using different domain name
• Seems there is no more investment from Microsoft
• Provider Hosted
• Hosted on a third-party provider
• Authenticated via Azure ACS/AAD (Low Trust) or Server-to-Server trust (High Trust)
• Can consist in only a Web API
• Can be developed with any technology (C#, NodeJS, PHP, Python, …)
aOS Luxembourg
4 décembre 2017
SharePoint Framework (SPFx)
• Client Side
• Develop WebParts or extend SharePoint UI
• Uses Modern Toolchain (NodeJS, TypeScript, Gulp, Yeoman, …)
• Defines a common way for JS development on SharePoint
• JS Applications must be trusted and deployed by administrators
• SharePoint Online:
• GA since beginning 2017
• Fully available for Modern UI and partially for Classic UI (Only WebParts)
• SharePoint 2016:
• Partially available since September 2017 with FP2
• Only WebParts on Classic UI
aOS Luxembourg
4 décembre 2017
What is JavaScript ?
• A scripting language driving the behavior of the browser
• Manipulates the DOM
• Handle user events (click, mouse move, scroll, …)
• JavaScript has NOTHING to do with Java
• Marketing agreement between Netscape and Sun
• First shipped with Netscape browser in 1996
• Normalized through ECMAScript
• Quickly implemented in all major browsers
• Single-threaded
• The same Thread handles UI and business logic
• Event-driven & Asynchronous
• Not initially designed for complex applications
aOS Luxembourg
4 décembre 2017
Why JavaScript ?
• Better UI and UX
• No page reload
• Dynamic input controls
• Real time form validation
• Responsive User Experience
• User friendly
• Is supported by every current browsers
• No need for plugins (Flash and Silverlight are dead… RIP ! )
• There is a browser running JavaScript on every smartphone and tablet
nowadays
aOS Luxembourg
4 décembre 2017
General JavaScript concerns
• Weakly typed script language
 TypeScript
• Dependencies nightmare
 Webpack
• No defined project structure
 Yeoman
• No build and ALM tools
 Gulp
aOS Luxembourg
4 décembre 2017
Other SPFx advantages
• A common framework with base and utility classes
• A development Workbench available locally or hosted on SharePoint
• SharePoint is not required to develop the UX and UI of WebParts
• JavaScript bundle can be hosted anywhere (CDN or SharePoint)
• Native support of Office UI Fabric styling and components
• Native support for localized resources
• Integrated unit testing tooling (Chai/Mocha)
• Integrated CSS scalability tooling (Sass)
• Dynamic, responsive and sexy Property Pane
• Development can be done with any IDE, on any OS
• Can leverage any existing JS Framework
• Every JS developer can easily become a SharePoint developer
aOS Luxembourg
4 décembre 2017
SPFx - an unknown world ?
Almost every new technology matches a well known one in our
beloved SharePoint/.NET development world
aOS Luxembourg
4 décembre 2017
DEMO 1
Develop with SPFx
aOS Luxembourg
4 décembre 2017
SharePoint & JavaScript concerns
• The JS application will interact with SharePoint through REST API (or
JSOM)
 Will have the permissions of the current user.
A JavaScript application will never be able to do, on its own, more than
what the current user is allowed to
BUT
will be able to use the current user permissions to do something
unexpected
aOS Luxembourg
4 décembre 2017
SharePoint & JavaScript concerns
• JavaScript can be embedded within
SharePoint pages and be executed
on the behalf of any users that will
visit the page
• Who is able to embed scripts ?
 Any user that has the Add
and Customize Pages permission
• Some use cases could have
been forgotten
• Some users can have bad intent
aOS Luxembourg
4 décembre 2017
DEMO 2
Malicious Script
aOS Luxembourg
4 décembre 2017
SharePoint & JavaScript embedding
• JavaScript embedding is ALWAYS
DISABLED on Modern UI
• JavaScript embedding can be turned off
on Classic UI
 Will impact several built-in
components such as
• Search WebParts
• Content Rollup
• Document Sets
• …
• SPFx packages are deployed via app
catalog by administrators
• Administrators are always aware of
what can be executed on their tenant
aOS Luxembourg
4 décembre 2017
DEMO 3
Deploy SPFx solutions
aOS Luxembourg
4 décembre 2017
JavaScript & Permissions
• We might need our application to do more than what the user is
allowed to
 we must delegate the job to a trusted third-party
• The third-party is authorized through App-Only permissions
• In the context of SharePoint Online, an Azure Function is a good
option
• SharePoint Online always has an underlying Azure AD, the logged-in user can
easily authenticate against the Azure Function
• Azure Functions limit the maintenance and running costs
• Azure Functions can be written in several languages
• Azure Functions can be replaced by any third party if better suited
aOS Luxembourg
4 décembre 2017
DEMO 4
Delegate to Azure Functions
aOS Luxembourg
4 décembre 2017
Summary
• JavaScript is probably the best choice for responsive and user
friendly UI in browser
• SPFx IS the way to go for modern development in SharePoint
• Add-ins (Provider Hosted) will remain in shapes of APIs or full
external applications interacting with SharePoint
• Azure Functions are a good fit to implement Server-side code
on Serverless architecture (handled authentication with Azure
AD)
• Custom APIs communicating with SharePoint can be hosted on
any platform in any technology (through REST API)
aOS Luxembourg
4 décembre 2017
Questions ?
aOS Luxembourg
4 décembre 2017
Thank you !
aOS Luxembourg
4 décembre 2017
References
• https://support.office.com/en-us/article/Allow-or-prevent-
custom-script-1f2c515f-5d7e-448a-9fd7-835da935584f?ui=en-
US&rs=en-US&ad=US
• https://support.office.com/en-us/article/Security-
considerations-of-allowing-custom-script-b0420ab0-aff2-4bbc-
bf5e-03de9719627c
• https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-
parts/guidance/connect-to-api-secured-with-aad
• https://aka.ms/sppnp
aOS Luxembourg
4 décembre 2017
Merci à notre sponsor !

More Related Content

What's hot

SharePoint Fest Seattle 2018 - From SharePoint to Office 365 Development
SharePoint Fest Seattle 2018 - From SharePoint to Office 365 DevelopmentSharePoint Fest Seattle 2018 - From SharePoint to Office 365 Development
SharePoint Fest Seattle 2018 - From SharePoint to Office 365 Development
Sébastien Levert
 
ESPC Webinar - From SharePoint to Office 365 Development
ESPC Webinar - From SharePoint to Office 365 DevelopmentESPC Webinar - From SharePoint to Office 365 Development
ESPC Webinar - From SharePoint to Office 365 Development
Sébastien Levert
 
SharePoint Fest DC 2018 - From SharePoint to Office 365 Development
SharePoint Fest DC 2018 - From SharePoint to Office 365 DevelopmentSharePoint Fest DC 2018 - From SharePoint to Office 365 Development
SharePoint Fest DC 2018 - From SharePoint to Office 365 Development
Sébastien Levert
 
Enhance your Javascript with Typescript - Félix Billon
Enhance your Javascript with Typescript - Félix BillonEnhance your Javascript with Typescript - Félix Billon
Enhance your Javascript with Typescript - Félix Billon
aOS Community
 
Citizen Developer Tools (session at SharePoint Saturday Houston 4/28/2018) by...
Citizen Developer Tools (session at SharePoint Saturday Houston 4/28/2018) by...Citizen Developer Tools (session at SharePoint Saturday Houston 4/28/2018) by...
Citizen Developer Tools (session at SharePoint Saturday Houston 4/28/2018) by...
Antti Koskela
 
Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...
Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...
Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...
BIWUG
 
PowerApps and Flow, one year later
PowerApps and Flow, one year laterPowerApps and Flow, one year later
PowerApps and Flow, one year later
BIWUG
 
Iconus 2016
Iconus 2016Iconus 2016
Iconus 2016
Mark Roden
 
Building your microsite with Documents & Sites
Building your microsite with Documents & SitesBuilding your microsite with Documents & Sites
Building your microsite with Documents & Sites
Richard Olrichs
 
Kickstart android development with xamarin
Kickstart android development with xamarinKickstart android development with xamarin
Kickstart android development with xamarin
Foyzul Karim
 
SharePoint Development in Government Environments
SharePoint Development in Government EnvironmentsSharePoint Development in Government Environments
SharePoint Development in Government Environments
Gunjan Datta
 
User Interface Tips and Tricks for the Power User - Penelope Coventry
User Interface Tips and Tricks for the Power User - Penelope CoventryUser Interface Tips and Tricks for the Power User - Penelope Coventry
User Interface Tips and Tricks for the Power User - Penelope Coventry
SPC Adriatics
 
Microsoft Graph with ASP.NET MVC
Microsoft Graph with ASP.NET MVCMicrosoft Graph with ASP.NET MVC
Microsoft Graph with ASP.NET MVC
BIWUG
 
Building the Perfect Office 365 Tenant
Building the Perfect Office 365 TenantBuilding the Perfect Office 365 Tenant
Building the Perfect Office 365 Tenant
BIWUG
 
Azure Websites
Azure WebsitesAzure Websites
Azure Websites
Senthamil Selvan
 
Azure and the Modern Datacenter - Azure Networking
Azure and the Modern Datacenter - Azure NetworkingAzure and the Modern Datacenter - Azure Networking
Azure and the Modern Datacenter - Azure Networking
Michael Blumenthal (Microsoft MVP)
 
Let's do PowerBi - Together
Let's do PowerBi - TogetherLet's do PowerBi - Together
Let's do PowerBi - Together
BIWUG
 
Managing your user data with Sitecore xDB
Managing your user data with Sitecore xDBManaging your user data with Sitecore xDB
Managing your user data with Sitecore xDB
Ruud van Falier
 
Office 365, Practical Adoption Strategies
Office 365, Practical Adoption StrategiesOffice 365, Practical Adoption Strategies
Office 365, Practical Adoption Strategies
BIWUG
 
Intro to the SharePoint Framework Philly Code Camp Oct 2016
Intro to the SharePoint Framework Philly Code  Camp Oct 2016Intro to the SharePoint Framework Philly Code  Camp Oct 2016
Intro to the SharePoint Framework Philly Code Camp Oct 2016
Jennifer Kenderdine
 

What's hot (20)

SharePoint Fest Seattle 2018 - From SharePoint to Office 365 Development
SharePoint Fest Seattle 2018 - From SharePoint to Office 365 DevelopmentSharePoint Fest Seattle 2018 - From SharePoint to Office 365 Development
SharePoint Fest Seattle 2018 - From SharePoint to Office 365 Development
 
ESPC Webinar - From SharePoint to Office 365 Development
ESPC Webinar - From SharePoint to Office 365 DevelopmentESPC Webinar - From SharePoint to Office 365 Development
ESPC Webinar - From SharePoint to Office 365 Development
 
SharePoint Fest DC 2018 - From SharePoint to Office 365 Development
SharePoint Fest DC 2018 - From SharePoint to Office 365 DevelopmentSharePoint Fest DC 2018 - From SharePoint to Office 365 Development
SharePoint Fest DC 2018 - From SharePoint to Office 365 Development
 
Enhance your Javascript with Typescript - Félix Billon
Enhance your Javascript with Typescript - Félix BillonEnhance your Javascript with Typescript - Félix Billon
Enhance your Javascript with Typescript - Félix Billon
 
Citizen Developer Tools (session at SharePoint Saturday Houston 4/28/2018) by...
Citizen Developer Tools (session at SharePoint Saturday Houston 4/28/2018) by...Citizen Developer Tools (session at SharePoint Saturday Houston 4/28/2018) by...
Citizen Developer Tools (session at SharePoint Saturday Houston 4/28/2018) by...
 
Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...
Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...
Yo Office! Use your SPFx Skills to Build Add-Ins for Word, Excel, Outlook and...
 
PowerApps and Flow, one year later
PowerApps and Flow, one year laterPowerApps and Flow, one year later
PowerApps and Flow, one year later
 
Iconus 2016
Iconus 2016Iconus 2016
Iconus 2016
 
Building your microsite with Documents & Sites
Building your microsite with Documents & SitesBuilding your microsite with Documents & Sites
Building your microsite with Documents & Sites
 
Kickstart android development with xamarin
Kickstart android development with xamarinKickstart android development with xamarin
Kickstart android development with xamarin
 
SharePoint Development in Government Environments
SharePoint Development in Government EnvironmentsSharePoint Development in Government Environments
SharePoint Development in Government Environments
 
User Interface Tips and Tricks for the Power User - Penelope Coventry
User Interface Tips and Tricks for the Power User - Penelope CoventryUser Interface Tips and Tricks for the Power User - Penelope Coventry
User Interface Tips and Tricks for the Power User - Penelope Coventry
 
Microsoft Graph with ASP.NET MVC
Microsoft Graph with ASP.NET MVCMicrosoft Graph with ASP.NET MVC
Microsoft Graph with ASP.NET MVC
 
Building the Perfect Office 365 Tenant
Building the Perfect Office 365 TenantBuilding the Perfect Office 365 Tenant
Building the Perfect Office 365 Tenant
 
Azure Websites
Azure WebsitesAzure Websites
Azure Websites
 
Azure and the Modern Datacenter - Azure Networking
Azure and the Modern Datacenter - Azure NetworkingAzure and the Modern Datacenter - Azure Networking
Azure and the Modern Datacenter - Azure Networking
 
Let's do PowerBi - Together
Let's do PowerBi - TogetherLet's do PowerBi - Together
Let's do PowerBi - Together
 
Managing your user data with Sitecore xDB
Managing your user data with Sitecore xDBManaging your user data with Sitecore xDB
Managing your user data with Sitecore xDB
 
Office 365, Practical Adoption Strategies
Office 365, Practical Adoption StrategiesOffice 365, Practical Adoption Strategies
Office 365, Practical Adoption Strategies
 
Intro to the SharePoint Framework Philly Code Camp Oct 2016
Intro to the SharePoint Framework Philly Code  Camp Oct 2016Intro to the SharePoint Framework Philly Code  Camp Oct 2016
Intro to the SharePoint Framework Philly Code Camp Oct 2016
 

Similar to SharePoint and javascript – modern development

2018 12-06 SharePoint - the new era of provisioning
2018 12-06 SharePoint - the new era of provisioning2018 12-06 SharePoint - the new era of provisioning
2018 12-06 SharePoint - the new era of provisioning
Yannick Plenevaux
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Brian Culver
 
Microsoft Flow : what you need to know before starting a real project
Microsoft Flow : what you need to know before starting a real projectMicrosoft Flow : what you need to know before starting a real project
Microsoft Flow : what you need to know before starting a real project
serge luca
 
Session Flow advanced - Serge Luca, Isabelle van Campenhoudt
Session Flow advanced - Serge Luca, Isabelle van CampenhoudtSession Flow advanced - Serge Luca, Isabelle van Campenhoudt
Session Flow advanced - Serge Luca, Isabelle van Campenhoudt
aOS Community
 
Swedish SharePoint UserGroup Göteborg Oct 5 2016 SharePoint Framework
Swedish SharePoint UserGroup Göteborg Oct 5 2016  SharePoint FrameworkSwedish SharePoint UserGroup Göteborg Oct 5 2016  SharePoint Framework
Swedish SharePoint UserGroup Göteborg Oct 5 2016 SharePoint Framework
David Opdendries
 
Best practices for managing and operating your SharePoint farms
Best practices for managing and operating your SharePoint farmsBest practices for managing and operating your SharePoint farms
Best practices for managing and operating your SharePoint farms
BIWUG
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
Marc D Anderson
 
Custom Development in SharePoint – What are my options now?
Custom Development in SharePoint – What are my options now?Custom Development in SharePoint – What are my options now?
Custom Development in SharePoint – What are my options now?
Talbott Crowell
 
Introduction to SharePoint Framework (SPFx)
Introduction to SharePoint Framework (SPFx)Introduction to SharePoint Framework (SPFx)
Introduction to SharePoint Framework (SPFx)
Fabio Franzini
 
aOS Canadian Tour - Quebec - From SharePoint to Office 365 Development
aOS Canadian Tour  - Quebec - From SharePoint to Office 365 DevelopmentaOS Canadian Tour  - Quebec - From SharePoint to Office 365 Development
aOS Canadian Tour - Quebec - From SharePoint to Office 365 Development
Sébastien Levert
 
SharePoint development 2017 wrap-up
SharePoint development   2017 wrap-upSharePoint development   2017 wrap-up
SharePoint development 2017 wrap-up
Joel Rodrigues
 
VJCD2017 SharePoint Framework (SPFx)
VJCD2017 SharePoint Framework (SPFx)VJCD2017 SharePoint Framework (SPFx)
VJCD2017 SharePoint Framework (SPFx)
Seiji Noro
 
SPFx- A modern development model for SharePoint
SPFx- A modern development model  for SharePointSPFx- A modern development model  for SharePoint
SPFx- A modern development model for SharePoint
Kirti Prajapati
 
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClassECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
European Collaboration Summit
 
Uncovering the Latest in SharePoint Development
Uncovering the Latest in SharePoint DevelopmentUncovering the Latest in SharePoint Development
Uncovering the Latest in SharePoint Development
Eric Overfield
 
Upgrading from Full Trust Code to Add-In Model and SharePoint Framework
Upgrading from Full Trust Code to Add-In Model and SharePoint FrameworkUpgrading from Full Trust Code to Add-In Model and SharePoint Framework
Upgrading from Full Trust Code to Add-In Model and SharePoint Framework
BIWUG
 
SharePoint Conference North America 2018 - Las Vegas - Announcements
SharePoint Conference North America 2018 - Las Vegas - AnnouncementsSharePoint Conference North America 2018 - Las Vegas - Announcements
SharePoint Conference North America 2018 - Las Vegas - Announcements
Nick Hobbs
 
SharePoint Saturday Ottawa - From SharePoint to Office 365 Development
SharePoint Saturday Ottawa - From SharePoint to Office 365 DevelopmentSharePoint Saturday Ottawa - From SharePoint to Office 365 Development
SharePoint Saturday Ottawa - From SharePoint to Office 365 Development
Sébastien Levert
 
All about SPFx
All about SPFxAll about SPFx
All about SPFx
Fabio Franzini
 
Cross Site Collection Navigation using SPFx, Powershell PnP & PnP-JS
Cross Site Collection Navigation using SPFx, Powershell PnP & PnP-JSCross Site Collection Navigation using SPFx, Powershell PnP & PnP-JS
Cross Site Collection Navigation using SPFx, Powershell PnP & PnP-JS
Thomas Daly
 

Similar to SharePoint and javascript – modern development (20)

2018 12-06 SharePoint - the new era of provisioning
2018 12-06 SharePoint - the new era of provisioning2018 12-06 SharePoint - the new era of provisioning
2018 12-06 SharePoint - the new era of provisioning
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
Microsoft Flow : what you need to know before starting a real project
Microsoft Flow : what you need to know before starting a real projectMicrosoft Flow : what you need to know before starting a real project
Microsoft Flow : what you need to know before starting a real project
 
Session Flow advanced - Serge Luca, Isabelle van Campenhoudt
Session Flow advanced - Serge Luca, Isabelle van CampenhoudtSession Flow advanced - Serge Luca, Isabelle van Campenhoudt
Session Flow advanced - Serge Luca, Isabelle van Campenhoudt
 
Swedish SharePoint UserGroup Göteborg Oct 5 2016 SharePoint Framework
Swedish SharePoint UserGroup Göteborg Oct 5 2016  SharePoint FrameworkSwedish SharePoint UserGroup Göteborg Oct 5 2016  SharePoint Framework
Swedish SharePoint UserGroup Göteborg Oct 5 2016 SharePoint Framework
 
Best practices for managing and operating your SharePoint farms
Best practices for managing and operating your SharePoint farmsBest practices for managing and operating your SharePoint farms
Best practices for managing and operating your SharePoint farms
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
 
Custom Development in SharePoint – What are my options now?
Custom Development in SharePoint – What are my options now?Custom Development in SharePoint – What are my options now?
Custom Development in SharePoint – What are my options now?
 
Introduction to SharePoint Framework (SPFx)
Introduction to SharePoint Framework (SPFx)Introduction to SharePoint Framework (SPFx)
Introduction to SharePoint Framework (SPFx)
 
aOS Canadian Tour - Quebec - From SharePoint to Office 365 Development
aOS Canadian Tour  - Quebec - From SharePoint to Office 365 DevelopmentaOS Canadian Tour  - Quebec - From SharePoint to Office 365 Development
aOS Canadian Tour - Quebec - From SharePoint to Office 365 Development
 
SharePoint development 2017 wrap-up
SharePoint development   2017 wrap-upSharePoint development   2017 wrap-up
SharePoint development 2017 wrap-up
 
VJCD2017 SharePoint Framework (SPFx)
VJCD2017 SharePoint Framework (SPFx)VJCD2017 SharePoint Framework (SPFx)
VJCD2017 SharePoint Framework (SPFx)
 
SPFx- A modern development model for SharePoint
SPFx- A modern development model  for SharePointSPFx- A modern development model  for SharePoint
SPFx- A modern development model for SharePoint
 
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClassECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
 
Uncovering the Latest in SharePoint Development
Uncovering the Latest in SharePoint DevelopmentUncovering the Latest in SharePoint Development
Uncovering the Latest in SharePoint Development
 
Upgrading from Full Trust Code to Add-In Model and SharePoint Framework
Upgrading from Full Trust Code to Add-In Model and SharePoint FrameworkUpgrading from Full Trust Code to Add-In Model and SharePoint Framework
Upgrading from Full Trust Code to Add-In Model and SharePoint Framework
 
SharePoint Conference North America 2018 - Las Vegas - Announcements
SharePoint Conference North America 2018 - Las Vegas - AnnouncementsSharePoint Conference North America 2018 - Las Vegas - Announcements
SharePoint Conference North America 2018 - Las Vegas - Announcements
 
SharePoint Saturday Ottawa - From SharePoint to Office 365 Development
SharePoint Saturday Ottawa - From SharePoint to Office 365 DevelopmentSharePoint Saturday Ottawa - From SharePoint to Office 365 Development
SharePoint Saturday Ottawa - From SharePoint to Office 365 Development
 
All about SPFx
All about SPFxAll about SPFx
All about SPFx
 
Cross Site Collection Navigation using SPFx, Powershell PnP & PnP-JS
Cross Site Collection Navigation using SPFx, Powershell PnP & PnP-JSCross Site Collection Navigation using SPFx, Powershell PnP & PnP-JS
Cross Site Collection Navigation using SPFx, Powershell PnP & PnP-JS
 

Recently uploaded

Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Nicolás Lopéz
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
Priyanka Aash
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
SubhamMandal40
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
David Wilson
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
SynapseIndia
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
Priyanka Aash
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
ankush9927
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 

Recently uploaded (20)

Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 

SharePoint and javascript – modern development

  • 1. aOS Luxembourg 4 décembre 2017 SharePoint & JavaScript – Modern Development Christopher Clément @ChrisClement_BE Yannick Plenevaux @yp_code
  • 2. aOS Luxembourg 4 décembre 2017 Yannick Plenevaux SharePoint & Office 365 Consultant MCSD App Builder iKe Consulting @ yannick.plenevaux@gmail.com @yp_code https://ypcode.wordpress.com Christopher Clément Business Analyst – SharePoint Specialist MCPD – MCITP – Former MVP iKe Consulting @ clem.christopher@gmail.com @ChrisClement_BE https://christopherclementen.wordpress.com
  • 3. aOS Luxembourg 4 décembre 2017 Agenda • History of SharePoint development • Why JavaScript ? • General JavaScript concerns • SharePoint Framework • SharePoint & JavaScript concerns • SharePoint & JavaScript embedding • JavaScript & Permissions • Q&A
  • 4. aOS Luxembourg 4 décembre 2017 SharePoint development - History Farm Solutions • Globally deployed • Fully trusted • Server-side code (.NET) • Within SharePoint process (W3WP) 2007 • Sandboxed Solutions • Locally deployed • Restricted privileges • Limited Server-side code (.NET) • Sandboxed process • CSOM • JSOM • ListData.svc 2010 2013 2016 • REST API • JSLink, CSR • SharePoint Hosted Add-in’s • In SP • HTML5 apps • Isolated • JSOM, REST • Provider Hosted Add-in’s • Outside of SP • CSOM, REST • Any Language/Platform SharePoint Framework (SPFx) • WebParts and Extensions • Client Side (Browser) • REST • Targets Modern UI • Modern Toolchain • Common structure • JS deployed by Admin
  • 5. aOS Luxembourg 4 décembre 2017 SharePoint Add-ins • Specific permissions are granted to Add-ins • Full Page mode or “embedded” in SharePoint pages through Iframe’s • SharePoint Hosted • Hosted within the SharePoint farm/tenant • HTML5 applications (JS Only , JSOM, REST API) • Isolated using different domain name • Seems there is no more investment from Microsoft • Provider Hosted • Hosted on a third-party provider • Authenticated via Azure ACS/AAD (Low Trust) or Server-to-Server trust (High Trust) • Can consist in only a Web API • Can be developed with any technology (C#, NodeJS, PHP, Python, …)
  • 6. aOS Luxembourg 4 décembre 2017 SharePoint Framework (SPFx) • Client Side • Develop WebParts or extend SharePoint UI • Uses Modern Toolchain (NodeJS, TypeScript, Gulp, Yeoman, …) • Defines a common way for JS development on SharePoint • JS Applications must be trusted and deployed by administrators • SharePoint Online: • GA since beginning 2017 • Fully available for Modern UI and partially for Classic UI (Only WebParts) • SharePoint 2016: • Partially available since September 2017 with FP2 • Only WebParts on Classic UI
  • 7. aOS Luxembourg 4 décembre 2017 What is JavaScript ? • A scripting language driving the behavior of the browser • Manipulates the DOM • Handle user events (click, mouse move, scroll, …) • JavaScript has NOTHING to do with Java • Marketing agreement between Netscape and Sun • First shipped with Netscape browser in 1996 • Normalized through ECMAScript • Quickly implemented in all major browsers • Single-threaded • The same Thread handles UI and business logic • Event-driven & Asynchronous • Not initially designed for complex applications
  • 8. aOS Luxembourg 4 décembre 2017 Why JavaScript ? • Better UI and UX • No page reload • Dynamic input controls • Real time form validation • Responsive User Experience • User friendly • Is supported by every current browsers • No need for plugins (Flash and Silverlight are dead… RIP ! ) • There is a browser running JavaScript on every smartphone and tablet nowadays
  • 9. aOS Luxembourg 4 décembre 2017 General JavaScript concerns • Weakly typed script language  TypeScript • Dependencies nightmare  Webpack • No defined project structure  Yeoman • No build and ALM tools  Gulp
  • 10. aOS Luxembourg 4 décembre 2017 Other SPFx advantages • A common framework with base and utility classes • A development Workbench available locally or hosted on SharePoint • SharePoint is not required to develop the UX and UI of WebParts • JavaScript bundle can be hosted anywhere (CDN or SharePoint) • Native support of Office UI Fabric styling and components • Native support for localized resources • Integrated unit testing tooling (Chai/Mocha) • Integrated CSS scalability tooling (Sass) • Dynamic, responsive and sexy Property Pane • Development can be done with any IDE, on any OS • Can leverage any existing JS Framework • Every JS developer can easily become a SharePoint developer
  • 11. aOS Luxembourg 4 décembre 2017 SPFx - an unknown world ? Almost every new technology matches a well known one in our beloved SharePoint/.NET development world
  • 12. aOS Luxembourg 4 décembre 2017 DEMO 1 Develop with SPFx
  • 13. aOS Luxembourg 4 décembre 2017 SharePoint & JavaScript concerns • The JS application will interact with SharePoint through REST API (or JSOM)  Will have the permissions of the current user. A JavaScript application will never be able to do, on its own, more than what the current user is allowed to BUT will be able to use the current user permissions to do something unexpected
  • 14. aOS Luxembourg 4 décembre 2017 SharePoint & JavaScript concerns • JavaScript can be embedded within SharePoint pages and be executed on the behalf of any users that will visit the page • Who is able to embed scripts ?  Any user that has the Add and Customize Pages permission • Some use cases could have been forgotten • Some users can have bad intent
  • 15. aOS Luxembourg 4 décembre 2017 DEMO 2 Malicious Script
  • 16. aOS Luxembourg 4 décembre 2017 SharePoint & JavaScript embedding • JavaScript embedding is ALWAYS DISABLED on Modern UI • JavaScript embedding can be turned off on Classic UI  Will impact several built-in components such as • Search WebParts • Content Rollup • Document Sets • … • SPFx packages are deployed via app catalog by administrators • Administrators are always aware of what can be executed on their tenant
  • 17. aOS Luxembourg 4 décembre 2017 DEMO 3 Deploy SPFx solutions
  • 18. aOS Luxembourg 4 décembre 2017 JavaScript & Permissions • We might need our application to do more than what the user is allowed to  we must delegate the job to a trusted third-party • The third-party is authorized through App-Only permissions • In the context of SharePoint Online, an Azure Function is a good option • SharePoint Online always has an underlying Azure AD, the logged-in user can easily authenticate against the Azure Function • Azure Functions limit the maintenance and running costs • Azure Functions can be written in several languages • Azure Functions can be replaced by any third party if better suited
  • 19. aOS Luxembourg 4 décembre 2017 DEMO 4 Delegate to Azure Functions
  • 20. aOS Luxembourg 4 décembre 2017 Summary • JavaScript is probably the best choice for responsive and user friendly UI in browser • SPFx IS the way to go for modern development in SharePoint • Add-ins (Provider Hosted) will remain in shapes of APIs or full external applications interacting with SharePoint • Azure Functions are a good fit to implement Server-side code on Serverless architecture (handled authentication with Azure AD) • Custom APIs communicating with SharePoint can be hosted on any platform in any technology (through REST API)
  • 21. aOS Luxembourg 4 décembre 2017 Questions ?
  • 22. aOS Luxembourg 4 décembre 2017 Thank you !
  • 23. aOS Luxembourg 4 décembre 2017 References • https://support.office.com/en-us/article/Allow-or-prevent- custom-script-1f2c515f-5d7e-448a-9fd7-835da935584f?ui=en- US&rs=en-US&ad=US • https://support.office.com/en-us/article/Security- considerations-of-allowing-custom-script-b0420ab0-aff2-4bbc- bf5e-03de9719627c • https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web- parts/guidance/connect-to-api-secured-with-aad • https://aka.ms/sppnp
  • 24. aOS Luxembourg 4 décembre 2017 Merci à notre sponsor !

Editor's Notes

  1. CCL
  2. CCL 2007 and before : Farm Solutions 2010 : Sandboxed Solutions, CSOM, JSON, ListData.svc (ancestor of REST API) 2013: REST API, Add-ins (SP HOSTED, PROVIDER HOSTED) 2016: SPFx
  3. CCL
  4. YPL
  5. YPL
  6. CCL
  7. CCL
  8. YPL
  9. YPL Node  .NET/IIS/IIS Express
  10. CCL
  11. CCL
  12. Context: A Salaries libraries containing one folder per employee Each folder has broken permissions Read for the employee Contribute for Payroll Officers We have two users Bob Designer (with Design permission on the site) John Payroll (with Edit permission on the site, in the Payroll Officers group) Bob is asked to redesign the content of the Homepage of the site He embeds HTML/CSS He embeds also a malicious script The script will check if the current user is a Payroll Officer If yes, the script will copy all the content of Salaries to a newly created hidden library The url of the new library will be sent to Bob When a Payroll Officer visits the homepage, he executes the malicious script with his permissions
  13. CCL
  14. YPL (4 min) Show the cdnBasePath in ./config/write-manifests.json gulp bundle --ship gulp package-solution --ship Copy ./temp/deploy content to /sites/aos_classic/SiteAssets/spfx/salary Deploy ./sharepoint/solution/spfx-salary-manager.sppkg to /sites/appcatalog/appcatalog Trust the solution and show the URL Add the WebPart On a Modern Page On a Classic Page
  15. CCL
  16. Show how to create an Azure Function App (DON’T REALLY CREATE IT) Show how to add a Function Available languages Available templates Show the Azure AD Authentication Mention the CORS support Copy/Paste the code Register the App in SharePoint and grant permissions Configure Client Id/Client Secret in the app settings Copy/Paste the URL Mention the admin consent Configure the WebPart with the URL Click the Add Folder button