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
![Page 1: Unity Connect Haarlem 2016 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fcefd1a28aba24c8b7de7/html5/thumbnails/1.jpg)
Best Practices for Small-Scale Client-Side Development in SharePointMarc D AndersonPresident, Sympraxis Consulting LLC
![Page 2: Unity Connect Haarlem 2016 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fcefd1a28aba24c8b7de7/html5/thumbnails/2.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-2016
![Page 3: Unity Connect Haarlem 2016 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fcefd1a28aba24c8b7de7/html5/thumbnails/3.jpg)
• 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
![Page 4: Unity Connect Haarlem 2016 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fcefd1a28aba24c8b7de7/html5/thumbnails/4.jpg)
What Shape Do You Need?
![Page 5: Unity Connect Haarlem 2016 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fcefd1a28aba24c8b7de7/html5/thumbnails/5.jpg)
https://medium.com/@sachagreif/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1#.9h6opbcmv
![Page 6: Unity Connect Haarlem 2016 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fcefd1a28aba24c8b7de7/html5/thumbnails/6.jpg)
• 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
![Page 7: Unity Connect Haarlem 2016 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fcefd1a28aba24c8b7de7/html5/thumbnails/7.jpg)
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
![Page 8: Unity Connect Haarlem 2016 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fcefd1a28aba24c8b7de7/html5/thumbnails/8.jpg)
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
![Page 9: Unity Connect Haarlem 2016 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fcefd1a28aba24c8b7de7/html5/thumbnails/9.jpg)
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>
![Page 10: Unity Connect Haarlem 2016 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fcefd1a28aba24c8b7de7/html5/thumbnails/10.jpg)
Demos
![Page 11: Unity Connect Haarlem 2016 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.in/reader035/viewer/2022070603/586fcefd1a28aba24c8b7de7/html5/thumbnails/11.jpg)
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