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.

9.
AngularJS
Building modern SharePoint
interface

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.
Agenda concepts

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.
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.
React
Building modern SharePoint
interface

15.
MVC

16.
FLUX Concepts
Just V of MVC

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.
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.
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.
Takeaway
Your architectural
choice depends
on:
2. Your (your team) competency +
project timeline