2016年5月4日星期三

的new SharePoint development model –客户端Web部件,JavaScript框架,npm,Gulp,TypeScript等。

在我的以最终用户为中心的伴随帖子中 新SharePoint概述–现代团队网站,页面,Web部件和应用程序,我谈到了 总体 即将到SharePoint的一组更改,但是在这里’m关注新的开发模型。我花了很多时间与Microsoft工程师共同构建框架“dev kitchen”在今年早些时候举行的活动,从那以后一直在玩耍并形成想法。一世’它将概述该框架,并专门讨论新的构建基块– we’ll focus on 客户端Web部件,但也会触摸整页 客户申请 即将到来。首先,即使开发人员都是有远见的人,所以请看看您’将在编辑器中使用代码术语进行操作(请注意,这是Visual Studio ,Microsoft现在拥有的轻量级/免费代码工具):

SNAGHTML23253fb7

哇,这与您的SharePoint开发看起来很不一样’我以前看过!在深入研究之前,有几个快速观察:

  • 那 code is TypeScript code –这些文件的扩展名为.ts,并通过工具编译为JavaScript。
  • 项目结构不同– the “src”目录是您编辑文件的位置,“config” directory holds a bunch of 配置 files (that we’稍后再介绍),依此类推。
  • 我们有很多新文件。那里’一个新的Web部件清单文件(一个新的等效于.webpart文件的文件),新的配置文件来控制捆绑的工作方式,构建过程中发生的事情,解决方案的打包方式等等。

这是SharePoint开发,但并非您所愿’ve known it before!

开发人员的关键方面

I’m condensing a 很多 信息纳入此列表,但我认为这些是关键要点:

  • 客户端Web部件和客户端应用程序是新的构建块。 如上一篇文章所述,这些与新的页面模型一起使用。
  • It’是JavaScript世界的宝贝! 配置文件使用JSON,并且代码在客户端的JavaScript中实现。
  • 的packaging of artifacts is different! 有一些新的清单文件可供学习(例如,Web部件清单),还有其他文件,例如bundle.json,package-solution.json,upload-cdn.json等。 Gulp任务用于包装。
  • 您的Web部件或应用程序的文件可以存放在任何地方(例如CDN或您托管的网站)-它们不会’不必住在SharePoint中。最终用户基本上可以在URL上访问的任何地方。
  • 的“local development”型号很不一样–Gulp和node.js用于在本地托管文件,因此您不必’无需在本地计算机上使用IIS。 一个特别的“workbench.aspx”页面用于支持此功能。
  • 无需强制使用特定的JavaScript框架–您可以使用Angular,React,Knockout,Handlebars或任何您喜欢的东西。 要考虑的一件事是,React将已经在页面上了’由某些SharePoint组件使用,因此’少了一个文件,供用户首次访问您的网站或进行自定义下载–有用,但对于Intranet来说可能不是很大的因素。
  • 您应该考虑学习TypeScript –至少包括关键部分,例如模块,类型系统等。
  • 您不再需要在Visual Studio中工作 -如果您喜欢其他工具(例如,因为您’re not a “career”SharePoint开发人员),’很好。现在其他轻量级代码编辑器(例如Visual Studio 码或Sublime)是100%可行的选择,因为工件的包装不同。甚至我(作为10年的SharePoint开发人员)也开始喜欢使用VS 码,即使最初有些痛苦。
  • SharePoint Webhooks– these are the new “event receivers”. 这是朝着更加基于标准的方法发展的方向,以响应SharePoint / Office 365中的更改。
  • 的App Catalog is used as a packaging and registration method –客户端Web部件和客户端应用程序都以这种方式打包(远离Web部件库,’re used to)
  • 页面安全性需要考虑 –因为理论上页面上的任何内容都可以访问其他内容(例如,通过抓取DOM),所以当用户使用时,这可能会引起一些有趣的问题’例如,显示了邮件,并且显示了来自不同来源/供应商的Web部件。为了解决这个问题,新框架中阻止了某些操作,但可能需要其他治理。将来会更多。
哇,为什么所有这些变化?我必须使用这个新模型吗?

的driver for the changes on the dev side is the new page and web part model. As discussed in 新SharePoint概述–现代团队网站,页面,Web部件和应用程序,使用SharePoint页面和Web部件的用户体验从未如此轻松,而且SharePoint早期版本带来了很多麻烦。因此,由于Microsoft对页面模型进行了重大更改,因此也有必要转向现代Web开发方法。是的’事情不是很有趣’完全基于MVC,但我’d辩称,如今,大多数开发人员都选择了客户端方法。

我必须使用这个新模型吗?
 

不。开发模型的这种演变没有’替换现有选项(例如,提供商托管的应用,使用JavaScript嵌入方法等)。但是,如果您选择使用新的构建基块(尤其是新的页面和Web部件)来实施解决方案,那么您确实需要调整自己的技能和方法。

什么 about TypeScript? Do I have to use that?
 

不,但是在现阶段我推荐。我们这些人在预览中使用的dev工具的版本*面向* TypeScript,坦率地说,如果您编写TS代码并允许将其编译为JavaScript,事情会变得更加容易。全面上市时可能还有其他选择,但是’一旦习惯了TypeScript,就会对它有很多的爱好。有一个学习曲线,但是我建议您亲自学习。

客户端Web部件– a simple example

让’概述了新的Web部件解决方案。在我的示例中,我’我们创建了一个客户端Web部件,其中显示了 您创建或修改的最后5个文档。它使用Office Graph扩展(角色和边线)运行搜索查询来执行此操作。为了使事情(相对)简单,我’对于第一个示例,选择不使用React,Angular或其他框架作为基础。–我确实使用TypeScript,而且我也使用TypeScript’做事简单的能力“JavaScript模板”带有字符串文字和参数。这里’核心文件的结构–要关注的主要方面是“src”目录,因为这些是要编辑的文件:

SNAGHTML17b59b5

I’ll提供文件外部的详细演练“src”目录及其目的,很快就会发布。我的示例中的主要代码文件是:

文件 目的
CobRecentDocsWebPart.ts 的core web part implementation (in TypeScript). Has a “render”页面框架调用的方法。
搜索 使用正确的参数封装调用搜索REST API所需的代码。
SearchResult.ts 一个简单的类,代表我搜索结果的核心属性’我对这里感兴趣–标题,说明,URL和文件图标。

这些文件都由开发人员工具提供的Gulp任务编译为JavaScript。–这等效于Visual Studio用于编译DLL或构建WSP的MSBuild任务。这里’s我的Web部件的核心代码是什么样的–由此您可以了解以下内容:

  • 的TypeScript side of things
  • 引用其他TypeScript模块
  • 的web part framework – interfaces and methods, how 渲染ing can work etc.
  • Understanding 语境 – whether the code is executing in the test 工作台 page or a 真实 environment
  • 如何定义Web部件属性

但要记住!这仅是预览代码,其中一些文件及周围“dev 工具链”从现在到框架正式可用之间可能会发生变化–此时的所有讨论部分仅出于说明目的!

有一次,我’准备测试/调试我的代码(通常是’d在您这样做之前’已经添加了太多您自己的代码),则可以通过运行以下命令查看自己计算机上的内容“gulp serve”在文件所在文件夹的命令行中:

 喝一口

这完成了几件事,所有事情都由开发人员负责“toolchain”Microsoft给您的(只要您具有以下先决条件,例如 node.js 已安装):

  • 运行构建任务以打包文件以供运行时 –如果您愿意,这包括预处理任何TypeScript和/或React’重新使用这些代码,处理Web部件清单,运行您拥有的所有JavaScript测试,最后将JS和CSS文件合并为一个包。
  • 启动node.js实例以在浏览器中运行JavaScript文件 –不需要SharePoint或IIS,在那里’s a “live reload”工具,以便您可以编辑代码并立即在浏览器中看到更改(保存代码文件时页面会自动刷新)。

这启动了“workbench”托管所有客户端文件的页面。只要Gulp和Node正在提供您的JavaScript文件,您’将能够将自定义Web部件添加到此页面:

SP 工作台 - add client web part

然后,您的Web部件将出现在页面上,并且您可以使用浏览器工具进行调试等:

SP 工作台 - add client web part 2

您可以在新的属性窗格中编辑Web部件属性(I’已在此处为我的网络部件添加了一些自定义项):

COB客户端Web部件-最新文档-WP Pros

但是我需要“real” SharePoint!

当然,本地工作台页面可帮助您启动和运行并构建演示文稿代码,但迟早您会’re probably going to need to see your web part in the 语境 of a 真实 SharePoint environment (e.g. so you can access data, call search/user profiles/taxonomy, or whatever). As you might have noticed, it’如果您愿意,可以编写代码来检测主机环境并使用伪数据’重新运行在本地主机上。但是,由工具链提供的Workbench.aspx文件可以简单地上载到Office 365租户,而且只要提供文件,就可以将Web部件添加到该页面。这次,您可以与真实的SharePoint事物交互,例如搜索并使用真实数据测试Web部件。–现在我的Web部件在我的Office 365网站中找到文件:

COB客户端Web部件-最新文档

部署到生产环境(例如,部署到CDN)

一旦我们’为了准备将Web部件用于测试或生产中,我们需要远离本地托管的模型。现在,运行时所需的JavaScript,CSS和任何其他文件都必须位于一个可供所有用户访问的位置–这可以是CDN,简单的网站(例如Azure Web应用程序)或您选择的任何其他位置。您可以*继续*如果需要的话,继续部署到SharePoint库(例如,网站资产),但是现在我们有了一个选择,使我们不必在每个网站集中部署(重复)关键文件。–呜呼!您有责任提供此位置(除非您’重新选择SharePoint)

预览开发人员工具I’一直在为CDN部署提供一些支持–这是Gulp任务的形式,该任务基于配置文件部署到Azure BLOB存储/ CDN。您的清单文件需要更新以指向CDN URL,但是就将资产部署到生产就绪位置而言,事情基本上很简单。

I’我会在其他博客文章中进行更深入的探讨,但请记住,该框架不是’t available yet. You’今年夏天晚些时候可以开始尝试。 

客户申请 

以及客户端Web部件,让 ’简要介绍客户端应用程序。这些将在今年晚些时候推出,并且以与客户端Web部件提供仅JavaScript版本的Web部件相同的方式,客户端应用程序对整页应用程序执行类似的操作。我在以前的文章中总结了以下风味:

  • 基于页面的应用 –提供者托管的应用程序的替代方案(记住,这些应用程序是通过 服务器端 码)。
  • 基于列表的应用 –可以将它们视为JSLink的替代方案,以转换列表项的显示/编辑/新体验

客户端应用程序完全是用JavaScript实现的,但具有诸如完整的功能等优点。“context”以及使用Office 365套件栏等。SharePoint网站/ Office 365租约中有一个框架页面或脚手架页面,但是主页主体是在您的JavaScript / HTML / CSS中实现的。它’基于页面的应用程序很容易理解,但是基于列表的风格也很有趣。最近我’我们已经研究了几个提供自定义界面的微型应用程序,但是将它们的数据作为项目存储在SharePoint列表中。我们构建了一个页面,该页面带有用于商品ID的URL参数,然后发出REST调用以获取数据并围绕该页面构建页面。一个例子是“办公地点目录”,位置存储在列表中,但是我们提供了一个不错的演示,其中包含嵌入式地图,数据元素的特定布局等。您可以将基于列表的客户端应用程序视为形式化的形式–几乎可以在一个“在类固醇上使用JSLink,但没有专有的显示模板框架”-kinda way. Nice.

摘要和其他资源

因此,我们现在有了一个页面和Web部件模型,’快速,轻巧,对最终用户来说简单易用,并且易于开发。还有一些新的方法可以解决围绕微型应用程序构建的通用需求,但这种方法可以摆脱以往非常SharePoint-y的构建基块(例如我们过去拥有的JSLink和显示模板),而可以实现者选择如何使用他们选择的方法来构建UI。此外,我们现在拥有一个更开放的开发模型,该模型更符合世界其他地区的需求,并且为无需Visual Studio的快速开发提供了强大的支持,而无需访问SharePoint环境就可以完成很多工作。微软!

在以后的帖子中’将提供该框架及其更详细的演练’s key files.

其他资源:

16条评论:

未知说过...

各地的开发人员都为之欢欣鼓舞。但是我没有'看不到任何有关iframe的信息。它们仍然是客户端Web部件(如应用程序部件)的交付机制吗?

克里斯·奥'Brien说过...

@莱斯特

好问题。答案是不!客户端Web部件(或客户端应用程序)中不使用IFrame,这是框架的驱动程序之一。他们不是'在此模型中是必要的,因为它'基本上是"JavaScript embed" approach.

也就是说,应用程序部分及其IFrame有时仍然是正确的选择。如果你'重新开发可以访问敏感数据的东西'不想将其放在DOM中,以便其他(可能不受信任的)部分可以访问数据-'正是应用程序部件/ IFrame方法所提供的。

干杯,

COB。

未知说过...

克里斯非常有用,谢谢!
什么'如果您的场景需要以提升的权限而不是当前用户运行某些代码,则SharePoint框架中的故事如何?托管和使用Web服务(例如Asp.Net Web API)并在某些高级帐户或任何新帐户下利用CSOM是问题吗?将来CSOM仍然有用吗? :)

克里斯·奥'Brien说过...

嘿,哈雷!

是的,如您所知's just JavaScript running on the client so there is no elevation of privilege possible there. All 客户端Web部件 and 客户申请 will run in the 语境 of the current user. If you need to call a service with higher permissions, it will generally need to be a 服务器端 thing, like a call to a WebAPI service which uses a different identity (as you mention).

那'一个选择,但是那'在另一种情况下,您可以选择使用加载项模型。这可能强调了新框架没有'替换现有的选项,只是添加到它们中。

干杯,

COB。

Shafqat Nawaz Balouch说过...

优秀的克里斯!

尼古拉斯·沙勒波瓦·拉普拉德说过...

克里斯再次发表了如此出色的文章。很棒的伙伴!

乔治说过...

克里斯,您好,感谢您提供的宝贵信息。是否有针对此的内部部署路线图?非常感谢。

oop说过...

克里斯的好帖子。您能否让我们知道,如果将来通过使用这种新模型,我们是否能够为网站配置包含客户端Web部件的页面? (例如网站模板)。

克里斯·奥'Brien说过...

@乔治,

到目前为止,微软已经表示,SharePoint框架*将*将于2017年通过内部部署到SharePoint。"feature pack"更新。毫无疑问,更多细节将在此后到达。

希望能有所帮助,

COB。

克里斯·奥'Brien说过...

@Anoop,

It'这个问题很好,但是我'd expect so. There'毕竟,总是需要添加带有预定义Web部件的页面,因此,我认为如果没有声明式或基于代码的方式这样做会有些疯狂。让's see!

干杯,

COB。

卵(对不起,我的读书)说过...

感谢您的文章。有点沮丧的是,仍然有很多东西要学习,但是至少会有越来越多的JScript。好极了!

未知说过...

感谢克里斯的精彩帖子!母版页是否仍与新页面/零件模型结合使用?一世'我想知道使用自定义母版页实现品牌发布门户(内联网?)的客户将受到怎样的影响。

克里斯·奥'Brien说过...

@杰森

实际上,有关"next level up"从个别页面避风港发生的情况'尚未真正宣布。但是,我认为'可以合理地假设发布站点将继续使用母版页和页面布局,或者至少使用提供该功能的东西。

干杯,

COB。

未知说过...

@克里斯,

我觉得他们会重蹈覆辙。
做一个看似很酷的功能,承诺世界,实现,遗漏关键功能。

一个很好的例子是多语言。

尽管我喜欢像您这样的许多Blogger,但他们仍在向我们提供这些有价值的信息。
微软应该付出更多的努力来传播这个词。

阿鲁说过...

克里斯,您好,感谢您的精彩帖子。生产租户发布日期是否有任何更新?

克里斯·奥'Brien说过...

@阿鲁

Should be around the end of the year I understand. 让's hope :)

谢谢,

COB。