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 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

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

AngularJS

Building modern SharePoint interface

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

Agenda concepts

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

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

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• Immutable data

St a r tSt a r t

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

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

Takeaway

Your architectural choice depends

on:2. Your (your team) competency +

project timeline