Presented by Dheepa Iyer Managing Consultant Commissioned for Reston SharePoint User Group SharePoint Framework May 2017
About Me Dheepa Iyer Managing Consultant, Washington DC Metro, XGILITY Personal Email:: bdheepa@hotmail.com Work Email:: diyer@xgility.com 2
XGILITY Microsoft Capabilities We build applications, workflow and collaboration solutions using SharePoint, Office 365 and Azure that are secured and deployed to mobile devices using EMS SharePoint Office 365 Azure Secure Productive Enterprise Business Process Automation Workflows and Forms using Nintex SharePoint Designer InfoPath 1. SharePoint Online 2. Office Pro Plus 3. OneDrive for Business 4. Power BI 5. Skype 6. Exchange Web Sites Learning Management System Bing Maps Cloud Identity Management Line of Business Applications Contracts Management Human Resources Finance Sales and Projects Migrations Secure Productive Enterprise SharePoint Farms Application Integration SQL Azure Information Protection Integration Connecting line of business to build Dashboards and Reports SharePoint Online: 1. Training 2. Activation 3. Adoption Application Modernization Windows 10 3
Our Transformational Collaborators 4
Agenda 1. History & Current Framework 2. Getting Started Tools & libraries Development Environment 3. Live Demo 4. Resources 5. Q&A 5
SharePoint Evolution Basic Document Management Team Sites and Portals Workflows, Branding and Customizations Office integration, CSOM Cloud, App Model 6
SharePoint Framework Highlights Modern pages and client-side development No Iframes! No WebPart Zones Lightweight web and mobile Supports open source tools and JavaScript web frameworks Host any where 7
Benefit for Business Mobile and Cloud Friendly Less Expensive Development and Maintenance Low code and Efficient JavaScript experience Reduced development cost Integration with other office tools 8
Key Features 1. Runs in the context of the current user and connection in the browser 2. The controls are rendered in the normal page DOM 3. The controls are responsive and accessible by nature 4. Enables the developer to access the page lifecycle 5. It's framework agnostic 6. Based on common open source client development tools 7. Performance is reliable 8. Solutions can be deployed in both classic web part and publishing pages and modern pages 9
Your Development Toolkit & Libraries Yeoman Generators TypeScript Javascript Frameworks Node.js Node Package Manager (npm) Gulp Source Code Editors SharePoint REST APIs Office Graph Office UI Fabric O365 pnp core-pnp-js 10
Setup Development Environment 11
Install Developer Tools > CODE EDITOR JavaScript runtime built on Chrome's V8 JavaScript engine. Event-driven, non-blocking I/O model that makes it lightweight and efficient. Visual Studio Code Atom WebStorm 12
Install Yeoman and Gulp Generator: Plugin / Node.js Module Provides common build tools, common boilerplate code, and a common playground web site to host web parts for testing. Install Yeoman SharePoint Generator Prepare for build and package Build, Preview, & Test (Gulp & Grunt) Package Manager for dependency management (npm & Bower) 13
Optional Tools Fiddler Postman CMDER git http://www.teler ik.com/fiddler https://www.get postman.com/ http://cmder.net / https://gitscm.com 14
PowerShell Commands 15
Client Web Part Development Life Cycle 16
Building a Web App: A 10-Step Guide 1 2 3 4 5 Scaffold the Web Part using Yo Code the Web Part Setup Debug Environments Build and test code using Gulp Determine CDN: Azure Storage Office 365 CDN SharePoint 6 7 8 9 10 Update cdnbasepath in write-manifests.json Package the Web Part NOTE: This will not package assets Prepare assets to deploy to CDN (js, css, etc.) Upload the resource files to CDN Install package to App Catalog 17
Powershell commands to build a webpart 18
[ LIVE DEMO ] 19
Resources SharePoint PNP http://aka.ms/sppnp Office Dev Center (SP) https://dev.office.com/sharepoint/ docs/spfx/sharepoint-frameworkoverview Office Blogs https://dev.office.com/blogs 20
Dheepa Iyer Managing Consultant Looking for YOUR Transformational Change Join our passionate team of experts to deliver Innovative solutions with our customers Reston SharePoint User Group Rockville, MD: Ft Mead, MD: McLean, VA: Wash., DC: Collaboration Specialist Cleared Developers Cleared Admins.NET Developers K2 Developers SharePoint Admins.NET developers May 2017 Thank You!! Questions??