Creating Modular WebParts with

RequireJS in SharePoint

Dog Food ConferenceTuesday, September 30th, 2014

Christopher Fahey

AboutDeveloper at Cardinal Solutions Group

Doing SharePoint development for over 2 years

Two Scrum certificationsPSM, PSD

Two Microsoft certifications70-480, 70-486

LogisticsUse Hubb.me to schedule a one on one with me

http://dogfoodcon.hubb.me

Tweet at Dog Foodhttps://twitter.com/hashtag/DogFoodCon#DogFoodCon @DogFoodCon

Principles apply to various platforms/solutions

Interactive presentation - ask questions during

GoalsAssuming everyone is a developer

Beneficial and learn something as IT Pro, Manger, etc.

Start building front-end solutions using RequireJS

Encourage development of modular code

What is RequireJS?

Front end file and module loader

AMD - Asynchronous Module Definition

What are JavaScript modules?Encapsulate code into useful units and then expose its data and behavior

Optimization tool

Why RequireJS?

Large project have many files in which managing the dependencies for each file becomes cumbersome

Having to write many script tags is not scalable

Easy to load scripts on demand

References to other dependencies are done via global variables - often implicitly

“Unmanageable” Scripts

Pro Tip

Implied global variables should never be used. Use of global variables should be minimized.Douglas Crockford

“

”http://javascript.crockford.com/code.html

Why Start Using RequireJSMany popular libraries already work with RequireJS

Decouples your applications

Ease of maintenance

Distinct functionalitySmall, single purpose scripts

Single Responsibility (SOLID)Divide and conquer large applications into small

blocks

Helps manage dependencies

Microsoft is pushing development towards front-end coded solutions in SharePoint

Doing things the app way

Custom code that runs on the SharePoint servers is not allowed in Apps for SharePoint. MSDN

“

”

http://msdn.microsoft.com/en-us/library/office/jj163114(v=office.15).aspx

Learning RequireJS

RequireJS Basics● Three global variables

○ window.define();○ window.require();○ window.requirejs;

● Assumes all scripts are in the /scripts directory

● The .js file extension is assumed

● Browser support back to IE6 and Firefox 2

require()

specify any dependencies

runs like an immediate

function

require([“welcome”], function (welcome) { welcome.showTodaysDate(); welcome.greetUser();});

define()

define() states we are creating module

and using jQuery

returns an object that exposes the desired data and

behavior

define([“jquery”], function ($) { var todaysDate = new Date(); return { today: todaysDate, showTodaysDate: function() { $(“.todays-date”).text(todaysDate); }, greetUser: function () { $(“.welcome”).text(“Hi”); } };});

configs()

baseUrl is the root path for all module

lookups

paths is a mapping of urls for any

module names

shims helps manage

dependencies of scripts

many more configuration

options

require.config({ baseUrl: “/Style Library”, paths: { “jquery”: “jquery.1.7.1”, “u”: “underscore.1.7.0” }, shims: { “backbone”: { deps: [“jquery”, “u”] } }});

RequireJS In SharePoint

Creating a WebPartCreate a new SharePoint 2013 Project

Deploy as Sandbox Solution

Create a Visual WebPart

Add Scripts leveraging RequireJS

WebPart

Project Setup

User Control

Lazy Loading Scripts

Lazy Loading Scripts (continued)

Charts.js file was not downloaded until “Show All Data” button was clicked - about 20 seconds after page load

Lessons LearnedVery quick and easy to start using RequireJS, but unlikely current code base will “just work”

Figure out a pattern and stick with it

Naming

Keep files small, do one thing at a time

Example

Testing Example

Resourceshttp://requirejs.org

http://addyosmani.com/writing-modular-js

http://blog.teamtreehouse.com/organize-your-code-with-requirejs

http://youtube.com/watch?v=eRqsZqLyYaU

DiscussionSlideshttp://www.slideshare.net/fahey252

Connecthttps://www.linkedin.com/in/christopherpatrickfahey

Schedule a one on onehttp://dogfoodcon.hubb.me