jQuery, Bootstrap, jQuery.Validation, jQuery.Validation.Unobtrusive, Modernizr, Polyfills

1. Quick Start Guide to JavaScript Frameworks
for SharePoint Add-ins
#SPSOslo
Sonja Madsen
October 17th, 2015
SharePoint Saturday
Oslo 2015

2. SharePoint Saturday
Oslo 2015
@sonjamadsen
dev@sonjasapps.com
Belgium,
Paris,
Netherlands,
Cambridge,
Copenhagen,
Barcelona,
Oslo,
Stockholm,
Slovenia
www.sonjasapps.com
Sonja Madsen
SP2013.blogspot.com

3. JavaScript Frameworks and Libraries

4. Development
SharePoint 2003-2010
SharePoint 2010-2013
SHAREPOINT
DEVELOPMENT

6. 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
– Set of tools
– Imposes no structure

7. jQuery
• JavaScript library
• Most popular
• Open-source
• Released in 2006
• Easy 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

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

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

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

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">

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

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

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

24. SharePoint Saturday
Oslo 2015
jQuery Validation
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
5 letters.“
JavaScript
$form.validate();

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"

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/H
TML5-Cross-browser-Polyfills
• Support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+,
Chrome

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

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

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

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

32. SharePoint Saturday
Oslo 2015
• 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
Links

33. SharePoint Saturday
Oslo 2015
SharePoint Saturday
Oslo 2015
Thanks to our
Sponsors

34. Questions?

35. Get stamps from all the sponsors,
so make sure to visit them
Deposit the passport to enter the
prize raffle
Good luck!
The SPSOslo Passport

36. FREE BEER!
Make sure to get your voucher
Network and have fun with your
colleagues and mingle with our
great speaker lineup.
SharePint sponsored by

37. They help us improve for SharePoint Saturday 2016!
Remember to evaluate our sessions