SPFx A modern development tool for Share Point

SPFx – A modern development tool for Share. Point EVENTS. COLLAB 365. COMMUNITY Online Conference June 17 th and 18 th 2015

Kirti Prajapati SPConsol Share. Point Consultant, Ahmedabad, INDIA § 11+ years experience § MCTS § Training Contact Details Email : kirti. prajapati@gmail. com Twitter : @kirtipprajapati Facebook : facebook. com/kirti. prajapati. 7374 Linked. In : linkedin. com/in/kirtiprajapati EVENTS. COLLAB 365. COMMUNITY

Agenda • Introduction – Why do we need the Share. Point Framework? – What is the Share. Point Framework? • Share. Point Framework – Development tools and libraries – How the Toolchain works – Demo - Building client-side web parts • Intended Audience – Traditional Share. Point developers, Web developers – No previous experience with “modern web development” required EVENTS. COLLAB 365. COMMUNITY

Share. Point Development Background EVENTS. COLLAB 365. COMMUNITY

Microsoft Managed Solutions 2000 Full Trust Code Microsoft Online Services Partial Trust Code App Model Sources: 1. 451 Research, Hosting and Cloud Study, 2014 EVENTS. COLLAB 365. COMMUNITY

Enterprise-Grade EVENTS. COLLAB 365. COMMUNITY Modern Toolchain User Focused

What is the Share. Point Framework? EVENTS. COLLAB 365. COMMUNITY

Share. Point Framework Modern pages and Client web parts Client side applications A new development model New deployment possibilities The new Share. Point Framework is a new developer model accompanying the new Share. Point UX. It's based on modern web development stack and for the first time ever Microsoft offers us a model that can be used on any platform with any Java. Script framework to build Share. Point customizations. EVENTS. COLLAB 365. COMMUNITY

Key Features of SPFx • • Provides full support for client-side customization Provide easy access to Share. Point data Customizations run in current context Customizations responsive and accessible Development experience embraces web development stack Customization work in classic, publishing and modern pages First Party & Third Party End users can use SPFx client-side solutions that are approved by the tenant administrators (or their delegates) on all sites, including self-service team, group, or personal sites. EVENTS. COLLAB 365. COMMUNITY

Development tools and libraries EVENTS. COLLAB 365. COMMUNITY

Development Toolchain Overview • Development environment • • Share. Point Workbench Share. Point Development Tenant • Developer toolchain • • Node. js and NPM Yeoman Gulp • Automation • Platform-agnostic • Strong Ecosystem • Simple Webpack EVENTS. COLLAB 365. COMMUNITY

Development Toolchain Comparison Project Templates EVENTS. COLLAB 365. COMMUNITY C# MS Build

How the Toolchain works EVENTS. COLLAB 365. COMMUNITY

EVENTS. COLLAB 365. COMMUNITY

EVENTS. COLLAB 365. COMMUNITY

EVENTS. COLLAB 365. COMMUNITY

EVENTS. COLLAB 365. COMMUNITY

Client-side Web Part build flow EVENTS. COLLAB 365. COMMUNITY

npm install generator-sharepoint -g gulp serve yo sharepoint workbench Code gulp package-solution gulp upload-cdn manual upload of the app EVENTS. COLLAB 365. COMMUNITY

Setup Office 365 tenant • • Sign up for an Office 365 tenant Create an app catalog site Create a new Developer Site collection Share. Point Workbench https: //dev. office. com/sharepoint/docs/spfx/set-up-your-developer-tenant EVENTS. COLLAB 365. COMMUNITY

Setup Share. Point client-side web part development environment • Install developer tools • Node. JS • Code Editors • Install Yeoman and gulp • Install Yeoman Share. Point generator https: //dev. office. com/sharepoint/docs/spfx/set-up-your-development-environment EVENTS. COLLAB 365. COMMUNITY

Demo : Client-side Web Part EVENTS. COLLAB 365. COMMUNITY

Getting Started with SPFx • Read the preview announcement at http: //dev. office. com/blogs • Check out the documentation and samples at http: //Git. Hub. com/Share. Point • Sign-up for the Office Developer Program at http: //dev. office. com https: //dev. office. com/sharepoint/docs/spfx/set-up-your-developer-tenant EVENTS. COLLAB 365. COMMUNITY

Thank you! Get in touch. EVENTS. COLLAB 365. COMMUNITY

Stay tuned for more great sessions … EVENTS. COLLAB 365. COMMUNITY