my browser is my ide? developing enterprise applications with angularjs and sharepoint rest...

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