jQuery, Bootstrap, Validation, LESS, CSS

1. Quick Start Guide to JavaScript
Frameworks for SharePoint Apps
SharePoint
Saturday
Cambridge
e
By Sonja Madsen

2. SharePoint MVP
SONJASAPPS
Consulting
Speaker
@sonjamadsen
sp2013.blogspot.com
dev@sonjasapps.com
www.sonjasapps.com
Sonja Madsen

3. JavaScript Frameworks and Libraries
SharePoint Saturday
Cambridge

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

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

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

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

10. Bootstrap
• Grid
• Forms
• Navigation, tabs
• Popovers, badges, collapse, pagination…

11. DEMO Bootstrap Provider App

12. DEMO Bootstrap
SharePoint hosted app

13. DEMO Bootstrap with LESS
SharePoint hosted app

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

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

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

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

18. DEMO Validation

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

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

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

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

23. 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/

25. Stick around for SWAG! (Prize drawing at 5.00 p.m)
• All our volunteers and organisers do not get paid for running SPS
SQLSaturday Cambridge and do it because they believe in the power of
community (or are just plain nuts). Please show your gratitude for making
this possible by:
• Giving them a hug
• Shaking their hand
• Saying thank you
• Coming back next year
• Consider getting your company to pay for a precon next year
• Speading the word
• Getting involved yourself
• But most of all, by enjoying the day!
• Don’t forget to thank the sponsors for their support
• Thank the speakers for donating their time, energy and expenses

26. Stick around for SWAG! (Prize drawing at 5.00 p.m)
SQLCloud — XBox One!!! (make sure you know how to play the Jet Set Willy vendor competition!)
SQLCloud—Dark Side Of The Moon, The Wall and Wish You Were Here
Microsoft — MCP Voucher
Data Idols — Supercar Driving Experience
Profisee — Signed MDS Book and £50 Amazon Voucher
SQLSentry — Plan Explorer PRO License
Pyramid Analytics—Coffee Machine
Effektor — Lego Big Ben
Rencore — SPCAF Professional License (valued at $2099!)
Axioworks — Amazon Fire TV and £75 Amazon Voucher
DELL — Beats by Dr Dre Headphones
Redgate — DLM Workshop
Pluralsight — Annual Plus subscriptions
All Your Base Conference — 3 x Conference Tickets
VisualSP—Annual training subscription
Loads of books and much much more!!!