SharePoint Framework 101 (SPFx)

Editor's Notes

• #4: Special thanks to, remember I am new to this also, SPFx only became available in preview last year and has slowly started to gain momentum. Since all of the tools are very “non-Microsoft”, the learning curve is great than it has been in the past.
• #5: Review the VS Code menu on left and such
• #6: Review the VS Code menu on left and such
• #7: App (add-in) model is embedded in an iFrame which comes with restrictions on interactivity around it, it can’ access the DOM and is difficult to make responsive. Script web parts can be edited by users and accidentally become broken and can’t be added to NoScript site. Some in the community have stated “open source or die” as to not become the next Lotus Notes.
• #8: It will take awhile to get to the point where we are able to just launch a web part, so for today we are going to use the “Hello World” sample. However, although SPFx is limited at this time to web parts, you can still add a fair amount of functionality to them such as pulling in data from other parts of SharePoint, APIs, the Microsoft Graph and more.
• #10: In case you are familiar with the what is now considered “older” way of doing things (although not going away anytime soon), I wanted to give you some ground work Microsoft’s tried and true vs. open-source– Node.js a JavaScript run time engine .Net package manager that mainly deals with .NET assemblies integrated with V.S Node package manager, you guessed it, integrated with Node and has 350k as of 01/2017 Templates in VS vs. Yeoman template generator, a part of Node.js The Microsoft Build Engine (MSBuild) is the new build platform for Microsoft and Visual Studio. MSBuild is completely transparent with regards to how it processes and builds software, enabling developers to orchestrate and build products in build lab environments where Visual Studio is not installed. GULP - Build system automating tasks: minification and copying of all JavaScript files, static images, capable of watching files to automatically rerun the task when a file ... VB C# - standard VS languages existed - TypeScript, once fashionable now becoming a fashion staple just a superscript of JavaScript MVC - Reach , Angular – I have heard it phrased that Reach is more of a library and Angular is more of a framework The last two, aren’t exactly different but SPFx allows you test locally if you are not connecting to data online and online if you are using other data sources
• #11: All of these tools are cross platform compatible, Mac, Linux or Windows
• #12: LTS version of node as that is what version MSFT has chosen to support
• #13: LTS is the version Microsoft supports, this is the current version MSFT supports – the other version is not quite production ready with MSFT’s code. LTS is the version Microsoft supports. You could use this on Mac or Linux too, but let’s face it we’re at a MSFT event so….
• #14: Any command line tool is fine, CMDR, PowerShell, CMD – run it as an administrator
• #15: Node package manager, installs modules and dependencies, still in C:\windows\system32
• #16: You can think of the @Microsoft part as a namespace
• #17: Similar to the wizard in Visual Studio, it is a scaffolding tools for web projects. This means it builds out the project file and folders/structure. It is not language or platform specific. However, by using plugins (in this case our SharePoint files) it can install specific items we need. It relies on npm and Gulp. A generator is basically a plugin We take care of providing everything needed to get started without any of the normal headaches associated with a manual setup.
• #18: Anything with parenthesis around it is a prompt/default placed for you
• #19: Yes, this takes awhile to run…
• #20: Review the VS Code menu on left and such, Code (or any editors, i.e. Atom, Sublime, WebStorm etc.)
• #21: Inside of VS Code, we are going to use the node package manager to install typescript. IF you are using VS Code, we don’t’ really need to do this as it is already there but I am doing it as an example in case you might be using another light weight editing tool. From the console window we type: Npm install –g typescript We can now review the VS Code menu on left and such
• #22: Gulp is a javascript task runner. It can do things like minify your js or automate manual tasks. Gulp however prefers code over configuration. Being that your tasks are written in code, gulp feels more like a build framework, giving you the tools to create tasks that fit your specific needs. Type gulp –tasks, review each: Clean - Serve, will start a local Node.js server for us to play and test with
• #23: With Visual Studio, we had to have to have SharePoint server to test and deploy our solutions on the same machine (in most cases) to test our solutions and web parts. We also had to be a “pseudo-admin” to keep the servers up to date with all of the patches and debugging of to keep the thing up and running.
• #25: Workbench launching from typing gulp serve in our console window
• #26: Changing the text to our web part in the property pane.
• #28: Some things were announced as coming soon toward the end of May, and then there is the longer term road map. Field Customizers (aka: JSLink) Field customizers is the new JSLink. These allow you to register a JavaScript object that will replace the rendering of a field within a SharePoint list or document library. Using JSLink field customizers, you can change what's rendered in a cell based on the data within the cell. For instance, maybe you want to render a KPI visualization based on the number value within the cell. With field customizers, you can easily implement some field rendering override to implement this. Application Customizer (aka: delegate controls) These aren't really delegate controls, but they come pretty close to what we used to be able to do. Application customizers allow us to register a piece of JavaScript on every page within a SharePoint site. This also comes with a contract from Microsoft about specific named div elements on the page, such as headers and footers. Using application customizers would allow us to create custom headers and footers or use it to do something such as add Azure App Insights or Google Analytics to all pages within a SharePoint site. Command Set (aka: Custom Actions) The third type of artifact they are adding to the SharePoint Framework are command sets which we knew as custom actions. Using a command set, the SPFx now allows us to add items to the ECB menu (the drop-down context menu on list and library items) as well as buttons to list and library toolbars. Unlike the restricted custom actions we had in add-ins, these buttons can execute JavaScript so we are back to having a lot of power with these custom actions command sets again. Web Part Connections Similar to a capability we have had for many years in SharePoint, SPFx brings the notion of web part connections to SPFx client-side web parts. It works very much the same way we did it before. You define some sort of an object, such as an interface, and then create two different web parts: a consumer and a producer.
• #30: It is confusing and hard to find things out on GitHub and in the PNP library admittedly