secrets of the david warner ii fire swamp managing consultant, … group presentations/secrets of...

Secrets of the

Fire SwampSharePoint Framework Simplified

▪ David Warner II

▪ Managing Consultant, Catapult Systems

▪ [email protected]

▪ [email protected]

▪ @DavidWarnerII

WiFi: MSFTGUEST / PWD: msevent69rv

Secrets of the Fire SwampSharePoint Framework Simplified


SharePoint FrameworkLove it, like we love it and there will be joy!!!!

SharePoint

Framework

Page Based ExecutionWeb Part code will execute directly on the

page, no more iFrames!!!!!

Responsive Design FriendlyBetter control of the HTML Output, allows

us to ensure that our HTML is responsive.

Open Source Tooling & Offline DevUtilize a collection of Open Source

technologies, libraries and frameworks.

Custom Web Part PropertiesBuild configurable Web Parts providing a

plethora of customized properties

01

02

03

04


you can't know where

you’re going until you

know where you've been


History of SharePoint Web Part Development

SPFxUsing a collection of

Open Source libraries,

frameworks and tools,

Web Parts can be

developed in a variety

of ways using client

side technologies.

CSWPDisplay Templates

could be layered to

consume SP Search

content and display the

results using custom

HTML

CQWPUsing XSL, Content

Query Web Parts

display data from

SharePoint Lists and

Libraries allowing the

output of custom HTML

List View WPList View Web Parts

provide quick display of

list contents on a

SharePoint Page.


Easily ConfigurableUser can select scope, filter, sort

XSLT Markup & Tangled CodeNon-friendly development pattern

Performance Unfriendly & Limited ScopeNon Cross Site Collection

Content Query Web Parts

XSL Transformations (XSLT)

INCONCEIVABLE!

!!!! WiFi: MSFTGUEST / PWD: msevent69rv

Better then XSLT & Performance FriendlyNo more confusing XSLT

Non-Standard DevelopmentCommented out JS – Pseudo Code

Tangled Code Control StructureSpaghetti Business Logic & Presentation Layer

Content Search Web Parts

SharePoint Display Templates

INCONCEIVABLE!

!!!! WiFi: MSFTGUEST / PWD: msevent69rv

No more XSLT or Pseudo JSUses real JavaScript Code Methodologies

Offline DevelopmentNo SP site needed for majority of development

Tooling uses Open Source Many, Many, MANY libs and frameworks available

SharePoint Framework Web Parts

SharePoint Framework Tool Chain

Battle of Wits!!!WiFi: MSFTGUEST / PWD: msevent69rv

SharePoint Framework Tool Chain

TypeScript

VS Code

Node

Yeoman

Frameworks: Angular, Knockout,

React, Etc.

Gulp


SharePoint Framework Core Concept

Visual Studio Code or any other editor

TypeScript, Angular, jQuery, React, Etc.

NPM, Gulp, Web Kit, Yoeman

JavaScript executing on the SharePoint page


SharePoint Framework Web Part Core Concepts

Strongly Type

JavaScript:

Provides a more

dependable

development

process. Ultimately

it will compile or

“Transpile” TS into

pure JavaScript

01 –

Typ

eScr

ipt

Transpiled

JavaScript

Bundled:

All development

logic, JavaScript

Functions and

optionally

included libraries

or frameworks are

bundled into a

single file.02 –

Co

de B

un

dlin

g

Web Part

JavaScript Assets

are stored

Externally:

In addition to Web

Part “App” package,

the bundled JS

and any other

dependencies are

stored an

referenced

externally.03 –

Ext

ern

al A

ssets

JavaScript for the

Win:

No matter which

aspects of the

SharePoint SPFx we

choose to adopt,

everything is

executed as

JavaScript.

04 -

Java

Scr

ipt

JAVASCRIPT, JAVASCRIPT, JAVASCRIPT!!!!


Legacy and Modern Web Part Development

CSWP

CQWP

SharePoint SPFx

“JavaScript” Display Templates

Consume SharePoint Data

XSLTConsume SharePoint Data

SPFx ToolingConsume SharePoint Data

Commonality: Consume SharePoint Data


02REQ

Common Dev

Pattern

01REQ

Avoid major

refactoring

03REQ

Works with

existing & new

Web Parts

04REQ

Non Limited

Dev Options

05REQ

Harness SP

Content

Authoring

Maintainable

Configurable

Organized

Development MethodologyRequirements


Development Methodology Results

JavaScript as the core development language

Modularity to abstractBL & PL

Allows use of Legacy SP Tools with minimalistic

expectations

Allows use of anyJS Frameworks

& Libs

ControlledAdoption


Content Query Web Part Demo

SharePoint Framework Web Part Demo

Summary

secrets of the david warner ii fire swamp managing consultant, … group presentations/secrets of...

Documents