SharePoint PnP Webcast – Building real time news feed web part with SharePoint Framework
In this PnP Webcast, we concentrated on one specific client-side web part sample available from the SharePoint Framework web part GitHub repository. This client-side web part shows how to build a real time notification model with SharePoint Framework, which indicates when there are changes in the server side for the web part. Implementation is using React.js, Office UI Fabric React components, Azure Logic Apps, Azure Storage Queue, socket.io and a node.js based server side implementation hosted as Azure web application. That might sound complex, but in the demonstration section we'll cover the different steps one-by-one to demonstrated how things are actually working. It sounds much more complex than it is.
Notice. When this webcast was released, SharePoint Framework was available as a Developer Preview release.
Presentation covers following topics:
- User interface of the provided web part sample
- Logical architecture of the implementation
- Implementation details and used technologies
- React.js
- Office UI Fabric React components
- Azure Logic Apps
- Azure Storage Queue
- Azure Web Application (Node.js implementation)
- Socket.io JS library for real time communications
Web cast demo (8:42) shows following details
- How real time news web part works from UI perspective
- How socket.io library is used with the web part and in the server side implementation (node.js)
- How Office UI Fabric React components are used for providing consistent user interface
- How Azure Logic App has been created to poll changes from SharePoint Online list and to add them to Azure storage queue
- How Azure deployment is automated using Azure Resoruce management templates
Web part demonstrated on the video is available from SharePoint Framework Web Part GitHub repository.
Webcast presenters: Franck Cornu, Vesa Juvonen
Presentation used in this web cast is available from http://docs.com/OfficeDevPnP.
Video at YouTube.
Additional resources
See following resources around the SharePoint Framework.
- SharePoint Framework documentation
- Sample SharePoint Framework web parts in GitHub
- Open and Connected Framework - The SharePoint Framework - YouTube
- PnP Webcast - Building multi-view Angular 1.x client-side web parts with SharePoint Framework
- PnP Webcast - Reuse your existing JavaScript libraries with SharePoint Framework
- PnP Webcast - Building a sample search web part with SharePoint Framework using React
- PnP Webcast - Azure AD implicit flow with SPFx client-side web part (developer preview)
- PnP Webcast - CRUD operations with SharePoint Framework client-side web parts
- PnP Webcast - Using Office Graph from SharePoint client-side web parts
- PnP Webcast - Referencing external JavaScript libraries from client-side web part
- PnP Webcast - Building Angular SharePoint Framework client-side web part
- PnP Webcast - Building simple SharePoint Framework Client Web Part
- PnP Webcast - Integrating Angular v1.x to SharePoint Framework client side web part
- PnP Webcast - Getting started with web stack in SharePoint Development
- PnP Webcast - Getting started with SharePoint Framework
- PnP Webcast - Preparing for SharePoint Framework - What should I learn?
- PnP Webcast - Converting existing JavaScript apps to SharePoint Framework
- PnP JavaScript Core component
What is SharePoint Patterns & Practices (PnP) web cast series?
SharePoint / Office Dev Patterns & Practices (PnP) webcast series covers different patterns, practices and topics around development with Office 365 and SharePoint. Majority of the topics are valid for the Office 365 and SharePoint on-premises. Our objective is to release new around 30 minute long web cast each Monday with few slides and a live demo on the covered topic. All web casts are published at the PnP YouTube channel with additional references on the existing materials.
PnP is community driven open source project where Microsoft and external community members are sharing their learning's around implementation practices for Office 365 and SharePoint on-premises (add-in model). Active development and contributions happen in our GitHub repositories under dev branch and each month there will be a master merge (monthly release) with more comprehensive testing and communications. Latest activities and future plans are covered in our monthly community calls which are open for anyone from the community. Download invite from http://aka.ms/SPPnP-Call.
This is work done by the community for the community without any actual full time people. It’s been great to find both internal and external people who are willing to assist and share their learning's for the benefit of others. This way we can build on the common knowledge of us all. Currently program is facilitated by Microsoft, but already at this point we have multiple community members as part of the Core team and we are looking to extend the Core team with more community members.
If you have any questions, comments or feedback around PnP program or this blog post, please use the Microsoft Tech Community (SharePoint Developer group).
“Sharing is caring”
Vesa Juvonen, Senior Program Manager, SharePoint, Microsoft - 28th of November 2016