Yes, you can use Modern React on SharePoint 2016

Audience: developers.

While we are following the Microsoft 365 buzz in conferences and on social media, many organizations are still on an older platform, such as SharePoint 2016. I expect that many of you in this case are looking to migrate to the Cloud, in particular government agencies with the return of the JEDI contract.

SP 2016 site owners have been relying on the Content Editor Web Part (CEWP) or the Script Editor Web Part (SEWP) for page customization. Neither is available in modern SharePoint Online, and a transition roadmap is needed.

Let’s start with the good news. In recent years, the Microsoft 365 platform has embraced JavaScript, bringing in its own typed flavor called TypeScript. It can be used on SharePoint of course but also in Teams, Outlook, Power Apps or Power BI. In SharePoint and Teams, the points of entry are called the SharePoint Framework (aka SPFx, version 1.12 expected in February) and the Microsoft Teams Toolkit. Since 2019, Microsoft has also embraced React as the main engine for its client side frameworks, and consolidated its UI library under the Fluent UI brand.

That’s very exciting news for SharePoint Online users, but what if you are still on SharePoint 2016?

Microsoft included SPFx in a SP2016 upgrade back in 2018. That made the migration to the cloud straightforward:

Now the not so good news: in 2019 and 2020, Microsoft kept upgrading the SPFx in the Cloud, but didn’t bring any improvement to the 2016 platform. That makes the migration more challenging than it used to:

Hugo Bernier has an excellent compatibility matrix that shows us SP 2016 is restricted to v1.1 and SP 2019 is restricted to v1.4.1, while SP Online has skyrocketed to v1.11. In practice, it means that neither 2016 nor 2019 can leverage the recent versions of React with hooks.

While the above diagram describes the standard roadmap, I’d like to offer another perspective. Instead of getting stuck on premises with old React, here is a different roadmap I suggested in a recent project:

Instead of SPFx 1.1, the idea is to simply leverage the Content Editor Web Part (CEWP) or the Script Editor Web Part (SEWP), which can host any script including modern React. It means that developers can already build , on premises, solutions that leverage modern scripting such as hooks or Fluent UI. In a migration the code can then be transferred to SPFx 1.11.

There’s a number of challenges with this approach and, although it worked in my case, it won’t fit every scenario.

  • First, SPFx comes with a Yeoman scaffolding tool that sets up the dev environment for you. Without SPFx you’ll have to find another way. Fortunately React offers a number of options, including the Create React App toolchain that I used. Version 4 was released on 10/23/2020. Compared to SPFx, it doesn’t come with SharePoint integration, such as no publishing or workbench. Also, there is no built-in property pane. It is not completely foreign to the Microsoft 365 universe though: the Microsoft Teams dev team has chosen Create React App as the foundation of the Microsoft Teams Toolkit.
  • Because you are leveraging the CEWP/SEWP, it also means that site owners will have access to the underlying code. SPFx does a better job at encapsulating the code.
  • As it is the route less travelled, you’ll also have difficulties finding code samples. But to be fair, recent SPFx samples won’t work on SP 2016 either.

If you are still developing on SharePoint 2016, hopefully this article will encourage you to get off the beaten path, and get better prepared for both SharePoint Online and Microsoft Teams. Feel free to share in the comments your challenges and successes!

MS Ignite: Day One Recap

As expected, Microsoft flooded us with announcements on this first day of the MS Ignite conference. I’ll only cover here my picks, on the collaboration and app building spectrum for desktop. There were a number of improvements on mobile I’ll need to get back to later. For a broader view, for example if you’re more into admin or compliance, I encourage you – just as I did yesterday – to directly browse my Power BI report. I refreshed it at 5pm PST, and won’t change until the refresh for day 2, around noon tomorrow.

I found out that there was another live report available, curated by John White. It offers a different perspective, so you can definitely explore both.

Remember that there are some contests with prizes going on. I already talked about Microsoft Mechanics Sweepstakes yesterday, but my preferred one is the Microsoft Ignite Cloud Skills Challenge which encourages you to learn.

Now to the announcements!

New Power Platform icons: the new look (see above) is more in line with the other products. You can check out the icons for yourself in your own Microsoft 365 waffle.

SharePoint Syntex: part of the broader Project Cortex, this app leverages AI and machine teaching to take on tasks such as document recognition and classification.

Project Oakdale: gives you a Power Platform like experience directly within Microsoft Teams, with the ability to create a table (up to 2 GB of data) and build a Power Apps app on top of it.
A benefit of this low-code approach, compared to a Microsoft list for example, is that it is scalable and can later be enhanced by developers.

Project Nucleus: Microsoft Lists hit back by bringing caching capabilities, promising fast response on large lists (bye bye 5,000 item limit) and the ability to work offline.

SharePoint global navigation: a new vertical bar positioned on the left hand side, similar to the experience you get in Microsoft Teams. You set it up on the Home Site.

SharePoint Framework: it now allows developers to build Microsoft Teams apps, in addition to the already available capabilities to build tabs and personal apps.

Microsoft Stream: videos are becoming first class citizens, benefiting from the same features as other files: external and anonymous sharing, integration with Microsoft Search, enhanced analytics, and new controls for security and compliance.

Microsoft Teams: a bunch of new features, including:

  • Upper limit of 25,000 members per team, instead of 10,000
  • Webinar registration
  • New search experience
  • SharePoint Home site in Teams
  • PowerPoint Presenter Mode
  • integration with github

Some more reading from Microsoft:
A new vision for Microsoft Stream
What’s New in Microsoft Teams | Microsoft Ignite 2020
Microsoft Lists Announcements

And to conclude this post, a selection of tweets with screenshots. Enjoy!
https://twitter.com/mkashman/status/1308424778252861440
https://twitter.com/Flow_Joe_/status/1308460764831784961
https://twitter.com/susanhanley/status/1308438094895603714
https://twitter.com/Path2SharePoint/status/1308495861156986880
https://twitter.com/jeffteper/status/1308429194418765825
https://twitter.com/Path2SharePoint/status/1308451066703302657
https://twitter.com/Path2SharePoint/status/1308429637970608129
https://twitter.com/Path2SharePoint/status/1308314373929091072