SharePoint Framework Development Introduction

I recently was asked to customize a SharePoint Online “modern” communication site.  I’ve been working with SharePoint steadily for the last 7 years, so I’ve become quite comfortable with it over time.  I’m a developer who really doesn’t mind getting his hands dirty and love learning new technologies.  I went into this project with a level of enthusiasm that I haven’t had since I first started customizing SharePoint, as I was very interested in learning more about the SharePoint Framework.  Interestingly, what I found was, developing modern web parts felt like a trip back in time, but in a good way!  Open source tools, command line interfaces, cross-platform development.  It’s like taking a trip back 20 years – everything old is new again.

I’m going to share what I’ve learned about creating SharePoint modern web parts using the SharePoint Framework.  There are a lot of different pieces that you need to put together:

• JavaScript
• TypeScript
• React
• js
• CSS (SASS)
• Npm
• Gulp
• And more!

What I found was, I could successfully build a simple web part by following instructions I found online, but I really didn’t understand all the moving parts – I just sort of copied working examples and modified them for my use.  This technique certainly works, but it may (and probably will) lead to less efficient / harder to maintain web parts.  I also found that all the different technologies started to blend together, and I didn’t have a good understanding of what each technology was responsible for.  And that’s where this blog fits in.

I’m going to walk through the process of creating SharePoint Framework web parts, but I’m going to take a step back and show each technology independent of the others in the context of building an end to end solution.  The application I’ll be creating is near and dear to our company – we here at Timlin are all avid golfers and we participate in a fantasy golf league.  To run our league, I need to store and report on individual PGA tour players earnings.  This data is all available via a combination of HTML and JSON files on the PGA Tour’s website.   I’ve decided to use Node.js and JavaScript to parse and store the data.  I will then use SharePoint to create a dashboard with modern web parts to display various statistics, the weekly results, and current standings.

The first step is configuring the development environment, which I’ll be covering in the first part of this blog series… stay tuned!