Intro to the SharePoint Framework Philly Code Camp Oct 2016
0 likes263 views
Jennifer Kenderdine gave a presentation on the SharePoint Framework (SPFx) which allows building client-side web parts for SharePoint using modern web technologies. SPFx uses the same context and connection as the browser, allows controls to render in the DOM, and is framework agnostic. It supports both classic and modern pages in SharePoint. Developers need an Office 365 developer tenant and tools like Node.js, Yeoman and Gulp to build SPFx solutions. The development workflow involves creating a project, editing the web part with TypeScript, testing locally and deploying to a CDN.
Intro to the SharePoint Framework Philly Code Camp Oct 2016
- 2. OCTOBER 22, 2016 Confidential Jennifer Kenderdine Strategic Leadership, SharePoint Architecture Services Introduction to the SharePoint Framework
- 3. Confidential ● trellist.com ● 10/22/2016 ● 3 Jennifer Kenderdine • A SharePoint professional since Jan 2007, working with MOSS 2007, SharePoint 2010, SharePoint 2013 and Office365. • Integration of business processes through Forms and Workflow. • Client side development (XSLT, JavaScript, HTML) and design to enhance UI and UX • Twitter: @j_kdine • Email: jkenderdine@trellist.com
- 4. Confidential ● trellist.com ● 10/22/2016 ● 4 Agenda • Overview of the SharePoint Framework • Description • Key features • What can you do with it? • Setting up your Developer environment • Office 365 requirements • Frameworks & Tools • Development Workflow
- 5. Confidential ● trellist.com ● 10/22/2016 ● 5 What is the SharePoint Framework (SPFx)? • SharePoint Framework Overview • Framework for building client side web parts • A new development option • Does not deprecate any of the existing SharePoint development models • Another asset in the developer toolbox • Uses modern web development stack • Cross-platform (Mac and PC) • With any JavaScript framework
- 6. Confidential ● trellist.com ● 10/22/2016 ● 6 Key Features • Runs in current context and connection in browser • Controls rendered in DOM • Responsive • Developer access to render – load, serialize, deserialize, configuration changes, etc. • Framework agnostic – use any browser framework • Solutions can be deployed in classic web part and publishing pages and modern pages
- 7. Confidential ● trellist.com ● 10/22/2016 ● 7 What can you do with it? • TODAY • Not supported in production (pre-release candidate) • Must have a developer tenant. • Modern or classic UI supported • FUTURE • Custom pages and portals • Document library customizations • Fully supported in all tenants and SharePoint 2016 on premise • SharePoint solutions that combine the modern UX, code isolation, and security • How to keep up to date
- 8. Confidential ● trellist.com ● 10/22/2016 ● 8 Setting up the Developer Tenant • SharePoint Framework will only work on Office 365 Developer Tenant. • Sign up for Office Developer Program • Create App Catalog Site • Create a Developer Site Collection • Document Library setup • Add column ClientSideApplicationId • SharePoint Workbench.aspx
- 9. Confidential ● trellist.com ● 10/22/2016 ● 9 Frameworks and Tools • Tools suggested by Microsoft for Dev: • Node.js / NPM • NodeJS Long Term Support (LTS) v4.x.x version • Verify NPM V3 • Code Editor – Any editor that supports client side development • Visual Studio Code, VS2015, Sublime, Atom, Webstorm, etc. • Windows-build-tools (PC), Build Essential (Ubuntu), Compiler Tools (Fedora), etc. • Yeoman and Gulp • Yeoman SharePoint Generator • TypeScript • Primary language for building SharePoint client-side web parts. • Optional Tools • Cmdr for Windows
- 10. Confidential ● trellist.com ● 10/22/2016 ● 10 Development Workflow Create Project Folder Start Web Part (Yeoman) Edit Web Part with TypeScript Test Locally in SharePoint Workbench (Gulp) Debug and resolve any issues Test in SharePoint Deploy to CDN (Gulp) Test CDN Assets in SharePoint
- 12. Confidential ● trellist.com ● 10/22/2016 ● 12 REFERENCES • Office DEV Center • Github Wiki
- 13. Confidential ● trellist.com ● 10/22/2016 ● 13 Thank You Jennifer Kenderdine jkenderdine@trellist.com Trellist Insights
- 14. Confidential ● trellist.com ● 10/22/2016 ● 14