DEV Community: Fabio Franzini

Visual Studio Code: the essential extensions for working with SPFx

Fabio Franzini — Wed, 17 Jul 2019 09:38:53 +0000

When we work with SPFx (SharePoint Framework) the code editor we are going to use is almost exclusively Visual Studio Code.

For those not familiar, Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux and macOS with an Open Source license and based on Electron. This editor includes support for debugging, a control for integrated Git, Syntax highlighting, IntelliSense, Snippet and code refactoring.

In this post I want to collect the extensions that should never miss Visual Studio Code for development with SPFx.

And here are the ones I recommend:

SPFx Debug Configuration: This extension contains the SharePoint Framework debugging configurations to debug your code in Visual Studio code.
SPFx Snippets: SharePoint Framework Snippets.
SPFx Localization: SharePoint Framework extension to manage localization in projects.
SPFx Task Runner: Easily run SPFx tasks to spin up the server, package the solution and more.
SPFx Remove Components: Easily remove components from SPFx solutions
Rencore SPFx Script Check: Check the performance of external scripts and get snippet to include them in SharePoint Framework project.
Rencore Deploy SPFx Package: Easily deploy a SharePoint Framework solution package to SharePoint Online.
Rencore tenant-wide SPFx Extension deployment information: Easily add tenant-wide deployment information for your SPFx extension.

Other extensions not directly related to SPFx but very useful are:

npm Intellisense: Visual Studio Code plugin that autocompletes npm modules in import statements.
JSON to TS : Converts JSON objects to TypeScript interfaces. This will save you a lot of time creating new interfaces.
React Components: React Components saves you time be scaffolding out your React Components.
VSCode React Refactor: This simple extension provides refactor code actions for React developers.
React Playground: This plugin helps in automatically providing a webview playground of your React Component.

SPFx Essentials

Some of these extensions are directly packaged inside a single extension called “SPFx Essentials” created by one of the authors of these extensions, the legendary Elio Struyf whom I thank personally since these extensions have helped me and help me daily in the development with SPFx.

In summary, the extensions to install that I recommend are:

React.js cheatsheet

Fabio Franzini — Fri, 29 Jun 2018 10:08:27 +0000

React.js cheatsheet

Developing SharePoint solutions by using the SharePoint Framework (SPFx) we don’t have to use a specific framework but we are free to use whatever we want.

This is a huge benefit for developers but there are circumstances where actually this thing is not really true.

There are two cases when in fact we are almost forced to use Reactjs:

Use the react.js controls developed for the “Office UI Fabric“ library
Reuse tons of code already developed in the various examples and solutions for SPFx like, for example, the new “SharePoint Starter Kit”.

OK, I have to then be able to figure out react.js!

There are many resources to learn this framework, free online courses and not, official documentation, etc.

In fact, after learning the framework, which has a fairly simple learning curve, always need to have a cheatsheet to remember quickly the available APIs.

I share with you then this page that I found: https://devhints.io/react

In fact on the main site you’ll find many cheatsheet for as many frameworks, but in this case, the one for react.js, I find it really interesting.

Introduction to the Microsoft Business Application Platform

Fabio Franzini — Fri, 24 Feb 2017 15:13:16 +0000

In a world ever faster, companies need tools that allow them to implement what they ask for rapidly reducing the lowest possible cost.

Along with Dynamics 365, Microsoft released their Business Application Platform that can be used to build sophisticated business apps (Line of Business) using PowerApps which can be automated using Flow, while data can be stored and managed using Common Data Service (CDS) and using PowerBI you can view and analyze the data collected, without coding.

Microsoft Business Application Platform

The philosophy behind these services is the ability for Power Users who understand their business to be able to build and deliver solutions quickly without writing code, and for Developers the ability to easily extend the functionality for users and take advantage of a set full of rich services, leveraging the power of the Azure platform.

What is PowerApps?

“PowerApps is a service for building and using custom business apps that connect to your data and work across the web and mobile — without the time and expense of custom software development”

PowerApps comes with a visual designer (two versions: Web based and Desktop) to easily create apps for your mobile or tablet device. If you familiar with PowerPoint and Excel, you can build a mobile app with PowerApp.

With Microsoft PowerApps you able to:

Rapid creation of Mobile Apps and Web Apps using CRUD APIs for cloud and on-premises (using On-Premises Data Gateway) services
Easily build Mobile Apps and Web for your business that integrates Single Sign-On (SSO) to corporate data and services
Easy way to share Apps to others within the organization

What is Microsoft Flow?

“Microsoft Flow is a service for automating workflow across the growing number of apps and SaaS services that business users rely o.”

Microsoft Flow is an iSaaS (Integration Software as a Service) product where citizen integrators can setup automated workflows between multiple apps and services.

Flow comes with a Web visual designer with many templates for common scenarios and the flow team continues to build new templates.

You can also create flows from scratch connecting multiple services such as Common Data Service, SharePoint, Dynamics 365, Slack, and Twitter to name a few.

Microsoft Flow

With Microsoft Flow you able to:

Turn repetitive tasks into multistep workflows
Make decisions in your workflow, like running an action only when certain conditions are met
Connect securely to on-premises data (using On-Premises Data Gateway) and cloud based services
Prevent sensitive data from leaving your company using built-in or customized data loss prevention policies

What is PowerBI?

“Power BI is a business analytics service provided by Microsoft. It provides interactive visualizations with self-service business intelligence capabilities, where end users can create reports and dashboards by themselves, without having to depend on any information technology staff or database administrator”

With PowerBI you are able to:

Create visualization of your whole business on one dashboard
Create stunning interactive reports
Create stunning interactive reports
Easily embed BI and analytics in your app

What is Common Data Service?

“The Common Data Service allows you to securely store and manage data within a set of standard and custom entities. An entity is a set of fields used to store data similarly to a table within a database”

The Common Data Service allows you to securely store and manage data within a set of standard and custom entities.

An entity is a set of fields used to store data similarly to a table within a database.

After your data is stored you can use PowerApps and Flow to build rich applications using your data.

With Common Data Service you are able to:

Create custom entities
Import data into standard or custom entities
Add custom fields to standard entities
Using standard and custom entities into an app that you’re developing as a data source
Secure your data within your organization using role-based security