![Page 1: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/1.jpg)
Quick Start Guide to JavaScript Frameworks for SharePoint Apps
SharePoint SaturdayCambridgee
By Sonja Madsen
![Page 2: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/2.jpg)
SharePoint MVPSONJASAPPSConsultingSpeaker
@sonjamadsen sp2013.blogspot.com [email protected] www.sonjasapps.com
Sonja Madsen
![Page 3: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/3.jpg)
JavaScript Frameworks and LibrariesSharePoint SaturdayCambridge
![Page 4: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/4.jpg)
SharePoint Apps
.NET
SharePoint REST, CSOM
JavaScript frameworks and libraries
SharePoint controls, CSS and JS libraries
Custom design and functionality
App
SharePoint 2003-2010
SharePoint 2010-2013
![Page 5: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/5.jpg)
JavaScript FrameworksStandardized code structure and rulesHTML, CSS and JS Front-end frameworks
CSS to position elementsTypography stylesBrowser compatibilityStandard CSS classesSet of toolsImposes no structure
![Page 6: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/6.jpg)
jQuery
JavaScript libraryMost popularOpen-source Released in 2006Easier to select DOM elements Used in Bootstrap and other libraries
![Page 7: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/7.jpg)
jQueryStart with $(document).ready(function(){AJAX calls $.ajax({Element selector $(".item")Chaining $(".item").addClass("blue").slideDown("slow");Jquery.ui, jquery.validation
![Page 8: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/8.jpg)
BootstrapThe most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the webOpen-sourceTwitter Bootstrap in 2011Bootstrap 3.0 - mobile firstBootstrap 4 alpha
![Page 9: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/9.jpg)
BootstrapCSS
Grid, typography, code, tables, forms, buttons, imagesComponents
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, affixCustomize
![Page 10: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/10.jpg)
Bootstrap• Grid• Forms• Navigation, tabs• Popovers, badges, collapse, pagination…
![Page 11: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/11.jpg)
DEMO Bootstrap Provider App
![Page 12: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/12.jpg)
DEMO Bootstrap SharePoint hosted app
![Page 13: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/13.jpg)
DEMO Bootstrap with LESS SharePoint hosted app
![Page 14: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/14.jpg)
Bootstrap ThemesBootswatch – free themes at bootswatch.comWrapbootstrap – payed themes at wrapbootstrap.comOfficial Bootstrap themes - http://themes.getbootstrap.com/collections/all
![Page 15: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/15.jpg)
LESSExtends the CSS language, adding features that allow variables, mixins, functionsBootstrap is based on LESSBootstrap 4.0 is based on SASS
![Page 16: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/16.jpg)
jQuery Validation / UnobtrusiveHTML<input type=“text” id=“SiteTitle”
JavaScriptrules: {"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();
![Page 17: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/17.jpg)
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"
![Page 18: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/18.jpg)
DEMO Validation
![Page 19: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/19.jpg)
ModernizrDetects HTML5 and CSS3 features that your browser supports on page loadResult of “feature detection” is “yes” or “no”Adds classes to HTMLhttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-PolyfillsSupport IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome
![Page 20: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/20.jpg)
Modernizr
Yepnopejs is deprecatedModernizr.load({ test: Modernizr.borderradius, yep : alert("This browser supports border radius."), nope: 'PIE_IE678.js' });
![Page 21: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/21.jpg)
RespondjsIt loops through the CSS referenced on the pageIE8: re-requests the CSS files using Ajax Polyfill for CSS min-width and max-width in browsers that don't support CSS3 Media Queries
![Page 22: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/22.jpg)
Polyfills, shimsShim: 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 browserhttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
![Page 23: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/23.jpg)
LinksjQuery http://api.jquery.com/Bootstrap tutorial http://www.tutorialspoint.com/bootstrap/bootstrap_tutorial.pdfModernizr http://modernizr.com/docs/Respond https://github.com/scottjehl/RespondBuilding Responsive UI with Bootstrap on MVAhttp://www.microsoftvirtualacademy.com/training-courses/building-responsive-ui-with-bootstrapLESS http://lesscss.org/
![Page 24: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/24.jpg)
![Page 25: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/25.jpg)
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
![Page 26: JavaScript Frameworks for SharePoint add-ins Cambridge](https://reader035.vdocuments.net/reader035/viewer/2022070602/5873aece1a28aba3548b6da3/html5/thumbnails/26.jpg)
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!!!