Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making share point rock with angular and react

134 views

Published on

How to use Angular, React and ngReact to create a custom front end for SharePoint

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Making share point rock with angular and react

  1. 1. Making SharePoint Rock With Angular and React JOE JORDEN SENIOR CONSULTANT, NEUDESIC @COBALTCODER WWW.COBALTCODER.COM WWW.NEUDESIC.COM
  2. 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. 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. 4. Using Material Design  Use Material Design to make things pretty  https://material.angularjs.org/latest/
  5. 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. 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. 7. React/FLUX Overview  Updates UI using virtual DOM diffing  No two-way binding  Uses one-way binding, more like circular binding (FLUX)
  8. 8. React/FLUX Overview  View => Dispatcher => Store
  9. 9. React/FLUX Overview  Use React.MSBuild  Install-Package React.MSBuild –Pre  Automatically creates xxx.generated.js file
  10. 10. Demo - Create a Site With React  Client list in SharePoint – React style
  11. 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. 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. 13. Demo – Using ngReact  Client list in SharePoint – ngReact style
  14. 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. 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

×