Unity Connect Haarlem 2016 - Best Practices for Small-Scale Client-Side Development in SharePoint
-
Upload
marc-anderson -
Category
Technology
-
view
3.524 -
download
0
Transcript of Unity Connect Haarlem 2016 - Best Practices for Small-Scale Client-Side Development in SharePoint
Best Practices for Small-Scale Client-Side Development in SharePointMarc 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
• Client-side development can take many forms and also different shapes on the screen. In this session, we’ll look at adding a new type of Web part to pages which improves the user experience for your SharePoint users. These new kinds of Web parts can be more responsive and provide a more tactile feel and immediacy to your UI than may have been possible with server-side code.
• Based on real world – not ‘Hello world’ – examples, you’ll see how you can expand your development repertoire and ‘wow’ your end users.
Overview
What Shape Do You Need?
https://medium.com/@sachagreif/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1#.9h6opbcmv
• DOM Manipulation• Simple JavaScript-based Web Parts• Content Editor Web Parts• Script Editor Web Parts
• Web development frameworks• SharePoint Framework (SPFx)
Client Side Web Part Options
High Level Structure of Building Client Side 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•Better practice: use your own prefix, namespace.
•Avoid hauling in SharePoint's baggage unless you need it
DOM Manipulation: Sliding Quick Launch/* Set up animations */
@keyframes sideNavSlideIn { from {left: 0px;} to {left: -175px;}}
@keyframes sideNavSlideOut { from {left: -175px;} to {left: 0px;}}
#sideNavBox { position: absolute; background: #ffffff; left:-175px; margin: 0; padding: 0 0 0 20px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); float:none; animation-name: sideNavSlideIn; animation-timing-function: ease-out; animation-duration: .25s; animation-iteration-count: 1; z-index: 999;}
#sideNavBox:hover { left: 0px; animation-name: sideNavSlideOut; animation-timing-function: ease-out; animation-duration: .5s; animation-iteration-count: 1;}#contentBox { margin-left:40px;}
/* Make the Quick Launch pretty and apply animations */
CSS-only DOM manipulation!HT @jfj1997
Simple Client Side Web Part: HTML<link type="text/css" rel="stylesheet" href="/sites/Demos2013/ScriptsCSS/css/QuickLaunch.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><script type="text/javascript" src="/sites/Demos2013/ScriptsCSS/js/QuickLaunch.js"></script>
<div id="my-project"></div>
Demos
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