This document provides an overview of JavaScript frameworks and libraries that can be used to develop SharePoint add-ins, including jQuery, Bootstrap, LESS, and Modernizr. It explains that jQuery is a popular JavaScript library for selecting elements and handling AJAX calls. Bootstrap is an HTML, CSS, and JS framework for developing responsive, mobile-first projects that includes grids, components, and plugins. LESS extends CSS with features like variables and mixins, and Bootstrap is based on LESS. Modernizr detects browser support for HTML5 and CSS3 features to add polyfills for older browsers.

1. Quick Start Guide to
JavaScript Frameworks
for SharePoint Add-ins

2. JavaScript Frameworks and Libraries
2

3. Sonja
Madsen
SP2013.blogspot.com
@sonjamadsen
dev@sonjasapps.com
www.sonjasapps.com
3

4. SharePoint
2003-2010
JavaScript
frameworks
and libraries
SharePoint
REST, CSOM
SharePoint
2010-2013

5. JavaScript Frameworks
5
Standardized code structure and rules
HTML, CSS and JS
Front-end frameworks
• CSS to position elements
• Typography styles
• Browser compatibility
• Standard CSS classes
• Set of tools
• Imposes no structure

6. jQuery
6
JavaScript library
Most popular
Open-source
Released in 2006
Easy to select DOM elements
Used in Bootstrap and other libraries

7. jQuery
Start with $(document).ready(function(){
AJAX calls $.ajax({
Element selector $(".item")
Chaining $(".item").addClass("blue").slideDown("slow");
Jquery.ui, jquery.validation
7

8. Bootstrap
The most popular HTML, CSS, and JS framework for developing
responsive, mobile first projects on the web
Open-source
Twitter Bootstrap in 2011
Bootstrap 3.0 - mobile first
Bootstrap 4 alpha
8

9. Elements
CSS
• Grid, typography, code, tables, forms, buttons, images
Components
• Glyphicons, dropdowns, input, navs, nav bars, breadcrumbs, pagination, labels,
badges, jumbotron, page header, thumbnails, alerts, progress bars, media object, list
group, panels, responsive embed, wells
JavaScript
 Transitions, modal, dropdown, scrollspy, tab, tooltip, popover, alert, button, collapse, carousel, affix
Customize
9

12. What is Bootstrap?
Grid
Forms
Navigation, tabs
Popovers, badges, collapse, pagination…
12

17. Grid HTML
<div class="col-md-12"> - entire page
<div class="col-md-6”> - 50%
<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div class="col-md-12 hidden-xs">
17

18. Button HTML
18
<a href="#" class="btn btn-default btn-md active">Cancel
MEDIUM</a>
<button type="button" class="btn btn-success">
Success</button>

19. DEMO Bootstrap Provider Add-in

20. DEMO Bootstrap
SharePoint hosted Add-in

21. LESS
Extends the CSS language, adding features that allow variables, mixins,
functions
Bootstrap is based on LESS
Bootstrap 4.0 is based on SASS
21

22. DEMO Bootstrap with LESS
SharePoint hosted add-in

23. Bootstrap Themes
Bootswatch – free themes at bootswatch.com
Wrapbootstrap – payed themes at wrapbootstrap.com
Official Bootstrap themes -
http://themes.getbootstrap.com/collections/all
23

24. jQuery Validation / Unobtrusive
HTML
<input type=“text” id=“SiteTitle”
JavaScript
rules: {
"SiteTitle": { required: true, minlength: 5 }
},
messages: {
"SiteTitle": {
required: "Please enter the site title.",
minlength: "Minimum length is 5 letters."
}
}
HTML
<input type="text“ id=“SiteTitle”
data-rule-required="true"
data-msg-required="The Site Title field is required.“
data-rule-minlength="5"
data-msg-minlength="The minimum length is 5 letters.“
JavaScript
$form.validate();
24

25. Data Rules
data-rule-required="true"
data-rule-email="true"
data-rule-url="true"
data-rule-date="true"
data-rule-dateISO="true"
data-rule-number="true"
data-rule-digits="true"
data-rule-creditcard="true"
data-rule-minlength="6"
data-rule-maxlength="24"
data-rule-rangelength="5,10"
data-rule-min="5"
data-rule-max="10"
data-rule-range="5,10"
25

26. Textbox validation
26

27. Modernizr
Detects HTML5 and CSS3 features that your browser supports on
page load
Result of “feature detection” is “yes” or “no”
Adds classes to HTML
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-
browser-Polyfills
Support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome
27

28. Support IE6+, Firefox 3.5+,
Opera 9.6+, Safari 2+, Chrome

29. Modernizr
Modernizr.load({
test: Modernizr.borderradius,
yep : alert("This browser supports border radius."),
nope: 'PIE_IE678.js'
});
29

30. Respondjs
It loops through the CSS referenced on the page
IE8: re-requests the CSS files using Ajax
Polyfill for CSS min-width and max-width in browsers that don't
support CSS3 Media Queries
30

31. Polyfills, shims
Shim: a generic code, a library that brings a new API to an older
environment
Polyfill: downloadable code with fallback for functionality that is not
available in your browser
Also with newer browsers
31

32. Links
jQuery http://api.jquery.com/
Bootstrap tutorial http://www.tutorialspoint.com/bootstrap/bootstrap_tutorial.pdf
Modernizr http://modernizr.com/docs/
Respond https://github.com/scottjehl/Respond
Building Responsive UI with Bootstrap on MVA
http://www.microsoftvirtualacademy.com/training-courses/building-responsive-ui-
with-bootstrap
LESS http://lesscss.org/
Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
32

33. 33