dog food conference creating modular webparts with require js in sharepoint
TRANSCRIPT
![Page 1: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/1.jpg)
Creating Modular WebParts with
RequireJS in SharePoint
Dog Food ConferenceTuesday, September 30th, 2014
Christopher Fahey
![Page 2: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/2.jpg)
AboutDeveloper at Cardinal Solutions Group
Doing SharePoint development for over 2 years
Two Scrum certificationsPSM, PSD
Two Microsoft certifications70-480, 70-486
![Page 3: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/3.jpg)
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
![Page 4: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/4.jpg)
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
![Page 5: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/5.jpg)
What is RequireJS?
![Page 6: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/6.jpg)
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
![Page 7: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/7.jpg)
Why RequireJS?
![Page 8: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/8.jpg)
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
![Page 9: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/9.jpg)
“Unmanageable” Scripts
![Page 10: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/10.jpg)
Pro Tip
Implied global variables should never be used. Use of global variables should be minimized.Douglas Crockford
“
”http://javascript.crockford.com/code.html
![Page 11: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/11.jpg)
Why Start Using RequireJSMany popular libraries already work with RequireJS
Decouples your applications
Ease of maintenance
![Page 12: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/12.jpg)
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
![Page 13: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/13.jpg)
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
![Page 14: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/14.jpg)
Learning RequireJS
![Page 15: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/15.jpg)
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
![Page 16: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/16.jpg)
require()
specify any dependencies
runs like an immediate
function
require([“welcome”], function (welcome) { welcome.showTodaysDate(); welcome.greetUser();});
![Page 17: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/17.jpg)
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”); } };});
![Page 18: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/18.jpg)
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”] } }});
![Page 19: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/19.jpg)
RequireJS In SharePoint
![Page 20: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/20.jpg)
Creating a WebPartCreate a new SharePoint 2013 Project
Deploy as Sandbox Solution
Create a Visual WebPart
Add Scripts leveraging RequireJS
![Page 21: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/21.jpg)
WebPart
![Page 22: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/22.jpg)
Project Setup
![Page 23: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/23.jpg)
User Control
![Page 24: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/24.jpg)
![Page 25: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/25.jpg)
Lazy Loading Scripts
![Page 26: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/26.jpg)
Lazy Loading Scripts (continued)
Charts.js file was not downloaded until “Show All Data” button was clicked - about 20 seconds after page load
![Page 27: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/27.jpg)
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
![Page 28: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/28.jpg)
Example
![Page 29: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/29.jpg)
Testing Example
![Page 30: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/30.jpg)
Resourceshttp://requirejs.org
http://addyosmani.com/writing-modular-js
http://blog.teamtreehouse.com/organize-your-code-with-requirejs
http://youtube.com/watch?v=eRqsZqLyYaU
![Page 31: Dog food conference creating modular webparts with require js in sharepoint](https://reader036.vdocuments.net/reader036/viewer/2022062319/558b0c3ad8b42aba2d8b4569/html5/thumbnails/31.jpg)
DiscussionSlideshttp://www.slideshare.net/fahey252
Connecthttps://www.linkedin.com/in/christopherpatrickfahey
Schedule a one on onehttp://dogfoodcon.hubb.me