angular vs react: building modern sharepoint interfaces with spfx
Post on 22-Jan-2018
184 Views
Preview:
TRANSCRIPT
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
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• Single-Page Application (SPA)
framework
• Implements the Model-View-Controller (MVC) pattern
• A true framework (instead of patchwork of libraries)
• Strong separation of concerns
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
• 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
top related