My Browser is my IDE?

Developing Enterprise applications with AngularJS and SharePoint REST services.

Keith B. Rimington

Development Lead, Nu Skin Enterprises, Inc.

krimington@nuskin.com

ProductivityWhat do you do with your “spare” time?

Visual Web PartsThen and Now

Then (2010):• Get the data access right, deploy, and

then edit markup (.ascx), scripts (.js), and styles (.css) in the hive.

• F5 in the browser for instant feedback.

Now (2013):• The Visual Web Part has changed:

• The .ascx template is now pre-compiled into the assembly.

• Must redeploy to see even trivial markup changes.

Part of m

e died th

e firs

t tim

e I sa

w this

Part of m

e died th

e firs

t tim

e I sa

w this

The Cloud vs. Web PartsServer controls are so 2002!

ClutterFacing the technical debt from “traditional” web part development.

Hello, World… but painful<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %><%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, …<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" …<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" …<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, …<%@ Import Namespace="Microsoft.SharePoint" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" …<%@ Register Tagprefix="nu" Namespace="Nu.SharePoint.Controls" Assembly="Nu.SharePoint.Core, …<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Leadership101.ascx.cs" Inherits="Nu.SharePoint.WebParts.Leadership101" %><div id="wrapper" runat="server"> <div class="NuLeadershipBoundingBox"> <div class="NuLeadershipMargin"> <div class="NuLeadershipImg"><asp:Image runat="server" ID="LeadershipImg" /></div> <div style="width:90%; align-self:center"> <div class="NuLeadershipHeader NuLeadershipWhite"><asp:Label runat="server" ID="Header" /></div> <div class="NuLeadershipWhite"><asp:Label runat="server" ID="TitleLabel" /></div> <div class="NuLeadershipDivide NuClearfix"></div> <div class="NuLeadershipContent NuLeadershipWhite"><asp:Literal runat="server" ID="Content" /></div> </div> </div> </div></div>

Hello, World… but painfulnamespace Nu.SharePoint.WebParts{ using Nu.SharePoint.Services; using System; using System.ComponentModel; using System.Runtime.InteropServices;

[ToolboxItemAttribute(false)] [Guid("036ae4c9-2c6b-40f2-afaa-c0d8338b71b2")] public partial class Leadership101 : Nu.SharePoint.Controls.WebPartBase { public Leadership101() { }

protected override void OnInit(EventArgs e) { base.OnInit(e); InitializeControl(); }

protected void Page_Load(object sender, EventArgs e) { try { var service = new PortalService(); var story = service.GetLatestLeadershipStory(); if (story != null) { this.TitleLabel.Text = story.Title; this.Content.Text = story.Content; this.LeadershipImg.ImageUrl = story.ImageUrl; }

this.Header.Text = this.DisplayTitle; } catch { this.Header.Text = "Leadership 101"; this.TitleLabel.Text = "An error has occurred"; this.Content.Text = "If this problem persists, please contact the <a href='http://help/'>Service Desk</a> at 801-345-HELP (x4357)."; }}}}

Hello, World… but painful

public LeadershipStoryData GetLatestLeadershipStory(){ using (var context = new PortalDataContext(SPContext.Current.Site.Url)) { var query = from story in context.Leadership101 orderby story.Created descending select new LeadershipStoryData { Title = story.Title, ImageUrl = story.Picture.ParseSPUrl(), Content = story.Content }; return query.FirstOrDefault(); }}

[DataContract][SuppressMessage( "Microsoft.StyleCop.CSharp.DocumentationRules", "SA1600:ElementsMustBeDocumented", Justification = "Not required for Entities.")]public class LeadershipStoryData{ [DataMember(Name = "title")] public string Title { get; set; }

[DataMember(Name = "img")] public string ImageUrl { get; set; }

[DataMember(Name = "content")] public string Content { get; set; }}

Hello, World… but painfulAnd let’s not forget…

• Solution manifest item: Elements.xml

• Web part gallery document: MyWebpart.webpart

• Precompiled template: MyWebpart.ascx.g.cs

• WebPart settings (e.g., SafeControls): SharePointProjectItem.spdata

• Eww!: LINQ to SharePoint data model

• Service Layer: WCF Service (.svc)

• Styles: MyWebpart.css

SimplifyA lightweight approach to SharePoint development

Demos

SPSUtah Demo Code.zip

• Usergroup contacts:• @SharePointUtah• www.facebook.com/UtahSharePointUsersGroup• www.UTSharePoint.com

Please join us for

SharePint!SharePint will be held at:

Red Rock Brewing

254 South 200 West

Salt Lake City

following the prize raffle