2016年5月4日星期三

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

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

SNAGHTML23253fb7

Whoah, that looks pretty different to 的SharePoint development as you’我以前看过!在深入研究之前,有几个快速观察:

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

这个is 的SharePoint development, but not as you’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或您托管的网站)-它们不会’t have to live in 的SharePoint。最终用户基本上可以在URL上访问的任何地方。
  • 的“local development”型号很不一样–Gulp和node.js用于在本地托管文件,因此您不必’无需在本地计算机上使用IIS。 一个特别的“workbench.aspx”页面用于支持此功能。
  • 无需强制使用特定的JavaScript框架–您可以使用Angular,React,Knockout,Handlebars或任何您喜欢的东西。 要考虑的一件事是,React将已经在页面上了’s used by some 的SharePoint components, so that’少了一个文件,供用户首次访问您的网站或进行自定义下载–有用,但对于Intranet来说可能不是很大的因素。
  • 您应该考虑学习TypeScript –至少包括关键部分,例如模块,类型系统等。
  • 您不再需要在Visual Studio中工作 -如果您喜欢其他工具(例如,因为您’re not a “career” 的SharePoint developer), that’s fine. Other lightweight code editors such as Visual Studio 码 or Sublime are now 100% viable options because the packaging of artifacts is different. Even I (as a 10 year 的SharePoint developer) have started to prefer using VS 码, even if some bits are slightly painful initially.
  • 的SharePoint Webhooks – these are the 新 “event receivers”. 这个is a move towards a more standards-based approach to responding to changes in 的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 新 page and web part model. As discussed in Overview of the 新 的SharePoint–现代团队网站,页面,Web部件和应用程序 , the user experience of working with 的SharePoint pages and web parts has never been the slickest, and there was a 很多 of baggage from earlier 的SharePoint versions. So, since Microsoft were making big changes to the page model it also makes sense to move to modern web development approaches too. Yep, it’事情不是很有趣’完全基于MVC,但我’d辩称,如今,大多数开发人员都选择了客户端方法。

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

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

那TypeScript呢?我必须使用那个吗?
 

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

客户端Web部件– a simple example

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

SNAGHTML17b59b5

I’ll提供文件外部的详细演练“src” directory and their purpose in a post coming very soon. 的main code files in my example are:

文件 目的
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部件属性

But remember! 这个is preview code only, and some of these files and the surrounding “dev 工具链 ”从现在到框架正式可用之间可能会发生变化–此时的所有讨论部分仅出于说明目的!

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

 喝一口

这个does a couple of things, all taken care of by the developer “toolchain”Microsoft给您的(只要您具有以下先决条件,例如 node.js 已安装):

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

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

SP 工作台 - add 客户 web part

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

SP 工作台 - add 客户 web part 2

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

COB 客户 web part - recent docs - wp props

但是我需要“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). 当你 might have noticed, it’如果您愿意,可以编写代码来检测主机环境并使用伪数据’re running on localhost. 的Workbench.aspx file provided by the 工具链 can simply be uploaded to an Office 365 tenancy though, and again, so long as your files are being served you can add your web part to that page. 这个time, you can interface with 真实 的SharePoint things such as search and test your web part with 真实 data –现在我的Web部件在我的Office 365网站中找到文件:

COB 客户 web part - recent docs

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

一旦我们’为了准备将Web部件用于测试或生产中,我们需要远离本地托管的模型。现在,运行时所需的JavaScript,CSS和任何其他文件都必须位于一个可供所有用户访问的位置– this can be a CDN, a simple website such as an Azure web app, or any other location of your choosing. You *can* continue to deploy to 的SharePoint libraries (e.g. Site Assets) if you choose, but now we have an option which moves us away from needing key files deployed (and duplicated) in each site collection –呜呼!您有责任提供此位置(除非您’re choosing 的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部件模型,’s fast, lightweight, simple for end users, and nice to develop on. There are also 新 ways of solving common requirements around building mini-applications, but in a way which moves away from the very 的SharePoint-y building blocks such as JSLink and display templates that we had in the past, to a way where the implementer can choose how to build the UI using the approaches of their choice. Additionally, we now have an open development model more in line with the rest of the world, and great support for quick development without the need for Visual Studio and where much can be done without even having access to a 的SharePoint environment. Kudos Microsoft!

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

其他资源:

Overview of the 新 的SharePoint –现代团队网站,页面,Web部件和应用程序

We’re heading into a 新 era with 的SharePoint 在 the moment, with BIG changes coming that will bring a 新 user experience and also a radically different development model. Team sites and publishing sites get the biggest update I’多年以来,页面和Web部件的工作方式有所不同-’s a 新 web part framework based on JavaScript. These updates will come first to 的SharePoint Online but eventually to on-premises 的SharePoint too. You might have seen the “Future of 的SharePoint”在2016年5月4日发布公告-在这篇文章中,我想复习一下新事物并添加一些想法,因为很幸运,现在已经有一段时间了。一世’我们将在本系列的以下文章中进行介绍,还有很多其他文章:

现代团队网站–新的主页,列表和库用户界面,以及“SharePoint home”

If you run 的SharePoint team sites (i.e. most organizations using the platform), you’我们很快就会选择使用Microsoft提供的非常有吸引力的新主页。以下是某些情况的屏幕截图(点击放大):

新的SharePoint team site-800

当你’d期望,移动视图也看起来不错:

新的SharePoint team site - mobile

一个品牌更多的网站可能看起来像这样:

新的SharePoint team site 2 - small

新的SharePoint team site - mobile - small

It’s great to see innovation happening in team sites (arguably the core of 的SharePoint), and this is fairly sexy compared to what we’习惯了!主页具有以下功能:

  • 策划/突出内容的区域
  • Activity on the site (powered by the Office Graph). 这个consists of:
    • 对话内容
    • 其他活动,例如网站中文件周围的活动
  • 响应式设计,因此在移动设备上的体验效果很好

新的首页设计获胜’t be forced on you –毕竟,当用户登陆网站时,您可能已经投入了量身定制的体验(使用自定义或仅使用内容)。相反,管理员将能够 选择参加 是否将此用作网站的默认登录页面。

的Site Contents page gets a makeover too, now providing quick access to the most active content and showing some high level stats:

网站内容页面-活动和统计信息800

新document library and list UI

除了新的主页之外,列表和库也得到更新。我们’我们已经看到了新的文档库界面(如果您’(首次发布)),类似的体验将推广到列表中。有一些不错的功能,例如可以在“grouped”视图,这将自动更新元数据。例如,您可以从“In progress” to “Complete”, and the corresponding metadata will be updated. 这个makes it possible to use a 的SharePoint list as something more like Trello, or perhaps a sprint planning board in TFS or similar.

有关列表用户界面更改的更多信息将很快发布。

的SharePoint home

这个也很好。一世’我以前抱怨过SharePoint如何’t 真实ly have a “top-level” – you might have 很多s of team sites and a publishing intranet, but you have to deal with the 顶层 thing yourself. 这个is even more fun if you actually don’没有发布内部网,但是有很多团队站点。因此,微软已经通过对“Sites”页。现在已重命名“SharePoint”并显示您可能感兴趣的站点之间的活动(通过Office Graph),推荐的站点等。您可以从此处继续创建新网站(尽管像以前一样,这些都是基于OOTB团队网站模板的网站集,并在某个地方创建-可能不是您所需要的),但是最大的不同是这些现在还可以获得Office 365组!下一节将对此进行更详细的描述。

然而– it’s good to put “SharePoint home”的角度来看。我可以’想象不到许多组织都乐于将其用作所有用户的浏览器默认页面。大多数人已经拥有某种内部网,无论主页显示公司新闻,社交摘要,关键链接还是其他内容– I can’t imagine 的SharePoint home replacing that. “SharePoint主页不替换Intranet!”,就像尤达(Yoda)所说。不过,我认为这是对以前产品的巨大改进,并且在较小的公司中可能效果很好(点击放大):

的SharePoint-home-small

团队站点现在是Office 365组,反之亦然!

We’一段时间以来,人们就知道Office 365组和团队站点之间将更加协调,这就是它的样子。在2016年晚些时候,通过“SharePoint home” page you’实际上将一起创建一个Office 365组*和一个团队站点。对于Office 365组而言,这是向前迈出的一大步,因为以前您所获得的只是缩减的OneDrive库,’具有元数据等完整功能。 因此,这绝对有助于“what to use when”题。此外,您拥有的任何现有Office 365组都将获得一个团队站点。显然,通常仍然需要一些计划工作来建立有关如何使用组的策略和治理,但是至少现在,这些事情已经为企业做好了准备。

现代页面和Web部件– a 新 page model

这些变化是团队网站(和发布网站)的核心– updates coming to those too!) is the 新 page model. To support some of the other changes such as the 新 web part framework, a 新 type of pages were needed too. Although us 的SharePoint folks often saw past it, if you sit with an end-user who is completely 新 you start to 真实ise how clunky the current page edit experience is. Challenges included using the ribbon, editing web part properties and some aspects of adding content into the rich text editor. ALL that has been replaced in modern pages, with the goal being to provide a simplified experience closer to WIX or Medium.

这里’您需要了解的内容:

  • 新“client” web parts –全新的开发模式
  • 新页“canvas” –这是为最终用户提供简化的编辑体验的页面框架。没有功能区,并且简化了添加/编辑Web部件的整个过程。
  • 新“client applications”
    • 基于页面的应用–提供者托管的应用程序的替代方案(记住,这些应用程序是通过 服务器端 码)。 客户端应用程序完全是用JavaScript实现的,但具有诸如完整的功能等优点“context”并使用Office 365套件栏等。 
    • 基于列表的应用–可以将它们视为JSLink的替代方案,以转换列表项的显示/编辑/新体验

这些图像不’t显示新页面/画布的最终版本,但我们将使用一个大大简化的文本编辑器(类似于您可能已经注意到的Delve博客UI):

新page 帆布 5

的interface to add a 新 web part to the page is also much simpler:

新page 帆布 2

新的发布基础架构

除了团队网站,发布网站对于最终用户也变得更加简单。当你’d期望在那里也使用新的页面和Web部件模型,这意味着页面应该更轻巧。新的Web部件将可用,并且将继续存在在这种站点上实现自定义外观的方法: 

新publishing framework

这对实施者意味着什么

新页面和Web部件的引入意味着需要一些选择–您应该使用新的构建基块实施解决方案,还是坚持使用’已经在那里?那已经在使用的解决方案呢?您应该迁移到新的页面/ Web部件模型吗?

要考虑的一些因素包括:

  • 新pages exist in a 新 pages library –他们不能简单地添加到现有的‘Site Pages’ library in a team site for example. 这个means navigation, roll-ups and so on need to be thought about if you’重新考虑某种迁移或“mixed” solution.
  • 新的Web部件可用于“classic”页,反之亦然。所以你可以’希望使用现有的Web部件(甚至是现有的 盒子外面 Web部件)在新页面中。 为了确保新页面可以完成我们需要做的事情,Microsoft将提供一组新的Web部件,相当于内容搜索Web部件,内容编辑器Web部件等常用部件。这些很可能是简化版本,以符合使页面作者更轻松的总体目标。目的是在启动时在新模型中提供大约5-10个常见的OOTB Web部件,然后再发布其他版本(包括在商店中购买Web部件的功能)。

    请注意,在经典页面中使用新的客户端Web部件时,’s some “joining-up”Web部件属性的编辑体验。那里’s a single “Edit properties”按钮通常会显示设置的位置,用户必须单击此按钮以显示新样式属性窗格并在此处更改设置。它 ’有点笨拙,但可以。
  • 的edit experience will be different between 新 pages/web parts and other page types. 那’是整个想法,但是如果您’re considering a migration or 混合的 model.
  • 的page and development model will be different between 新 pages/web parts and other page types. 如上。

因此,在一个站点/解决方案中过多混合模型可能不是最佳选择。一种更简单的方法可能是考虑为 站点和开发项目,但保留现有投资不变。您的里程可能会有所不同。

对开发人员的意义(高级)

我将在下一篇文章中详细介绍 的new 的SharePoint development model –客户端Web部件,JavaScript框架,npm,Gulp,TypeScript等。,但让’在此处包括一个高级视图:

  • 如果要构建新样式的客户端Web部件和/或客户端应用程序,则可以’我可能需要学习一些新技能!通用框架和工具是新的,但是Web开发和JavaScript是核心,这使开发人员与其他开发人员的工作更加契合。
  • 核心技术包括npm,Gulp,一点点的node.js,Yeoman生成器和TypeScript。但好消息是你不’不必成为所有这些方面的专家,当您掌握工具时,’会看到它为您处理了很多事情。一如既往,您知道得越多,您就越’如果/当您需要做一些不同的事情时,将能够解决您遇到的任何小问题。
  • There are 新 配置 and manifest files to learn about, for example the web part manifest which describes a web part, it’对其他JavaScript库的依此类推。
  • 的“local development”型号很不一样– you don’不需要使用IIS在本地计算机上托管文件,因为Gulp和nodel.js用来提供文件
  • 这个“evolution”发展模式的’*必要*替换现有选项(例如,提供商托管的应用,使用JavaScript嵌入方法等)。但是,如果您选择使用新的构建模块来实施解决方案,那么您确实需要调整自己的技能和方法

其他位– 的SharePoint移动应用 and PowerApps /流程:

但是那’s not all. I’ve tried to summarize the key changes for how 的SharePoint sites will be used (and built) above, but other things that will have an impact are the 新 mobile app and a 新 options for integrating your 的SharePoint sites/data with other tools. 让’简要介绍一下这两个:

的SharePoint移动应用

的new app looks great –我真正喜欢的一个关键支柱是你’可以快速访问 最近使用的网站和文档,以一种切实可行的方式。我们’ve already had the OneDrive app, but the 的SharePoint app will cover team sites and publishing sites too. Additionally there are areas to help with 找人关键链接 for your environment as defined by administrators. 的iOS app will come first (early summer), followed by Windows Phone and Android:

的SharePoint-mobile-app-2

PowerApps /流程

您可能已经熟悉PowerApps,Microsoft’的无代码平台,用于创建也可以在移动设备上运行的简单业务应用程序。如果没有,我的文章 PowerApps– no-code Azure apps which talk to Office 365, 的SharePoint, SQL and more 可能会有所帮助。同样,微软最近还宣布了一项名为“Flow” – this helps you take simple actions across common services under certain circumstances e.g. when something changes in 的SharePoint. It’s commonly described as being a bit like If 这个Then 那 (IFTTT) for the enterprise, and can talk to popular service such Salesforce, CRM, 的SharePoint/OneDrive, Dropbox, Twitter and so on:

流 templates - 1

我想我’我对某些可以像简单的那样特别感兴趣“event receivers” in 的SharePoint:

流 templates

To add a flow related to something in 的SharePoint, a 新 “Add flow”按钮将带您进入简单的设计器,您可以在其中定义步骤:

Microsoft 流 inside 的SharePoint

显然这不是’重量级的工作流程或表格工具,但它’s quite a nice option for taking simple actions related to things stored in 的SharePoint (and elsewhere).

概要

因此,全面的变化就在眼前!像许多其他人一样,我’m 极大地 excited about the future of 的SharePoint and it’很高兴看到创新’s happening. I think the proposition for organizations using 的SharePoint and Office 365 is getting even stronger, and many of the the gripes and gaps are being addressed. My next post on the 的SharePoint framework, 的new 的SharePoint development model –客户端Web部件,JavaScript框架,npm,Gulp,TypeScript等从开发人员的角度来看事情。

其他阅读:

对于开发人员: