unity connect haarlem 2016 - the lay of the land of client-side development circa 2016
TRANSCRIPT
The Lay of the Land of Client Side Development circa 2016Marc D AndersonPresident, Sympraxis Consulting LLC
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-2016
mobro.co/sympmarc
• 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.
Overview
circa 2116…
Meanwhile, back in 2016…
JavaScript is cool now! Again?Still?
• 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• SharePoint – and even Office 365 – can be
considered a "service"
So What's Changed?
Where Have We Come From?
2016
SharePoint FrameworkTypeScript, Webpack, gulp, etc….
Development models Across SharePoint Versions Server Side Client Side
Sandboxed solutions
App modelSandboxed solutions
App modelSandboxed solutions
App modelSandboxed solutions
SharePoint Framework
Client Side Code Has Been in SharePoint Forever
This Is Not Your Grandfather's Client Side…
…or your Grandmother's, for that matter
• Use your favorite tools• Choose your favorite frameworks• Write your solutions with HTML, CSS, and JavaScript• Watch your users smile
SharePoint Development Is [Becoming] Web Development
"Client Side" Is Not "One Thing"Simple
Complex
Content Editor Web Part
SharePoint Framework
One-off, quick solutions with JavaScript / HTML embedded directly in the CEWPCode can still be centralized
Script Editor Web Part
Centralized code artifacts with a light development pipeline
Centralized code artifacts with a more robust development pipeline
Reusable components (Client Side Web Parts+) with a more formal development processCentralized admin and deployment
Each approach still has value, even in the "modern" era
• DOM Manipulation• Simple JavaScript-based Web Parts• Content Editor Web Parts• Script Editor Web Parts
• Web development frameworks• SharePoint Framework (SPFx)
Client Side Development Spectrum
Build a box and stay within it
High Level Structure of Building Client Side SharePoint Solutions
Data Access / Initial Manipulation
"Document Ready"
ViewModel / Application Logic
Templates
JavaScript HTMLApplication Styling
CSS
•Has to coexist with SharePoint's CSS•Be very specific with your selectors
•Avoid hauling in SharePoint's baggage unless you need it
Get to know the basics…
Getting Data: Services Across SharePoint Versions
Deprecated
Deprecated
Endpoint
/_vti_bin/listdata.svc
/_apiDeprecated
NoneSOAP REST
https://graph.microsoft.com
Widgets in one Site Collection
Widget in one tenant/farm, multiple
site collections
Widgets used across multiple
tenants/farms*Store code in a library in a specific subsite X XStore code in a library in the root site of the Site Collection XStore code in a Site Collection specifically for client side code O OCreate 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.
See: 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.
• 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
Bootstrapping JavaScript
See: The easiest way to add Script and Brand your SharePoint and SharePoint Online by John Liu
• 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
Bootstrapping HTML
See: jQuery $.get(), Office Dev PnP Web Cast – Introducing Widget Wrangler for SharePoint development, RequireJS text plugin
• 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?
Choose a Framework
The Popularity Contest
See: The State Of JavaScript: Front-End Frameworks: A few preliminary results
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"
What Is the SharePoint Framework?
What Will the SharePoint Framework Be?
• SPFx uses common Web development tools and frameworks
• How deeply you go depends on your specific needs
What Do You Need to Know?
IIS Express
Project Templates
C#
Server Side Tool Comparison
MSBuild
• TypeScript is a free and open source programming language developed and maintained by Microsoft.
• It is a strict superset ofJavaScript, and adds optional static typing and class-based object-oriented programming to the language.
• TypeScript is designed for development of large applications and transpiles to JavaScript.
TypeScript
See: https://github.com/Microsoft/TypeScript/wiki
SharePoint Workbench• Testing ground for
local development (no SharePoint DLLs!)
• "Modern" SharePoint(-like) page
• Will need to mock data for testing at this level
SharePoint Workbench Page
Page canvas
Tool pane
Tool bar
Suite bar
Web Part
"Modern" SharePoint Page
Contact InformationEmail [email protected]
Twitter @sympmarcBlog http://sympmarc.com
SPServices http://spservices.codeplex.comSPXSLT http://spxslt.codeplex.comBooks http://sympmarc.com/books
The Middle Tier Manifesto http://bit.ly/middletier