Angular vs React: Building modern SharePoint interfaces with SPFx
- 1. AngularJS vs React Building modern SharePoint interfaces with SPFx Radi Atanassov Dimcho Tsanov
- 2. Who are we?
- 3. Agenda * Possible VUE.js demo if time permits…
- 4. Why this topic? • SharePoint Framework (SPFx) is the development model • Teams need to grow and understand how to build solutions with evolving development models • New API enhancements are being added on a monthly basis • Clients want the modern experience • Keep up with architectural patterns
- 5. Why you should trust us? • We are awesome! • We live and breathe SharePoint • We do this for Enterprises today
- 6. Open source tooling * Slide from Microsoft Build 2017 and Vesa Juvonen
- 7. * Slide from Microsoft Build 2017 and Vesa Juvonen
- 8. Areas in the page available for Application Customizer to embed customizations for end users. Application Customizer can be also invisible for the end users. Command Set customizer can be used to introduce new custom actions to a list. Can be configured to be active when numerous items are selected. Executes associated custom code when clicked. Field customizer can be used to customize experiences around the specific fields. You can associate field customizer component to a specific field instance to make a customization execute when it’s used.
- 13. AngularJS • Single-Page Application (SPA) framework • Implements the Model-View- Controller (MVC) pattern • A true framework (instead of patchwork of libraries) • Strong separation of concerns
- 14. Agenda concepts
- 16. app/ ----- controllers/ ---------- mainController.js ---------- otherController.js ----- directives/ ---------- mainDirective.js ---------- otherDirective.js ----- services/ ---------- userService.js ---------- itemService.js ----- js/ ---------- bootstrap.js ---------- jquery.js ----- app.js views/ ----- mainView.html ----- otherView.html ----- index.html app/ ----- shared/ ---------- sidebar/ --------------- sidebarDirective.js --------------- sidebarView.html ---------- article/ --------------- articleDirective.js --------------- articleView.html ----- components/ // each component is treated as a mini Angular app ---------- home/ --------------- homeController.js --------------- homeService.js --------------- homeView.html ---------- blog/ --------------- blogController.js --------------- blogService.js --------------- blogView.html ----- app.module.js ----- app.routes.js assets/ ----- img/ // Images and icons for your app ----- css/ // All styles and style related files ----- js/ // JavaScript files for your app not for angular ----- libs/ // Third-party libraries index.html
- 17. Pro’s / Con’s • Best for full-page experiences • Good code structure • Market popularity • Full-blown framework (much more than React) • Full-page experiences lack SP UI reuse • Not best for multiple libraries • Lacking SharePoint-friendly components • Depends on Office UI Fabric AngularJS community project • Larger package • Version to Version upgrade issues
- 19. MVC
- 20. FLUX Concepts Just V of MVC
- 21. React • JavaScript Library for building UI • Component-Based • Declarative (JSX) • One-way data flow • Virtual DOM • Immutable data St a r tSt a r t
- 22. Pro’s / Con’s • Best for component based app • Predictable UI • SharePoint modern UI use it • Fabric UI support it • Chrome Dev tool • It's not a full framework. There's no router nor model management libraries nor asyn oparations • Big learning curve • * Virtual DOM makes it slow
- 23. Takeaway Your supportability depends on: 1. Your long term strategy ○ React is supported by Facebook ○ Fabric UI is supported by Microsoft? ○ Angular is supported by Google ○ Vue.js is supported by Evan You, community
- 24. Takeaway Your architectural choice depends on: 2. Your (your team) competency + project timeline
Editor's Notes
- #21: The main difference being views do not modify data directly. All modification of the data are done by triggering Action events! React is the V in the MVC
- #22: JUST UI Declarative: - Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.