are you in the right spot? - nellis consulting,...
TRANSCRIPT
Are you in the right spot?
Julie TurnerPrincipal Architect
Professional developer since 1995
Working with SP since 2007
Blog: http://julieturner.net
LI: https://www.linkedin.com/in/juliemturner
Twitter: @jfj1997
Slide Share: http://www.slideshare.net/JulieTurner24
What We’ve Covered
Part 2 Agenda
Why Do We Care?
MVVM Pattern
Model-View-ViewModel (MVVM) pattern
See: https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
Comparison of Approaches/ Frameworks
How is KnockoutJS Built?
Source: http://knockoutjs.com/documentation/introduction.html
Declarative Bindings
data-
data-bind text: TitleSource: http://knockoutjs.com/documentation/introduction.html
Dependency Tracking
Source: http://knockoutjs.com/documentation/computed-dependency-tracking.html
"Trivially Extensible"
data-bind myCustomBinding: Title
ko.bindingHandlers.myCustomBinding = {init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// This will be called when the binding is first applied to an element// Set up any initial state, event handlers, etc. here
},update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// This will be called once when the binding is first applied to an element,// and again whenever any observables/computeds that are accessed change// Update the DOM element based on the supplied values here.
}};
Source: http://knockoutjs.com/documentation/custom-bindings.html
Parameters Available to Custom Bindings
Source: http://knockoutjs.com/documentation/custom-bindings.html
AngularJS – 1.x (not discussing Angular 2)
The Basics<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Embed it in SharePoint<!-- Dependencies -->
<!-- Script to make the call -->
<!-- Display UI -->
Create a Module/Controller
Bind the HTML
Choose a Framework
Source Control and Code Management
Sympraxis’ SharePoint Client Side Development Pipeline
spsave
Code Editor
Source Control and Code Management: gulpfile
Sympraxis’ SharePoint Client Side Development Pipeline
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 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 codeO 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.
Widget Wrangler Sample
Versioning
Overview
So What's Changed?
What Is the SharePoint Framework?
IIS Express
Project Templates
Server Side Tool Comparison
SharePoint Workbench
"Modern" SharePoint Page
Strategy: JavaScript Charting Libraries
Being Manipulative Is Key
Structured List(s)
Selected Data
Chart
Being Manipulative Is Key
Structured List(s)
Selected Data
Chart
Selected Data [{}]
ID
Business Unit
Category
Status
Due Date
Assigned To
Being Manipulative Is Key
Structured List(s)
Selected Data
Chart
Selected Data [{}]
ID
Business Unit
Category
Status
Due Date
Assigned To
Chart[{}]
Categories [‘strings’]
Values [{}]
Assigned To
Item Count
