SharePoint Framework 101 (SPFx)
•
3 likes•2,465 views
A beginner's guide to setting up your development environment to build a very basic "Hello World" web part using the SharePoint Framework and resources on how to keep learning more about it.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to SharePoint Framework 101 (SPFx)
Similar to SharePoint Framework 101 (SPFx) (20)
More from Matthew J. Bailey , MCT
More from Matthew J. Bailey , MCT (8)
Recently uploaded
Recently uploaded (20)
SharePoint Framework 101 (SPFx)
- 1. MATTHEW J. BAILEY, MCT SHAREPOINT FRAMEWORK 101
- 2. WWW.MATTHEWJBAILEY.COM AGENDA 1. Background 2. What we can do now & what is coming in the future 3. Setting up our development environment with open source tools & libraries that work with with it: • Node.js & NPM • Yeoman • VS Code • Gulp • TypeScript • Workbench – (testing) 4. Demo – Basic web part 5. Resources for you to learn about SPFx
- 3. WWW.MATTHEWJBAILEY.COM SPECIAL THANKS TO… Paul Choquette (pronounced sho-ket), my mentor and whom I have had the opportunity to learn much about SPFx and other SharePoint goodness from. • https://twitter.com/starxed • https://github.com/star-crossed And the SharePoint Saturday Baltimore sponsors: • DAN Solutions • DNA Solutions • Xgility • Liquid Mercury • AIS • KwizCom
- 4. WWW.MATTHEWJBAILEY.COM Although I love to share my knowledge with others and help people learn, everything in this presentation is included under copyright from its prospective owners (i.e., Microsoft owns any references to SharePoint, Node.js is owned under public copyright laws, etc.). This includes original content of my own creation. You do not have permission to use anything in this presentation for reasons other than personal learning use. Duplications and/or edits from my personal content for reasons of creating your own presentations is strictly prohibited by me without express, explicit permission from me or it’s prospective owners. In other words, it took me a lot of time to make this presentation and I would truly appreciate it if you don’t steal me work. Thank you © COPYRIGHT NOTICE
- 5. WWW.MATTHEWJBAILEY.COM ABOUT ME • A “SharePoint All-Rounder” • Independent consultant and Microsoft Certified Trainer for Noteworthy Technology Training in the Washington D.C. area. • My job tasks vary including Administration, Development, Training, Analysis, UAT and Project Management • I am have worked with SharePoint for 10 years, Office 365 and Azure for about 5 years. • If I don’t know an answer to one of your questions, I will try to find it out or point you in the right direction! Matthew J. Bailey MCT, MCSE, MCSA www.noteworthytt.com www.matthewjbailey.com
- 6. WWW.MATTHEWJBAILEY.COM • Another method/way to build solutions for SharePoint (not a replacement) • Different approach using open-source tools vs. Microsoft’s proprietary tools from the past • Goal is to be a better solution than the app (add-in) model or embedding JS on a page • Overcome issues with previous development models add-ins and script parts had • Available online only in Office 365, but now on roadmap to come on-premises in 2017 SPFx BACKGROUND
- 7. WWW.MATTHEWJBAILEY.COM WHAT ARE WE BUILDING TODAY “Hello World” web part
- 8. WWW.MATTHEWJBAILEY.COM • https://dev.office.com/sharepoint/docs/spfx/tools-and-libraries DEVELOPMENT TOOLS & LIBRARIES
- 9. WWW.MATTHEWJBAILEY.COM MODERN VS. “LESS” MODERN Old School New School .Net framework Node.js NuGet NPM Template YEOMAN MSBuild (xml based) GULP (JavaScript based) VB or C# TypeScript MVC, WebForms, WebControls React, Angular Testing, Running locally Workbench
- 10. WWW.MATTHEWJBAILEY.COM https://dev.office.com/sharepoint/docs/spfx/set-up-your-development- environment • Node – verify it is version 3.xxx or up of NPM • Visual Studio Code (or any editors, i.e. Atom, Sublime, WebStorm etc.) • Gulp (globally or locally) task manager • Yeoman – template manager • @Microsoft/generator-sharepoint DEVELOPMENT TOOLS & LIBRARIES
- 11. WWW.MATTHEWJBAILEY.COM “NPM” - You will be using this a lot • NPM install, globally locally, not using a parameter in the cmd line looks for a .json file and some file can get very big on it • Run as admin, but you can use Cmder or the CMD line or PowerShell • npm –v to verify we have installed it properly • npm install –g –production windows-build-tools • npm install -g yo • npm install -g @microsoft/generator-sharepoint SETTING UP THE DEVELOPMENT ENVIRONMENT
- 13. WWW.MATTHEWJBAILEY.COM Verification of a successful install NODE.JS
- 14. WWW.MATTHEWJBAILEY.COM npm install –g –-production windows-build-tools -g means global --production means we only want production ready files, not dev or not windows related NPM
- 15. WWW.MATTHEWJBAILEY.COM Setting it Up MD and/or CD to place files the directory you want I made C:myFirstSPFXwebpart – we want to stay in this directory to install everything following • npm install -g yo (this installs Yeoman itself) • npm install -g @microsoft/generator-sharepoint (this installs the generator) YEOMAN
- 16. WWW.MATTHEWJBAILEY.COM • Part of Node.js • Name your solution • Where to place your files • Name your web part • Describe your web part • Select which JavaScript framework to use YEOMAN (SHAREPOINT SOLUTION GENERATOR)
- 19. WWW.MATTHEWJBAILEY.COM VISUAL STUDIO CODE • We could use other lightweight editors such as too, i.e. Atom, Sublime, WebStorm etc.) http://code.visualstudio.com
- 20. WWW.MATTHEWJBAILEY.COM TYPESCRIPT • Like you needed to learn something else, right? • Superset of JavaScript • Strongly typed, allows you to declare data types of variables that regular JS does not allow • “Vanilla” JS will not require a data type on a variable, TS will
- 21. WWW.MATTHEWJBAILEY.COM GULP • To install: • An automated build task runner (built on Node.js) • Used to automate repetitive tasks • You can create and add your own tasks too! • gulp –tasks allows us to see what commands we have at our beck and call to use
- 22. WWW.MATTHEWJBAILEY.COM WORKBENCH • A lot less of a pain than having to have your own SharePoint test server • An HTML page • Allows you to add client-side web parts • Can be ran locally or within SharePoint Online • _layouts/workbench.aspx • Trust-dev-cert to install a local SSL cert so we can use the program • Launches a local web server
- 23. WWW.MATTHEWJBAILEY.COM WORKBENCH Prompt to install local SSL certificate:
- 24. WWW.MATTHEWJBAILEY.COM WORKBENCH Launching workbench and selecting our Hello World web part
- 25. WWW.MATTHEWJBAILEY.COM WORKBENCH Our finished product - displaying and altering the text in the web part property panel
- 26. WWW.MATTHEWJBAILEY.COM DANG! Bet you won’t take for granted how much Visual Studio does for you without having to manually hand code all of this stuff ever again – huh?!?! Yes, all of this work is challenging at first, but down the road where you start to integrate and build more complex solutions upon it will be the brighter part later. It is a challenge to get it up and running however admittedly. TAKEAWAYS
- 27. WWW.MATTHEWJBAILEY.COM COMING SOON: SPFx Extensions • Field Customizers (similar to JS Link for display templates/field overrides) • Interconnected web parts (consumer/provider) • Application customizers (sort of like a delegate control) • Command Set (custom actions) OFFICIAL ROADMAP: • https://dev.office.com/sharepoint/docs/spfx/roadmap ROADMAP (AS OF MAY 2017)
- 28. WWW.MATTHEWJBAILEY.COM http://aka.ms/spfx-tutorials SharePoint / Office 365 Dev Patterns & Practices https://www.youtube.com/channel/UC_mKdhw-V6CeCM7gTo_Iy7w Tools Needed: • http://node.js • https://www.npmjs.com/ • http://yeoman.io/learning/ KEEP LEARNING: MORE RESOURCES
- 31. WWW.MATTHEWJBAILEY.COM GOODBYE WITH A TOUCH OF SARCASM
Editor's Notes
- 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.
- Review the VS Code menu on left and such
- Review the VS Code menu on left and such
- 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.
- 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.
- 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
- All of these tools are cross platform compatible, Mac, Linux or Windows
- LTS version of node as that is what version MSFT has chosen to support
- 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….
- Any command line tool is fine, CMDR, PowerShell, CMD – run it as an administrator
- Node package manager, installs modules and dependencies, still in C:\windows\system32
- You can think of the @Microsoft part as a namespace
- 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.
- Anything with parenthesis around it is a prompt/default placed for you
- Yes, this takes awhile to run…
- Review the VS Code menu on left and such, Code (or any editors, i.e. Atom, Sublime, WebStorm etc.)
- 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
- 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
- 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.
- Workbench launching from typing gulp serve in our console window
- Changing the text to our web part in the property pane.
- 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.
- It is confusing and hard to find things out on GitHub and in the PNP library admittedly