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 marc.anderson@sympraxisconsulting.com

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