 It's been a few months since my last installment of the State of SharePoint client-side development. The last time we did this was back in August of 2021 and at that time I was writing these posts on a monthly cadence but I decided that that seemed a little too frequent so I thought I'd back off a little bit but now I'm thinking quarterly sounds good but let's give it a shot. So here we go with the first installment of 2022. We're going to give you a winter update on the State of SharePoint client-side development. I've got a bunch of updates around stuff from Microsoft, stuff from the pattern to practices group, as well as two new community projects or community-based projects that I wanted to introduce you to. Hey, I'm Andrew Coll. This episode is also available as a blog post on Voitanos.io and as a podcast on Voitanos.show. Check out the description below the video for links to these other resources. It's been a while since we last I did one of these last State of the SharePoint client-side development posts like I said in the introduction there just a minute ago. I like doing these because it gives you there's so much stuff going on in the SharePoint development world. I want to focus just on the client-side development side and of development that we all know that so many of us are doing these days and I really just wanted to highlight some of the more common things that a lot of us are using, different libraries and tools that we end up using. This is not an exhaustive list. This is really just highlighting some of the biggest things. Hey, if you see something or you think there's something missing from this list, let me know. Just drop a comment and let me know and just reach out to me so I can make sure I add it to our list of things that we keep track of. The idea here is that I want to give you a chance just to get a quick little summary on, hey, what's new in this? You don't have to sit there and check up on it all the time, something you have to follow every month, every single week or something. Instead, I really want to roll things up every couple months so you can just get a really quick, I'm using that, I'm using that. Oh, look, there's some new stuff there I didn't know about. That's what my goal is in this installment that I do, this recurring installment that I do. As I said in the introduction, I used to do this on a monthly basis, but I found a lot of times it was just kind of just sitting around. Instead, I backed off a little bit. I haven't done this actually in quite some time now, about five or six months, because not a whole lot has really changed, nothing really does in the fourth quarter, I'd say. There have been a bunch of changes to some things, much of the new things that have been added that I wanted to highlight, so this is just giving you a way to quickly get caught up on stuff. The first thing that I think we want to definitely highlight here is the latest version of the SharePoint framework, so that's the SharePoint version 1.14. You can check out the previous posts that I've written about this or YouTube video and podcast episode, I think it was episode number five, where I explained all of this stuff that we had and what's new inside of 1.14. It was a gigantic update. There were a lot of issues that were fixed, but we got updates to the SPFX yeoman generator, a bunch of prompts were retired, a bunch of new project templates, and then Microsoft added in a bunch of things like new APIs for all component types, for preview APIs, for adaptive cards, new APIs for web parts, new APIs for extensions, a lot of changes in the extension space specifically around list view command sets, a bunch of updates to, as I said, to the project types. For web parts, we got automatic support for themes, we got a new API to render web-friendly images, they fixed over 20 bugs, they got rid of two APIs, they deprecated two more APIs that are going away soon, so I mean, there's a lot of stuff they did here, so make sure you check that out. This is a boatload of stuff you want to take a look at here. The other thing that we've done, or that Microsoft has done an update to, or that I guess specifically the Patterns and Practices Group has updated, and this is really spearheaded by Microsoft's Patrick Rogers and the MVP Julie Turner from Simpraxis, and that's the Patterns and Practices JavaScript Library, or PMPJS. They did a big update a while ago, version two, a major update, and that really changed a lot of the public signature of the API around PMPJS, and what that did is it actually enabled them to set up or tee them up for version three, where they were able to do a lot of changes to the plumbing of PMPJS, to do a lot of optimization things, a lot of speed improvements, a bunch of, not just speed improvements to the library, but also in terms of the size of different binaries and kind of rationalize and simplify a bunch of stuff. They pushed out the release version three, they actually pushed it out on Valentine's Day, February the 14th of 2022, and then very quickly somebody in the community found something, fixed it, and they shipped it the following day on February the 15th in version 3.01. There were a bunch of changes that they've made to this. There are a few things that, you know, it's a major version release, so there are a few breaking changes that they did, but one of the big changes that they did here was around a global versus an instance kind of architecture. In the past, they had a model where you would create an instance of a SharePoint object or a Microsoft Graph object that you could use throughout the entire application, but the challenge that that gave them was it would make it hard to have your project talk to say multiple different tenants at the same time, or multiple sites at the same time, because you had that context wrapped around that global object. So in version 2.1, they introduced this concept of an isolated runtime, but they've since kind of backed off that and decided that wasn't really ideal, and so instead they've changed it up where you can have multiple instances of the Microsoft Graph or a reference to a SharePoint instance, so you can cross reference different tenants or different endpoints in the same application. Again, PMPJS, it's great for heavily using SharePoint framework projects by a lot of people. It's a great solution if you don't want to work straight with the SharePoint REST API or the Microsoft Graph REST API. They've done a lot of things to make your life a lot easier. They also have created two other objects assigned from and copied from, so if you already have an instance of Microsoft Graph, you could create a new instance of that or base it off of that, a new instance based off that and to go for a different endpoint or go to a different SharePoint tenant or SharePoint site to simplify your life a little bit. And part of that too, they're dropping this method, this GET method they had on their queryable instance object. Now you just do it direct. They've also streamlined their support for batching requests up with these different REST endpoints. And one of the ways they've done that is they've actually broken it out into a separate project. So to be able to take advantage of some of these changes that they had made in V3, you're going to have to make a couple changes. I think you're going to have to make a couple changes to your code to make sure that you can still support this support batches. And so you're going to want to make sure that you take a look at that. I've got a link to it in the notes here that you can take a look at. Now, in the previous version of PMPJS v2, to connect to different instances, you would create a new instance of a web object. But in v3, as I've talked about before, they have this new instance based architecture. So what you're going to do is you're going to create a new instance of something called an SPFI object, which is a SharePoint instance. And they have an associated one also that's going to be with Microsoft Graph. Well, one of the things now is that instead of using that web object used to create, you now should be creating this SPFI object to do basically the same thing. Check the docs for this. It explains exactly what's going on. And then furthermore, one of the other things they've done is they dropped support for the common JS package variants because they really aren't as relevant as they were needed previously. If you're already using PMPJS and you were using the version two, you want to check out their notes. They have a transition guide on moving from v2 to v3. Definitely take a look at that because that will help you out a good bit. I want to talk a little bit about the SharePoint framework generator from patterns and practices. So if you remember, we've got a generator that Microsoft gives us. That's just the SPFX generator. But Stefan Bauer has created another generator from the patterns and practices group that effectively it wraps the one that Microsoft gives us and gives us a lot more capabilities. Like it allows you to add testing to your project right off the bat or a couple other things that you can do supporting other object types or other template types like Angular and such. So the most current version of this is still what we had back in January of 2021. So it's a little over a year old and that's version 1.16. And it still only supports SharePoint framework version 1.11. I know this is a popular project with a lot of people, but the challenge that we ran into with this is when Microsoft made a big change in 1.12, that actually changed the version of Node that was supported, the version of Gulp and versions of Node. And that really tripped things up for the way that things were done with this project. So Stefan's trying to figure out exactly the best way to go through and approach this. It looks like he's probably just going to have to make one that's not backwards compatible and just say, look, going forward, you're going to use this version of the generator to do all these things. You're going to use that version of the generator to do all these other things. And so I think you want to keep an eye on this project, but there's no real update here. This is more just like a, I'm just giving you the news on like what's going on with this. The Patterns and Practices Group, they have two projects. One's called the PNP React Controls and one's called the PNP Property Controls. And the idea here is that, you know, they've created a community-based reusable library of React-based controls that you can use in your React-based web parts. That's what the React Controls are. Since I last checked in with you in August of 2021, they've had two drops or two updates, minor releases, version 3.5 that came out in December. And then another one that just came out in February of 2022, which was 3.6. They fixed a lot of things in these. I mean, you can go back and check all of the different things that they fixed here by taking a look at the release notes. And you'll see that they've got a bunch, you know, four things were fixed in 3.5. And in 3.6, we've got, oh, I'd say about 10 or so fixes that were included in that one. But since then, you also saw a bunch of updates and enhancements that they added to the PNP React Controls if you're creating a web part using React. We've got a new control. I'm a big fan of this one, the Adaptive Card Host. And what this does is this is a React Control that allows you to render an Adaptive Card as a component. I love Adaptive Cards for collecting information as a developer. I don't like dealing with all the UX and all that stuff. Well, it's kind of fun. I know my place and I know that I'm not good with that. So having being able to design a form or a way to display some data in a standardized way using an Adaptive Card, which is just a really just a blob of JSON. And that's going to well, and then I can just pass data into it in a templated way. This is going to make my life a lot easier. This is one we really, this is one that honestly, we really should have this out of the box in the SharePoint framework. We don't get this. We got it like Adaptive Cards, but they don't have one for a web part. And that's like, that's really what we need. They've also done a boatload of enhancements as well, things for the accordion, things for like the combo list item picker, date time picker, dynamic form, file picker, icon picker, for the list picker and list view control, people picker, there's a couple of localization updates like corrections for German and Norwegian. They also updated the Swedish translations and they also updated the Microsoft Graph Toolkit to use the latest version as well. Now, the sister project to this are the property controls. And this is, if you build a web part, doesn't matter if it's react or non-react, but if you build a web part, we can create a property pane and that property pane allows us to have multiple types of controls. One of the things that's nice about that is that we can have these different reusable controls that would live inside of the property pane. And what the Patterns and Practices group has done is there's a couple of people that maintain a couple different controls that are available to us. So they had an update in December as well that was version 3.3. They also had a pair of updates in February 3.4 and 3.5. You can check out the release notes for that. There's a bunch of fixes that were associated with those three releases. We're currently at version 3.5. There's nothing new in there in terms of like new components that we can use. There are some enhancements to things like the field code editor and field collection data properties, as well as the file picker and the property editor as well. And then finally they also included a type declaration for your strings in the definition output. Now another thing that we have, the last one that's kind of an update from the previous update before I get to my new ones that I've added to our state update, is the PMP Modern Search. So this one is done. They've done a bunch of updates around this. They're still maintaining two versions side by side. We still got version 3 and version 4. And you can check out the docs to explain why you'd want to use version 3 and why you'd want to use version 4. But there's been a lot of updates here. For version 3, there was an update in December of 2021. So the current version for version 3 is 3.23.0. And in that update, really just saw a bunch of fixes around that. Things like removing a toggle control, fixing the edit experience if a query parameter is missing duplicates and proposed suggestions and changing a preview icon as well. When it comes to the updates for version 4, we had an update in October of 2021, three updates in December of 2021, and a fourth update or what would that be, a fifth update in February of 2022. So the current version that we can take, the current version is 4.5.4 if you're on the major version 4. Some of the things, since we last checked in with you, a bunch of changes they've done. There's a bunch of new features they've added adding the ability to sort columns with handlebars expressions. They also added some additional features around adding a toggle property to turn on and off PMP telemetry or specifically application insights, support for result source configuration, custom layout support, search results, web part, search data source updates, a bunch of stuff in there. And let's see, we have another one here around updates that we had, new features added a hit highlight properties for when there's a SharePoint data source as well. When it comes to fixes or enhancements, and there's a lot of stuff here. I mean, I'm looking at one of the updates has got about 10 or 15. Another one's got about five. Another one's got about 15, 20 or so. There's also a bunch of updates around search filters, new features that were added around search filters. These three updates though, are these updates that you've seen that they've added here from inversions 4.4.1 and then 4.5. everything 1.1.1.2.2.3.4. There's a bunch of stuff here. So if you're using the PMP modern search web parts, you ought to check out all the stuff that they've done in version 4, just in the last three-ish months, four months, I guess that'd be five months, because they've had a lot of updates that they've shipped. Now I've got two things here that are relatively new, that are new to new entries, I guess, to my state of client side dev for SharePoint. Neither one of these are new-new, like they've been around for a little bit, but I wanted to include them because they're from the community and they also are pretty popular from the community. So one of them is the library H2O, that's by Stefan Bauer and Julie Turner works very closely with him as well on this. And what this is, is that this is an open source alternative to Microsoft's Fluent UI web design system. Microsoft's Fluent UI design system is very much, when you want to use reusable components, it's very react-based. It's not as just standard CSS. And there's also some debate about if they implemented things like the best way, some people aren't a big fan of it. So what Stefan did is Stefan's created the H2O library, which is much, it's a re-applementation of it, but it's also a much friendlier and easier one to use. So if you like the look of Fluent UI, but you're frustrated with how Microsoft does it, or at least the cadence of how they update things, you can go check out what Stefan has done because this is going to give you like a lot of, it's going to give you more of an open source and much more of a community-based project that's going to, just in nature, it's just going to be updated more frequently. He's also using Storyboard to also go through and to show off a lot of these different components that they've created. He works closely with Julie Turner, and they've created another like extension of H2O called H2O React. Now it's currently listed as being in like pre-alpha version, but I'd consider it more like a beta because it's pretty solid. And I mean, the beta piece, I mean, I would just use it and just try and see like, you know, are things, are things breaking for you because they want to get things addressed. They're following this model of how to deploy things or how to package things up using, it's called atomic design. So you have these things called atoms. So those are like, think of those as like components, like a text box or like a toggle control, stuff like that. There's 21 of those in the React package. You can use those to then build something that they call a molecule. And so that's, and there's 14 molecules or controls. Think of those as like the title section of a card or footer section of a card, maybe an option list, a web part title control, something like that at the top. And then you could use these different controls or what they call molecules to create something called an organism. So there's three things, there's three organisms that they include in the React package that you can play with things like a dialogue, a document card, or a Microsoft Teams-based splash card. So go check out the links for those that I've got listed in the notes associated with this episode to learn more about it. And then finally, the last entry I have here is one by someone named Serjay. And Serjay's got, he's MVP. I've actually, I've never gotten a chance to meet Serjay, but we worked together, we worked together on the NG office UI fabric a long time ago in the very, from the very first version of the office UI fabric, when Microsoft was so focused on React controls and everyone else was using, or a lot of us, I should say everyone, a lot of us were using Angular and Serjay, along with a lot of other people, contributed to an open source project that I was, I guess I kind of helped, I was manager of it, but we had a lot of contributors, a lot of people were involved in it. And what he did is he's created this thing called the SPFX fast serve. So you know, when you go to create a new project, or you go to run gulp serve, it can take like two or three or four or five seconds for things to like recompile, rebuild, and try your project again. What Serjay's done is he's gone through and created this thing called fast serve, which you make a change to your project, like a default React project, and it can have it refreshed in your browser in less than a half a second. So he's got an update that he shipped to it, version 3.0.3, that you want to go take a look at. Again, I don't, because it's the first time I'm listing this in here, in my update, I don't really have a what's new, because I didn't have anything to compare it to before that I've covered. So that's basically it. That's all the stuff I wanted to cover. Again, we took a look at what was new at the SharePoint framework, PMPJS, PMP's SPFX generator, the reusable React controls from the patterns and practices group, the reusable, or sorry, the property pain controls from the patterns and practices group, stuff from modern search, a lot of updates there, H2O from straight from the community and SPFX fast serve as well. Again, if there's something, another very popular project that you use in your client side development stuff, and you think that we should include that here is something in this list where I do these check-ins. Let me know, just drop a comment and send me a link to it. I'll take a look at it and see how what the popularity is of it, if it makes sense to share it. The idea here is not for me to kind of vet these things, but to make sure that we reach the broadest audience, not every single little project. So that wraps us up. So thanks for tuning into this episode. Thanks for tuning in. I hope you learned something. You got a question or comment? Let me know what you think by dropping a comment in the video below or tweeting me at Andrew Connell or at Voitanos. And if you liked this episode, man, I'd really appreciate it if you'd share it with the rest of your friends. This episode, as I said earlier, is also available as a blog post on Voitanos.io and on the Voitanos podcast at Voitanos.show. I've included links in the description below to these other resources. And hey, don't forget to subscribe to this channel and click that little bell in the corner to be notified of future episodes.