You prefer React. Or maybe you love Angular. But which should you use for SharePoint Framework development? Fortunately, both are supported! In this session, you will learn how to build an application using your favorite framework or library, and the strengths/weaknesses of each. We will also discuss TypeScript and why you should learn it.

1. React or Angular and
SharePoint Framework
Development
Darin Dickey
SharePoint Saturday
February 9, 2019

2. Exploring a SharePoint
Framework Project
1. Client-side Web Parts Review
2. Supported Libraries and Frameworks
3. Pure JS vs Angular vs React
4. Angular
5. React

3. Thank You SPSUtah 2019 Sponsors!
PLATINUM
• Lucidworks
• ZAACT
GOLD
• JourneyTEAM
• Sovereign SP
SILVER
• SkySync
ShareSki & SharePint

4. About Me

5. Winner 2018 Intranet Reloaded
The ‘Special Jury award’
was set-up for projects
that achieved
outstanding results
across all entries and
therefore deserved
special recognition. The
special category was won
by LDS Church and their
project ‘The workforce
intranet ecosystem’.

6. Quick Web Part Primer
=

7. SPFx Client-side web parts
=

8. Demo
A few interesting SPFx web parts custom developed by
ICS

9. They are still web
parts!
Built for the modern,
JavaScript-driven web
Runs directly inside a
SharePoint Page
Client-side web parts

10. Web Parts vs Extensions
Web Part
Extensions

11. Demo
A very brief demo of a SPFx extension

12. SPFx Development Toolkit

13. SPFx Development Toolkit

14. SPFx Development Toolkit

15. SPFx Development Toolkit

16. Any Framework or Library Welcome

17. Only 3 Options in Yeoman SharePoint Generator

18. Demo
SharePoint Generator Options

19. Question: Why use 'No JavaScript Framework'?

20. Question: Why use Knockout?

21. TypeScript

22. Demo
TypeScript Static Typing Examples

23. TypeScript – Object Oriented

24. Demo
TypeScript Object Oriented

25. Angular OR React?

26. Question: Why use Angular?

27. Question: Why you might NOT want to use Angular?

28. Question: Why use React?

29. Question: Why NOT use React?

30. React One-Way Binding
<input>
searchString = “Holidays 2019”;

31. Angular Two-Way Binding
searchString = “Holidays 2019”;
<input>

32. Demo
Using React One-way Binding

33. Question: Why NOT use React?

34. React JSX – Code + HTML

35. Angular – Clean separation of Markup and Code

36. Demo
Using React to create asearch web part

37. Getting started with Angular and SPFx

38. But wait, how do I use Angular in SPFx if the Yeoman
generator does not support (yet)?
Add all the Angular related modules and its dependencies to
the package.json file.

39. AngularCLI
https://github.com/maliksahil/SPFxAngularCLI
• npm install
• gulp serve

40. Demo
Angular CLI project

41. Demo
Angular Person Details

42. Angular OR React?
Use React Use Angular
Simple App with Fewer Views More Complicated App with Complex Routing

43. Angular OR React?
Use React Use Angular
Mostly Read-only, Presentation Form with Multiple Input Fields, Drop Downs,
Radio Buttons, Checkboxes, and Other Controls

44. Angular OR React?
Use React Use Angular
SharePoint App that consumes SP
and/or External Data
Non SharePoint App that Consumes SP and/or
External Data

45. Angular OR React?
Use React Use Angular
SharePoint App, SharePoint Hosted Azure Hosted

46. Angular OR React?
Use React Use Angular
Office UI Fabric Other UX Design Framework

47. Angular OR React?
Use React Use Angular
Zippier More Robust

48. Angular OR React?
Use React Use Angular
You Choose Supporting Libraries (Redux,
Flux, React Router, SPHttpClient)
Angular Provides Entire Framework (Router, Http
Requests, Event Bindings)

49. Angular OR React?
Use React Use Angular
Need to Ship Quickly Timeline to Delivery is More Flexible

50. Vue?

51. Vue

52. Summary
 Front-end developers can finally dive into
SharePoint development
 React or Angular? You decide!
 SPFx offers rich support for any client
side toolkit