SharePoint Framework:下一代开发方式

SharePoint Framework(SPFx)，是页面和Webpart的模型，完全支持本地开发（即完全可以脱离SharPoint环境在本地进行开发），听起来是不是很高级呢，早期SharePoint Webpart的开发，我们必须连接到SharePoint环境才能进行测试，有了SPFx我们可以通过Mock的数据在本地调试样式。SPFx很容易和SharePoint数据进行集成，并且支持一些开源的工具，你可以在SPFx中使用流行的web

技术开发响应式的SharePoint Add-in.

为什么选择SPFx

在SharePoint Online出来之前，对于SharePoint WebPart的开发，基本上都是编写C# code，然后编译成dll，部署到客户的Farm中，但是在SPO出来之后这种方式显然已经不可以了，为了解决这个问题，微软主要引入了如下两种方式：

JavaScript注入方式

在SPO中最常用的Webpart就是Content Editor和Script Editor,你可以使用JSOM或者REST API读取数据，然后显示在页面上，使用起来比较方便。但是这种方式还是有很多的缺点，例如：

部署起来比较麻烦。
不能给客户提供合理的配置界面，多数配置信息都是在code中写的。
End user很容易不小心把code修改坏了，导致webpart不工作。
最重要的是Script Editor并不是“Safe For Scripting”多数Self-service 站点都会开启一个NoScript的feature，这样Script Editor中的脚本会被Block。

SharePoint add-in方式

目前比较流行的方式就是使用SharePoint Host的App Part的方式，这种方式实际上是把webpart做为一个Iframe引入到页面中，AppPart对应的页面实际上运行在一个独立的site里面，这种webpart可以添加到NoScript的站点中。但是这种方式也有一些缺点主要如下:

这些code运行在Iframe中，这种方式会比Script Editor的方式慢，因为这种方式需要请求另一个页面，另一个页面也需要进行身份验证等操作。
这种方式很难实现响应式布局，因为这个webpart实际上是在不同的页面中的，并且对于Iframe，Media query获得的屏幕大小实际上是Iframe的宽度，并不是真正意义上的屏幕宽度

结论：为了解决上面的两个问题，所以微软推出了SharePoint Framework作为下一代的开发方式。

SharePoint Framework开发流程

SPFx开发工具和类库

SPFx包含了一系列的client-side JavaScript类库用于开发你的solution，下面介绍一下用于开发client-side web parts的工具和类库。

TypeScript

TypeScript是比JavaScript更高级的语言，TypeScript中可以定义数据类型，接口，类，等等并且TypeScript最终可以编译成JavaScript，SharePoint的client-side development tools就是使用Type Script的类，模型和接口来构建的。

关于TypeSctipt更多的详细信息请见如下链接：

JavaScript Frameworks

你可以使用比较熟悉的JavaScript框架来开发client-side web parts，以下是比较流行的JS框架:

因为编写client-side web part多数都是和SharePoint进行交互，所以这里建议大家使用SharePoint PnP JavaScript Core library 框架，在这个框架中已经为我们封装好了很多简单易用的API。

Node Package Manager (npm)

SharePoint client-side 开发工具使用npm来管理依赖以及必要的Js库，安装Node.js会自动安装npm。

Node.js

Node.js是一个开源，用于运行JavaScript 代码的跨平台运行环境。Node.js类似于IIS Express和IIS。关于Node.js更多信息请见下面链接:

Gulp task runner

SharePoint client-side 开发工具使用gulp打包工具做如下操作：

Bundle and minify JavaScript and CSS files.
Run tools to call the bundling and minification tasks before each build.
Compile LESS or SASS files to CSS.
Compile TypeScript files to JavaScript.

更多关于Gulp的信息请见如下链接
Getting started with Gulp
TypeScript and Gulp
Articles about Gulp

Yeoman generators

Yeoman用于创建新的client-side web parts的工程，一旦工程创建完毕之后，你可以选择自己喜欢的IDE进行开发，常用的IED是Visual studio Code,Sublime Text或者Atom。更多信息见如下链接:

SharePoint REST API

SharePoint REST API主要用于和SharePoint环境交互，例如：添加删除修改list中的数据等等。

Patterns and Practices

Office Dev Patterns and Practices / SharePoint Pattern and Practices (PnP) 提供了一些示例代码以及一些其它资源用于帮助把已经存在的solution转换成SharePoint Framewok.

注意：SharePoint Framework目前正处于Preview阶段，随时会进行一些更改。SharePoint Framework Client-side web parts在Office 365的生产环境中暂时不支持。

原文链接:

http://blog.csdn.net/Frank_CAU/article/category/6529102

更多资料: