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.
AngularJS vs
React
Building modern SharePoint
interfaces with SPFx
Radi Atanassov
Dimcho Tsanov
Who are we?
Agenda
* Possible VUE.js demo if time permits…
Why this topic?
• SharePoint Framework (SPFx) is the
development model
• Teams need to grow and
understand how to build so...
Why you should
trust us?
• We are awesome!
• We live and breathe SharePoint
• We do this for Enterprises today
Open source tooling
* Slide from Microsoft Build 2017 and Vesa Juvonen
* Slide from Microsoft Build 2017 and Vesa Juvonen
Areas in the page available for Application
Customizer to embed customizations for
end users. Application Customizer can b...
AngularJS
Building modern SharePoint
interface
AngularJS
• Single-Page Application (SPA)
framework
• Implements the Model-View-
Controller (MVC) pattern
• A true framewo...
Agenda concepts
app/
----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirect...
Pro’s / Con’s
• Best for full-page experiences
• Good code structure
• Market popularity
• Full-blown framework (much more...
React
Building modern SharePoint
interface
MVC
FLUX Concepts
Just V of MVC
React
• JavaScript Library for building UI
• Component-Based
• Declarative (JSX)
• One-way data flow
• Virtual DOM
• Immut...
Pro’s / Con’s
• Best for component based app
• Predictable UI
• SharePoint modern UI use it
• Fabric UI support it
• Chrom...
Takeaway
Your
supportability
depends on:
1. Your long term strategy
○ React is supported by Facebook
○ Fabric UI is suppor...
Takeaway
Your architectural
choice depends
on:
2. Your (your team) competency +
project timeline
Angular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFx
Upcoming SlideShare
Loading in …5
×

Angular vs React: Building modern SharePoint interfaces with SPFx

670 views

Published on

SUGBG June event. Radi Atanassov and Dimcho Tsanov compare the two frameworks.

Published in: Software
  • Be the first to comment

Angular vs React: Building modern SharePoint interfaces with SPFx

  1. 1. AngularJS vs React Building modern SharePoint interfaces with SPFx Radi Atanassov Dimcho Tsanov
  2. 2. Who are we?
  3. 3. Agenda * Possible VUE.js demo if time permits…
  4. 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. 5. Why you should trust us? • We are awesome! • We live and breathe SharePoint • We do this for Enterprises today
  6. 6. Open source tooling * Slide from Microsoft Build 2017 and Vesa Juvonen
  7. 7. * Slide from Microsoft Build 2017 and Vesa Juvonen
  8. 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.
  9. 9. AngularJS Building modern SharePoint interface
  10. 10. 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
  11. 11. Agenda concepts
  12. 12. 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
  13. 13. 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
  14. 14. React Building modern SharePoint interface
  15. 15. MVC
  16. 16. FLUX Concepts Just V of MVC
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. Takeaway Your architectural choice depends on: 2. Your (your team) competency + project timeline

×