This document discusses how to make SharePoint more powerful using Angular and React. It provides overviews of Angular, React, and ngReact for linking the two frameworks. The document demonstrates creating client lists in SharePoint using Angular, React, and a combination with ngReact. It also discusses using a custom master page to control look and feel when incorporating these frameworks into SharePoint.

1. Making SharePoint Rock
With Angular and React
JOE JORDEN
SENIOR CONSULTANT, NEUDESIC
@COBALTCODER WWW.COBALTCODER.COM WWW.NEUDESIC.COM

2. 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

3. 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

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

5. 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

6. 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

7. React/FLUX Overview
 Updates UI using virtual DOM diffing
 No two-way binding
 Uses one-way binding, more like circular binding (FLUX)

8. React/FLUX Overview
 View => Dispatcher => Store

9. React/FLUX Overview
 Use React.MSBuild
 Install-Package React.MSBuild –Pre
 Automatically creates xxx.generated.js file

10. Demo - Create a Site With React
 Client list in SharePoint – React style

11. 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

12. 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

13. Demo – Using ngReact
 Client list in SharePoint – ngReact style

14. 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

15. 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