2016年6月27日星期一

在周六伦敦SharePoint上的演讲-新SharePoint Framework开发模型的简介

图片I’我期待很快就新的SharePoint框架进行首次公开​​演讲– this will be 在 SharePoint星期六,伦敦,2016年7月9日 .

该活动将在伦敦西部的帝国理工学院举行,会议和演讲者阵容对于社区活动而言非常不错。我认为现在是收集有关SharePoint和Office 365中最新开发的信息的好时机,以及我与其他发言人’ll be doing my best to provide some useful info. Developers in particular are going to have a lot to learn over the next year or so if they want to build with modern pages and 客户网页部分s.

这里 are the details of my session:

新的SharePoint开发框架简介

Microsoft正在对SharePoint网站和页面进行重大更改,其中包括开发人员如何编写代码以扩展它们。有一个新的Web部件框架,以及一个经过全面改进的页面模型,该模型旨在快速而轻巧。在本节中,我们将重点关注开发人员的角度,并仔细研究开发一个"client web part"-使用Yeoman,TypeScript,Gulp,npm和node.js,并讨论了Angular和React之类的JavaScript框架适用的位置。我还将展示一些Microsoft私有的预览工具"dev kitchen"事件,以帮助您可视化开发过程。本次会议的目的是开始您对这种方法适合的位置的理解,以及现在如何做才能在这个勇敢的新世界中富有成效!

不幸的是,会议获胜’不能记录,因为场地不’有那种设施。一世’在以后的其他演讲中,我们将更多地讨论SharePoint框架。

活动信息及报名

最后还有剩余的空间,很高兴看到您在那里’在伦敦或附近!注册是在EventBrite中完成的,您可以通过以下链接从SharePoint Saturday网站获取事件信息和注册链接:

http://www.spsevents.org/city/London/London2016/home

2016年6月12日星期日

Develop a 客户网页部分 in the SharePoint Framework - a walk-through

我在上一篇文章中介绍了SharePoint框架的简介。 新的SharePoint开发模型– JavaScript frameworks, npm, Gulp, TypeScript, 客户网页部分s etc。,所以现在让’s now take a closer look 在 developing a 客户网页部分 (something most developers will do commonly). We’将逐步介绍Web部件的创建过程,并开始研究各种配置文件,并介绍诸如引入JavaScript库(如jQuery),合并CSOM代码以及处理异步操作(如获取数据)之类的内容。一世’ll链接到许多文章的单独文章,因为它们值得一些不错的报道。我们’我也会考虑“what now?”现在,当您运行默认代码并需要开始添加自己的代码时。

记得–这只是*样本指导*,可以帮助您进行准备。一些细节将在发布前更改!

我可以’足够强调你不应该’在这篇文章中不要把任何事情当作福音。目前(2016年5月/ 2016年6月),该框架仍未正式发布,在大多数人接触之前,情况将有所变化。此处显示的框架部分来自与私有产品小组的合作“dev kitchen”事件。不过,我认为对开发过程的外观进行平视是有好处的–我认识的大多数开发人员都喜欢看运动的部分以了解技术栈,因此希望这对人们有所帮助。即使只是精神上的!

Getting started - creating a 客户网页部分 “project”

经验丰富的SharePoint开发人员习惯于打开Visual Studio并执行文件> New > Project >并选择一个SharePoint模板(即使只是一个空的SharePoint项目),也可以使用“添加”将一个项目添加到现有项目中> New item > SharePoint >空元素或类似元素。但是,在SharePoint框架中,我们没有’无需使用Visual Studio,而Yeoman Generator可以帮助我们开始使用正确的文件。这可以从命令行使用,而不能’绑定到特定的代码编辑器(例如Visual Studio)。因此,我们需要安装以下内容:

  • 约曼发电机本身
  • A template for a SharePoint 客户网页部分 –当工具发布时,它将变为可用

我们在要使用的目录中打开命令行,然后运行Yeoman Generator将正确的文件拖放到该目录中。我们告诉它要使用的生成器的名称– I have one called “@ms/sharepoint”(从我可以访问的预览位–最终名称可能会更改)。这实际上是一个“模板化的文件集”,这些模板将由Microsoft提供(但毫无疑问,社区将添加其他模板):

Yo1

The generator will ask me some questions in order to provide the right scaffolding (and note the 开发厨房 references illustrating that these are preview tools), and then starts unpacking some files into the directory – especially the “node_modules”用于JS依赖项的文件夹:

Yo3_1

然后询问我是否要创建客户端Web部件或整页应用程序  – I’在这里选择第一个选项:

SNAGHTML1afe09d9

在收集了有关我的Web部件名称和描述的进一步信息之后(下面用红色框突出显示),在目录中创建了一些核心文件(请参见黄色框):

Yo5_1

生成器完成了,现在我的文件夹中有一些样板文件,包括一些“Hello World” code in the main web part file. 我可以 now open these in a code editor, examine them, and start implementing some real code. To open this folder in Visual Studio code (and remember it’s just a folder, not a VS 项目 or anything), 我可以 type “code .” –点告诉VS Code在当前文件夹中打开:

SNAGHTML378acf80

现在我们看到了文件。感兴趣的主要子文件夹是“config” and “src”文件夹,在下面突出显示:

客户端Web部件-初始代码-1_1x

Usefully, this is a working sample and as shown in the last post, 我可以 run this in the local “workbench”不依赖SharePoint的环境。为此,我跑步“gulp 服务”从命令行:

SNAGHTML378c3a8a

这将执行名为“serve”。这是在工具中定义的’s job is to spin up node.js on your local machine to allow the files to be 服务d (as an alternative to IIS) –默认网址基于 http://本地主机:4321. A browser window is also opened onto the 工作台 page, and all this is logged in the console:

SNAGHTML37902c8c

在打开的浏览器窗口中,您应该看到Web部件的实例已添加到新样式页面之一中。显示的内容将与之前显示的样板HTML代码匹配:

SNAGHTML379207b5

如果我们要编辑Web部件属性,则会看到样板代码定义的单个属性以帮助我们入门:

SNAGHTML37947e91

这里's what the boilerplate code looks like for the web part:

** N.B.这里有一个代码示例,但不会在RSS阅读器中显示- 点击这里查看全文 **

添加代码时的早期挑战

现在我们有了一些样板代码,我们’ve tested that in the browser. But now the 好玩 starts, and we really need two things:

  • To understand how to start adding code, to implement the specific 好玩ctionality we plan to build in this web part
  • 了解SharePoint框架提供的各种文件夹和文件–换句话说,了解SharePoint框架  development model
添加代码

Looking 在 the boilerplate code, you can see the main entry point to a 客户网页部分 is the public render() SharePoint框架提供的方法。表示Web部件的DOM元素’页面上的s容器作为参数传递,并且’由您决定在那里输出内容–使用您选择的任何方法。然后您可以看到,这是对“JavaScript embed”我们许多人通过内容编辑器Web部件或脚本编辑器Web部件使用的方法–基本上,Web部件会在页面上发出DIV,然后使用一些随附的JavaScript填充该DIV。 当然,最大的区别是事情已经完成,我们现在有了适当的框架支持。我们可以从Web部件框架中获得SharePoint长期开发人员所期望的一切–支持Web部件属性,Web部件管理器对象(用于帮助管理页面上的Web部件),上下文数据(例如,页面处于编辑还是显示模式等)。但是,我们还获得了其他东西-支持加载资源(例如CSS),日志记录框架,以及满足常见需求(例如发出GET / POST请求)的各种帮助程序。

因此,这取决于我们围绕该render()方法构建的内容。 对于非平凡的Web部件,通常您’将创建其他TypeScript模块,以便您获取数据(或其他任何内容)的核心实现’在演示代码中,如果’即使是可以重新使用TypeScript“fun” the first time! As I was creating my first 客户网页部分s, I hit challenges such as these as I was building out my code:

  • 如何添加其他TypeScript模块以更好地构建代码(并在Web部件类中使用此代码)
  • 如何将jQuery或其他JavaScript库添加到您的Web部件(包括用于代码完成的TypeScript类型)
  • 如何将CSOM添加到您的Web部件(同样,使用TypeScript键入,以便CSOM更易于编写)

我计划在以后的文章中介绍所有这些内容。

了解SharePoint Framework文件和文件夹– an overview

在这一点上’值得考虑的是我们正在使用的文件和文件夹:

SNAGHTML1997d549

这里’是我下一篇文章中的表格的简化版本– I’我会在那儿详细介绍’s概述所使用的文件夹结构:

目的

src 您添加/编辑代码文件的地方
LIB 包含“processed”准备移入与应用程序一起分发的捆绑软件中的代码文件。
dist 包含the final code files which are distributed with your application.

最重要的文件是最终的JavaScript捆绑文件 [MyWebPart] .bundle.js
配置 包含该工具用于构建过程的一组JSON文件。特别是要控制应用程序的打包方式-使用.spapp文件,JavaScript / CSS捆绑等等。
node_modules 包含代码或SharePoint框架使用的JavaScript模块。有些可能在运行时加载,但其他一些只能在设计时使用(例如,通过TypeScript代码)。
打字 包含TypeScript类型文件–这些用于为您提供针对您正在使用的JavaScript库(例如jQuery)的自动完成功能(IntelliSense)。

 

概要

在新的SharePoint Framework中进行开发时,需要注意一些事项。创建自定义代码的过程是不同的(并且没有’甚至不需要使用Visual Studio!),SharePoint开发人员将使用的文件和文件夹也有所不同。一世’在下一篇文章中,我将继续深入研究 了解SharePoint框架中的Web部件清单,bundle.json和其他关键文件和文件夹 (即将发布!)