Making SharePoint Rock With Angular and ReactJOE JORDENSENIOR CONSULTANT, NEUDESIC@COBALTCODER WWW.COBALTCODER.COM WWW.NEUDESIC.COM

Why Are We Here?

Learn to use a custom master page Learn to incorporate Angular pages into SharePoint Learn to incorporate React pages in SharePoint Learn to link Angular and React using ngReact

Crafting a Master Page

Create a custom master page to Control look and feel (and possibly smell) Add libraries Instantiate framework Can do last two without a custom master

Using Material Design

Use Material Design to make things pretty https://material.angularjs.org/latest/

Angular 1.5 Overview

Directives Use to manipulate the DOM

Controllers Use to set up or enhance the scope object

Services Use to share data between controllers These are singletons

Uses watchers for two-way binding

Demo - Create a Site With Angular 1.5

Client list in SharePoint – Angular 1.5 style Add modules to project

Set GhostableInLibrary to true in elements file

React/FLUX Overview

Updates UI using virtual DOM diffing No two-way binding Uses one-way binding, more like circular binding (FLUX)

React/FLUX Overview

View => Dispatcher => Store

React/FLUX Overview

Use React.MSBuild Install-Package React.MSBuild –Pre Automatically creates xxx.generated.js file

Demo - Create a Site With React

Client list in SharePoint – React style

Code to Add and Get Items

SharePoint REST code can be tricky Need to get

Request Digest Item type eTag (for updating)

Angular Use injector

React Hope for the best

Linking React and Angular With ngReact

ngReact allows us to use React components in Angular sites Add react angular module dependency

angular.module('app', ['react']); react-component: an Angular directive that delegates off to a React

Component* reactDirective: a service for converting React components into the react-

component Angular directive*

* https://github.com/ngReact/ngReact

Demo – Using ngReact

Client list in SharePoint – ngReact style

Summary

Angular is awesome, except with large lists React is awesome, but a bit verbose ngReact is perfect for linking the two together for double-awesomeness A custom master will give you the precise design you are after

References

Code: https://github.com/CobaltCoder/CodeCamp2016 SlideShare: http://www.slideshare.net/CobaltCoder/making-share-point-rock-with-angular-and-react Blog: http://www.cobaltcoder.com