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:: [email protected]

Work Email:: [email protected]

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

Secure Productive SharePoint Office 365 Azure Enterprise

Business Process Automation 1. SharePoint Online • Workflows and Forms using 2. Office Pro Plus Web Sites − Nintex 3. OneDrive for Business • Learning Management Cloud Identity − SharePoint 4. Power BI System Management Designer 5. Skype • Bing Maps − InfoPath 6. Exchange

Line of Business Applications • Migrations • Contracts Management • SharePoint Farms • Secure Productive Azure Information • Human Resources • Application Integration Enterprise Protection • Finance • SQL • Sales and Projects

SharePoint Online: Integration 1. Training • Application • Connecting line of business to Windows 10 2. Activation Modernization build Dashboards and Reports 3. Adoption 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

Workflows, Office Basic Document Team Sites Cloud, App Branding and integration, Management and Portals Model Customizations CSOM

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 – Visual Studio Code JavaScript engine. – Atom – Event-driven, non-blocking I/O model that – WebStorm makes it lightweight and efficient.

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 Package Manager for dependency management (Gulp & Grunt) (npm & Bower) 13 Optional Tools

Fiddler Postman CMDER git

http://www.teler https://www.get http://cmder.net https://git- ik.com/fiddler postman.com/ / scm.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 Code the Web Part Setup Debug Build and test code using Determine CDN: using Yo Environments Gulp • Azure Storage • Office 365 CDN • SharePoint 6 7 8 9 10 Update cdnbasepath in Package the Web Part Prepare assets to deploy Upload the resource files Install package to write-manifests.json NOTE: This will not to CDN to CDN App Catalog package assets (js, css, etc.) 17 Powershell commands to build a webpart

18 [ LIVE DEMO ]

19 Resources

SharePoint PNP Office Dev Center (SP) Office Blogs http://aka.ms/sppnp https://dev.office.com/sharepoint/ https://dev.office.com/blogs docs/spfx/sharepoint-framework- overview 20 Looking for YOUR Transformational Change Dheepa Iyer Join our passionate team of experts to deliver Innovative solutions with our customers Managing Consultant

Rockville, MD: Collaboration Specialist Ft Mead, MD: Cleared Developers Cleared Admins Reston McLean, VA: .NET Developers SharePoint User Group K2 Developers SharePoint Admins Wash., DC: .NET developers Thank You!! Questions?? May 2017