React or Angular and SharePoint Framework Development
- 1. React or Angular and SharePoint Framework Development Darin Dickey SharePoint Saturday February 9, 2019
- 2. Exploring a SharePoint Framework Project 1. Client-side Web Parts Review 2. Supported Libraries and Frameworks 3. Pure JS vs Angular vs React 4. Angular 5. React
- 3. Thank You SPSUtah 2019 Sponsors! PLATINUM • Lucidworks • ZAACT GOLD • JourneyTEAM • Sovereign SP SILVER • SkySync ShareSki & SharePint
- 4. About Me
- 5. Winner 2018 Intranet Reloaded The ‘Special Jury award’ was set-up for projects that achieved outstanding results across all entries and therefore deserved special recognition. The special category was won by LDS Church and their project ‘The workforce intranet ecosystem’.
- 6. Quick Web Part Primer =
- 7. SPFx Client-side web parts =
- 8. Demo A few interesting SPFx web parts custom developed by ICS
- 9. They are still web parts! Built for the modern, JavaScript-driven web Runs directly inside a SharePoint Page Client-side web parts
- 10. Web Parts vs Extensions Web Part Extensions
- 11. Demo A very brief demo of a SPFx extension
- 16. Any Framework or Library Welcome
- 17. Only 3 Options in Yeoman SharePoint Generator
- 19. Question: Why use 'No JavaScript Framework'?
- 20. Question: Why use Knockout?
- 21. TypeScript
- 22. Demo TypeScript Static Typing Examples
- 23. TypeScript – Object Oriented
- 26. Question: Why use Angular?
- 27. Question: Why you might NOT want to use Angular?
- 28. Question: Why use React?
- 29. Question: Why NOT use React?
- 30. React One-Way Binding <input> searchString = “Holidays 2019”;
- 31. Angular Two-Way Binding searchString = “Holidays 2019”; <input>
- 32. Demo Using React One-way Binding
- 33. Question: Why NOT use React?
- 34. React JSX – Code + HTML
- 35. Angular – Clean separation of Markup and Code
- 36. Demo Using React to create asearch web part
- 37. Getting started with Angular and SPFx
- 38. But wait, how do I use Angular in SPFx if the Yeoman generator does not support (yet)? Add all the Angular related modules and its dependencies to the package.json file.
- 39. AngularCLI https://github.com/maliksahil/SPFxAngularCLI • npm install • gulp serve
- 42. Angular OR React? Use React Use Angular Simple App with Fewer Views More Complicated App with Complex Routing
- 43. Angular OR React? Use React Use Angular Mostly Read-only, Presentation Form with Multiple Input Fields, Drop Downs, Radio Buttons, Checkboxes, and Other Controls
- 44. Angular OR React? Use React Use Angular SharePoint App that consumes SP and/or External Data Non SharePoint App that Consumes SP and/or External Data
- 45. Angular OR React? Use React Use Angular SharePoint App, SharePoint Hosted Azure Hosted
- 46. Angular OR React? Use React Use Angular Office UI Fabric Other UX Design Framework
- 47. Angular OR React? Use React Use Angular Zippier More Robust
- 48. Angular OR React? Use React Use Angular You Choose Supporting Libraries (Redux, Flux, React Router, SPHttpClient) Angular Provides Entire Framework (Router, Http Requests, Event Bindings)
- 49. Angular OR React? Use React Use Angular Need to Ship Quickly Timeline to Delivery is More Flexible
- 50. Vue?
- 51. Vue
- 52. Summary Front-end developers can finally dive into SharePoint development React or Angular? You decide! SPFx offers rich support for any client side toolkit
Editor's Notes
- #17: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.
- #18: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.
- #20: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.
- #21: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.
- #22: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.
- #24: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.
- #27: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.
- #28: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.
- #29: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.
- #30: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.
- #34: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.
- #36: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.
- #38: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.
- #39: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.
- #40: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.
- #52: This file contains information about your bundle(s) and any external dependencies and localized resources. - The entries section contains the default bundle information. - The externals section contains the libraries that are not bundled with the default bundle.