sps monaco 2017 - the lay of the land of client-side development circa 2017
TRANSCRIPT
![Page 1: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/1.jpg)
The Lay of the Land of Client Side Development circa 2017
Marc D AndersonPresident, Sympraxis Consulting
#SPSMonaco
![Page 2: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/2.jpg)
#SPSMonaco
![Page 3: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/3.jpg)
Who Is Marc?
• Co-Founder and President of Sympraxis Consulting LLC, located in the Boston suburb of Newton, MA, USA. Sympraxis focuses on enabling collaboration throughout the enterprise using the SharePoint application platform.
• Over 30 years of experience in technology professional services and software development. Over a wide-ranging career in consulting as well as line manager positions, Marc has proven himself as a problem solver and leader who can solve difficult technology problems for organizations across a wide variety of industries and organization sizes.
• Author of SPServices
• Awarded Microsoft MVP for SharePoint Server 2011-2017
![Page 4: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/4.jpg)
Overview
• Are you dazzled by all the noises you hear about client-side development? Do the grunts and gulps leave you a little confused? In this introductory session, we’ll talk about the types of things you can do with client-side development, how SharePoint can be used as a service (SPaaS?) and what the popular toolsets are. Even between writing the abstract and doing the session, things may well have changed.
• Whether you’re a server-side developer who wants to catch up with the new trends, a power user wanting to flex your muscles in new ways, or an end user who would like to speak more intelligently with IT, this session will provide useful foundational information.
![Page 5: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/5.jpg)
Customization Continuum
Configure Customize Extend Custom
Difficult to test outside of productionSource control can be a challenge
Lends itself to full ALM, even continuous integration/deployment
Source control is easy
Power Users Light Dev Full Dev Full Dev
with thanks to Dave Feldman and D’arce Hess
![Page 6: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/6.jpg)
So What's Changed?
•Microsoft wants to wean us off the server (running a service is far different than running an on premises farm)• SharePoint's APIs continue to expand•Microsoft is offering wider, richer APIs – Microsoft
Graph• SharePoint – and even Office 365 – can be considered
a "service"
![Page 7: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/7.jpg)
Where Have We Come From?
![Page 8: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/8.jpg)
Development Models Across SharePoint Versions Server Side Client Side
![Page 9: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/9.jpg)
Client Side Code Has Been in SharePoint Forever
![Page 10: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/10.jpg)
This Is Not Your Grandfather's Client Side…
![Page 11: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/11.jpg)
![Page 12: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/12.jpg)
SharePoint Development Is [Becoming] Web Development
• Use your favorite tools
• Choose your favorite frameworks
• Write your solutions with HTML, CSS, and JavaScript
• Watch your users smile
![Page 13: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/13.jpg)
"Client Side" Is Not "One Thing"
Content Editor Web Part
SharePoint Framework (SPFx)
One-off, quick solutions with JavaScript / HTML embedded directly in the page (often with SharePoint Designer)
Script Editor Web Part
Centralized code artifacts with a light development pipeline
Code can be centralized
Centralized code artifacts usually with a more robust development pipeline
Reusable components (Client Side Web Parts+) with a more formal development process
Centralized admin and deployment
Script directly in pages
![Page 14: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/14.jpg)
Client Side Development Spectrum
• DOM Manipulation
• Simple JavaScript-based Web Parts• Content Editor Web Parts
• Script Editor Web Parts
• Web development frameworks
• SharePoint Framework (SPFx)
![Page 15: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/15.jpg)
High Level Structure of Building Client Side SharePoint Solutions
Data Access / Initial
Manipulation
"Document Ready"
ViewModel /
Application Logic
Templates Application Styling
![Page 16: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/16.jpg)
Getting Data: Services Across SharePoint Versions
Deprecated
Deprecated
Endpoint
/_vti_bin/listdata.svc
/_apiDeprecated
None
SOAP REST
https://graph.microsoft.com
![Page 17: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/17.jpg)
We Don't Yet Have Parity in Pages
"Classic"• Can add CEWPs or SEWPs to
most pages
• Any development framework is fine
• Plenty of examples and articles to help
"Modern"• SharePoint Framework gives us a
subset of what we are used to:• Client Side Web Parts (NEW
2/2017)
• Extensions (ApplicationCustomizers, FieldCustomizers, CommandSets)
• Less known, so less support and examples
![Page 18: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/18.jpg)
We Don't Yet Have Parity in Forms
"Classic"• Well understood DOM elements
• Libraries like SPServices and SPUtils well-supported to give you a head start
• Can add CEWPs or SEWPs to host any JavaScript we want
"Modern"• New, unfamiliar, changing DOM
elements for form fields
• No way to customize with JavaScript
• PowerApps is starting to fill this gap, but not fully ready for prime time (fine for simple forms)
![Page 19: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/19.jpg)
Widgets in one Site Collection
Widget in one tenant/farm, multiple site
collectionsWidgets used across
multiple tenants/farms*
Store code in a library in a specific subsite
X X
Store code in a library in the root site of the Site Collection
X
Store code in a Site Collection specifically for client side code
O O
Create an actual CDN (Azure, AWS, dedicated server, other commercial CDN provider…)**
X O
- Good solution O – Optional solution, potentially overkill X – Not a great choice* - Not referencing any code that would be part of a commercial solution.** - CDNs or Content Delivery Networks allow “content” to be made highly available to end users everywhere.
Code Creep - SharePoint "CDN" by Julie Turner (@jfj1997)
Where Should I Put My Stuff?
If you store your code in a different Site Collection or CDN, you may need to bootstrap it into place.
![Page 20: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/20.jpg)
Bootstrapping JavaScript
• Microsoft guidance is to no longer edit the master page – and we don't have to
• Adding a User Custom Action allows you to load the first JavaScript file with a ScriptLink
• RequireJS (or several alternatives –see system.js) allow you to bootstrap the rest of your code into the page
• Because your script references can be built in code, you can even do versioning
The easiest way to add Script and Brand your SharePoint and SharePoint Online by John Liu
![Page 21: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/21.jpg)
Bootstrapping HTML
•HTML files are trickier to load because CEWPs can't use a Content Link outside the Site Collection• jQuery $.get()• Widget Wrangler• RequireJS with text plugin
$.get() Office Dev PnP Web Cast – Introducing Widget Wrangler for SharePoint development RequireJS text plugin
![Page 22: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/22.jpg)
Choose a Framework
• Don't be caught up in the "shiny penny" syndrome
• Compare your known requirements with the frameworks' capabilities
• Ask yourself:• What types of solutions do we need to build?
• What does our governance tell us about our deployment model?
• How big is the development team?
• What are our current skills?
![Page 23: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/23.jpg)
What Is the SharePoint Framework?
• 100% Microsoft backed
• Used by Microsoft to build new "experiences"
• Built with React
• Framework independent
• Fully client side
• IDE independent
• Open source "mentality"
![Page 24: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/24.jpg)
What Will the SharePoint Framework Be?
Feb 2017 May 2017
![Page 25: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/25.jpg)
What Do You Need to Know?
• SPFx uses common Web development tools and frameworks
• How deeply you go depends on your specific needs
Not Ready for the SharePoint Framework? Start learning some components now.
![Page 26: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/26.jpg)
But Wait – There's More!
• There are new tools coming along where we can use our client side development skills:• PowerApps• Flow• Azure Functions• Logic Apps• …
Stay tuned!
![Page 27: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/27.jpg)
Contact Information
Marc D AndersonPresident, Sympraxis Consulting
http://sympmarc.com
https://www.linkedin.com/marcanderson
@sympmarc
http://bit.ly/sympmarcslides
https://github.com/sympmarc
http://sympmarc.github.io/SPServices/
http://spxslt.codeplex.com
![Page 28: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/28.jpg)
ThanksJohn Doe
Digital Workplace Consultant, Microsoft.
#SPSMonaco
![Page 29: SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030317/5a65c1e97f8b9aa4758b6895/html5/thumbnails/29.jpg)
The Popularity Contest
The State Of JavaScript: Front-End Frameworks: A few preliminary results