Tuesday, June 16, 2020

List of Frameworks that could help you start with SPFX

Since the last years the PnP team is creating a very solid and super fast evolutionary SharePoint framework where developers can make their work, a real integration with Microsoft Teams and Microsoft Graph, not only SharePoint, a real "stonk" case of growth :).

It's really impressive what everyone involve was able to do at this point, since documentation, videos to code..., i remember the beginning of the PnP concept and follow what Vesa Juvonen was generating on the initial steps, cannot believe the amount of years that already past...

But at this point i see people creating samples for everything and reuse existing frameworks without clear information, for people that is working, this can be very confusing on what is provided by SPFX or what needs to be added, i don't what to talk about the SPFX versioning that another article on how to keep everything on track.

But if you are beginning and can understand in what are you in, this Frameworks could help start you development and response the normal question that you make, where i can add a calendar, can i include a metadata control and all this questions that doesn't have a direct  but external answer. :) 

Here a compilation of some Frameworks that i found very useful, you can use to include in your SharePoint Framework (SPFX) solutions.

tui.image-editor

Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters.
https://github.com/nhn/tui.image-editor

fullcalendar

A full-sized drag & drop JavaScript event calendar
https://fullcalendar.io/
https://github.com/fullcalendar/fullcalendar

SharePoint Framework React Controls

Reusable React controls for your SharePoint Framework solutions
https://pnp.github.io/sp-dev-fx-controls-react/
https://github.com/pnp/sp-dev-fx-controls-react/

PnP Modern Search solution

This is a open source solution that helps you to build engaging search based solutions in the SharePoint modern experience.
https://microsoft-search.github.io/pnp-modern-search/
https://github.com/microsoft-search/pnp-modern-search/

PnP/PnPjs

Fluent JavaScript API for SharePoint and Microsoft Graph REST APIs
https://github.com/pnp/pnpjs/
https://pnp.github.io/pnpjs/

Chart.js

Simple, clean and engaging charts for designers and developers
https://github.com/chartjs

FluentUI

A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.
https://developer.microsoft.com/en-us/fluentui#/
https://github.com/microsoft/fluentui

Fontawesome

Popular icon toolkit
https://fontawesome.com/
https://github.com/FortAwesome/Font-Awesome

tui.image-editor

Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
https://github.com/nhn/tui.image-editor

tesseract

Pure Javascript OCR for more than 100 Languages
https://github.com/naptha/tesseract.js



All NPM installers commands can be found in the following web site.
https://www.npmjs.com/


I am sure there are a bunch of other frameworks i didn't reference that make a huge difference, but this ones will give you a huge boost to start and became motivated to develop in this platform.
Lot of the are being used in the samples provided by the PnP team.

SharePoint Framework
https://github.com/SharePoint/sp-dev-docs
Samples SPFX
https://github.com/pnp/sp-dev-fx-webparts
https://github.com/pnp/sp-dev-fx-extensions

Personal thought:
I remember when i was starting (in 1985 copying code from a magazine to my spectrum 128k that generate a game of falling pieces and needed to escape from them. Draw a circle with a line and thinking "i just draw Saturn, how fascinating this is.", more than 30 years and now i am going to internet to find code... some things never change)

Best regards,
Andre Lage

No comments: