Recap of Getting Started SharePoint Framework (SPFx) Webinar Series 2020.
From the last 2 months, every Wed and Saturday we had an amazing learning marathon as part of the SPFx webinar series. Today being immediate Saturday after completion of this series, let us recap on sessions delivered and links to related resources for reference. This post can be kept handy as I will be sharing a summary of each session, its slides, and link to its recording.
Event Summary
SPFx webinar series was organized as two-part series under M365 and Power platform User Group India. The objective was to arranged learning sessions with basics on getting started with SPFx and then Deep Dive SPFx with advanced topics. If you are interested in learning SPFx from the beginning, this series has sessions from basic to advanced topics and with a great line of speakers delivering the same. MS Team was utilized for this webinar.
Part 1 SPFx Getting Started Series – April 2020, every Wed and Saturday
Part 2 SPFx Deep Dive Series – May 2020, every Wed and Saturday.
Event Statistics
Attendees – Average 80 per session.
Total Sessions – 17
Total Speakers – 12
Organizers
Nanddeep Nachan || Kirti Prajapati || Vignesh Ganesan || Vijai Anand Ramalingam
Meetup Group Link – https://www.meetup.com/Microsoft-365-and-Power-Platform-User-group-India/
Link to list of Events – https://www.meetup.com/Microsoft-365-and-Power-Platform-User-group-India/events/past/
Summary of Sessions
Introduction to SharePoint Framework by Kirti Prajapati
In this session, Kirti Prajapati has covered the evolution of SharePoint customization and how it came down to SPFx. This session also covers modern toolchain which needs to be used to develop SPFx solutions, etc. Below is the screen capture agenda slide for quick reference.
Link to recording – https://youtu.be/jH-8YI_G_SI
Setting up your developer environment for SPFx by Nanddeep Nachan
In this session, Nanddeep has covered hand on how to set up a development environment for SPFx solution. This is an important session because modern toolchain development is a little different than traditional Sharepoint customization. Below is the screen capture agenda slide for quick reference.
Link to recording – https://youtu.be/PtFOygc3-ZM
Overview of SPFX Solution Structure by Prasham Sabadra
In this session, we learned about the Solution and code structure of SPFx solution, what are the different files that are generated, and its importance. The important thing to focus here is to manifest.json file, code structure with No Javascript framework, and ‘React framework’.
Link to recording – https://youtu.be/PtFOygc3-ZM
Deploying and shipping your SPFx solutions by Vijay Natrajan
In this session, Vijay started with typescript and explained the build process for node and web projects. This helped us understand the basic of gulp task which is core component in SPFx solution for building and packaging SPFx solution. Below is the screen capture agenda slide for quick reference.
Loading SharePoint Data in a SPFx Web Part by Jenkins NS
Up until now, though we learned about the basics of SPFx, we have not interacted with SharePoint Data. Building an SPFx solution will always require interacting with SharePoint Data. In this session Jenkins has explained different ways to get data from SharePoint using REST API. Below is the screen capture agenda slide for quick reference.
Link to recording – https://youtu.be/qqlh51XAO70
SPFx with React by Siddharth Vaghasia
React is the buzz word that goes hands in hands with SPFx. Many developers are struggling to understand React and its usage in SPFx. In this session, I have covered basic of React as a standalone concept and how it fits when building SPFx web part with React. Below is the screen capture agenda slide for quick reference.
Link to recording – https://youtu.be/xoP41YWudCs
Link to Slides –https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/06.%20SPFx%20with%20React%20-%20Siddharth%20Vaghasia.pptx
Getting started with PnP by Harsha Vardhini
There is an awesome alternative to loading data in SPFx which is PnP JS. In this session, we have learned about what is PnP JS and how to use it in SPFX. This session covers different common use case to get data from SharePoint using REST API and PnP JS and how PnP JS makes developer’s life easy. Below is the screen capture agenda slide for quick reference.
Link to recording – https://youtu.be/KRk12i7rOFI
Consume Graph APIs in SPFx – Jenkins NS
SPFx development is not just limited to SharePoint, we can also develop SPFx solution which consumes data from other M365 product suite like Azure AD, Outlook, One Drive, One Note, Planner, etc. In this session, Jenkins has covered nicely about different ways to consume GRAPH API in the SPFx solution. Below is the screen capture agenda slide for quick reference. This was last session in Getting Started series for April month and it could not have been more perfect as it was a little advanced topic which was a trailer of what’s coming Next in May month.
Link to recording – https://youtu.be/F7hpNLVH2HE
Build MSTeams Customizations with SPFx – Kirti Prajapati
In this session, Kirti walked us through how SPFx can be used for MS team’s customization and how we can surface an SPFx web part in MS teams. It also covers how to get the context of SharePoint and MS Teams so that we can handle the rendering of web part based on the context where the web part is running. Below is the screen capture agenda slide for quick reference.
Link to recording – https://youtu.be/NDqtMKJRB3k
SPFx Extensions Overview – Bijay Kumar Sahoo
A more common case with Modern SharePoint development is how to customize the User interface of OOTB pages like adding custom HTML to the header, footer, OOTB view customization like adding a menu item to command bar, etc. SPFx is not only about Web parts, but Extension is also an important feature that allows us to do mentioned things. This session covers in detail about different types of extensions and its practical usage with some common use cases. Below is the screen capture agenda slide for quick reference.
Link to recording – https://youtu.be/HmZm6rQzr3w
Office UI Fabric/Fluent UI with SPFx – Harsha Vardhini
Many times as a developer you might be asked to develop customization with a mix of OOTB features and Custom web parts. The issue with this approach was that the it was very difficult to match the look and feel of custom web parts with OOTB look and feel. Office UI Fabric or Fluent UI(merged recently) comes to our rescue where we now can develop customization but provide OOTB look and feel using Fabric/Fluent UI. This session starts with Basic understanding of Fabric core and React and then provides practical usage in SPFX solution. Below is the screen capture agenda slide for quick reference.
Link to recording – https://youtu.be/aReBtUoEyNI
PnP Controls for SPFx – Siddharth Vaghasia
One of the advanced and useful initiatives of PnP is PnP controls, these repos provide additional react controls that are not available in Fabric/Fluent UI(some are available in both). In this session, I have started a brief overview of PnP initiative and usage of Content react controls and property panes controls in the SPFx solution. Below is the screen capture agenda slide for quick reference.
Link to recording – https://youtu.be/BeJth3AsF34
Library Components in SPFx – Nanddeep Nachan
Int his session, Nanddeep has explained about SPFx library components which are another type(other than web part, extension) of solution that can be build using SPFx. He started with reasons on why do we need library components and then did a hands-on developing a library component. Below is the screen capture agenda slide for quick reference.
Link to recording – https://youtu.be/QcIIFM6HjsU
Demystifying versioning in SPFx solutions – Jasjit Chopra
This was a very interesting topic/session and something which provides insights on how can we version of SPFx solution. Jasjit has also covered how version can be configured while working with CI/CD pipelines. Below is the screen capture agenda slide for quick reference.
Link to recording – https://youtu.be/WtpSi9nlki0
Testing SPFx Solutions using Jest and Enzyme – Aakash Bhardwaj
Unit testing is an integral part of programming which is largely ignored by most developers. Let us(read, programmers) admit it we hate testing. But what if we can write a program to automate testing? Sound interesting? In this session, Aakash covered why and unit testing is required and how it can be automated using Jest and Enzyme. Below is the screen capture agenda slide for quick reference.
Link to recording – https://youtu.be/NZvNgEA5yvE
CI CD with SPFx – Dhaval Shah
Another buzz word around the technology world now a day is DevOps. In this session. Dhaval started with an overview of Azure DevOps and different services available as part of DevOps subscription. He has also provided a live demo on how to set up the Build and Release pipeline for your SPFx solution. Below is the screen capture agenda slide for quick reference.
Link to recording – https://youtu.be/7WVd4My_iHY
Link to Slides –https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/16.%20CI%20CD%20with%20SPFx%20-%20Dhaval%20Shah.pptx
Multilingual in SPFx- Jayakumar Balasubramaniam
This was last session in the Webinar series but a very interesting topic. If you are serving a customer who is global and have footprints around a different part of the world they might need multilingual for your SharePoint site. SharePoint provides multilingual features for OOTB pages/view/labels based on the user’s language preference but what if you are being asked to developer customization and also provide multilingual features in your web part? This session explores on the need for localization and step by step guild on how to do it. Below is the screen capture agenda slide for quick reference.
Link to recording – https://youtu.be/8L1QEeu7eP8
Conclusion
Overall, I must say this series was a very nice initiative and have covered most topics/part of SPFx. Even more, it was really good to see that there was lot of participation from attendees in chat window and during QnA sessions. All the participants were sharing their experience, asking about business cases and everyone was open to provide their 2 cents.
Again a big big thanks to Nanddeep, other organizers, and speakers for their valuable time….!!!!
I hope you enjoyed reading and this post is helpful for your future reference. Feel free to share your comments/feedback.
Happy coding..!!!
Users Today : 275
Users Yesterday : 243
This Month : 3095
This Year : 48230
Total Users : 350137
Views Today : 725
Total views : 863071