Learn about JavaScript frameworks and new developer practices in SharePoint and on Office 365. JavaScript frameworks are there for you to help you develop faster and easier. You don't need to do your apps from scratch. Apps and the cloud app model have brought not only new ways to interact, send, write, and receive data from SharePoint. Apps have also brought JavaScript frameworks into SharePoint development. JavaScript frameworks are right there as part of the app template when you start a SharePoint hosted or a Cloud app. In this session, I'll show what you can do with JavaScript frameworks that are part of the app template. I'll show jQuery, Bootstrap, and modernizr.

1. Quick Start Guide to JavaScript
Frameworks for SharePoint Apps
#SPSBE20
Sonja Madsen
April 18th, 2015

3. JavaScript Frameworks and Libraries

4. SharePoint Apps
SharePoint 2003-2010
SharePoint 2010-2013

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

6. SharePoint hosted / Provider app
 jQuery
 NuGet packages
• jQuery
• Bootstrap
• jQuery validation
• jQuery validation
unobtrusive
• Modernizr
• Respond

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

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

10. 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

11. Bootstrap made sites
 http://expo.getbootstrap.com/

12. Bootstrap
 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

13. SP Table / Bootstrap Div
 <table><tr><td>
 <div class=“container”>
<div class=“row”><div class=“col-md-6 col-xs-12”>
Phones (xs – auto width), Tablets (sm – 750px),
desktops(md – 970px), large (lg – 1170px)

14. Bootstrap / SharePoint list item form
Bootstrap - label and text field
<div class="form-group">
<label for="inputSite3" class="col-sm-2 control-label"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
Site Title
</label>
<input type="text" class="form-control" id="inputEmail3" placeholder="Site Title" required />
</div>
SharePoint – label and text field
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader">
<label for="inputSite3" class="ms-standardheader">
Site Title
</label>
</h3></td>
<td valign="top" width="350px" class="ms-formbody">
<!-- FieldName="Title"
FieldInternalName="Title"
FieldType="SPFieldText"
-->
<input type="text" class="ms-long ms-spellcheck-true"" id="inputEmail3" placeholder="Site Title" required />
</td>
</tr>

15. CSS Classes
Bootstrap
<div class=“col-md-6 col-md-offset-2 hidden-xs col-lg-12”>
Office 365
<div autoid="__Microsoft_O365_ShellG2_Core_templates_cs_k" class="o365cs-nav-header16 o365cs-base o365cst
o365spo o365cs-nav-header o365cs-topnavBGColor-2 o365cs-topnavBGImage" id="O365_NavHeader">
Custom LESS stylesheet with Bootstrap
<div class=“col-md-6 col-md-offset-2 hidden-xs –col-lg-12”>
HTML
<div class=“demoblock”>
LESS
.demoblock
{
. col-md-6;
.col-md-offset-2;
.hidden-xs;
.col-lg-12;
}

17. DEMO Bootstrap
SharePoint hosted app

18. Bootstrap Themes
 Bootswatch – free themes at bootswatch.com
 Wrapbootstrap – payed themes at
wrapbootstrap.com

19. Validation with jQuery
 Jquery.validation
 Jquery.validation.unobtrusive

20. 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();

21. DEMO Validation

22. 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

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

24. 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

25. 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
https://github.com/Modernizr/Modernizr/wiki/HTML5-
Cross-browser-Polyfills

27. Links
 jQuery http://api.jquery.com/
 Bootstrap tutorial
http://www.tutorialspoint.com/bootstrap/bootstrap_t
utorial.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

28. PlatinumGoldSilver
Thanks to our sponsors!

29. Thank you!