quick start guide to java script frameworks for sharepoint add ins sharepoint days
TRANSCRIPT
Quick Start Guide to JavaScript Frameworksfor SharePoint Add-ins
2
JavaScript Frameworks and Libraries
Add-in (App)
SharePoint 2003-2010
.NET, SharePoint
controls, CSS and JS
libraries
JavaScript frameworks and libraries
SharePoint REST, CSOM
SharePoint 2010-2013
5
JavaScript FrameworksStandardized code structure and rulesHTML, CSS and JS Front-end frameworks• CSS to position elements• Typography styles• Browser compatibility• Standard CSS classes• Set of tools• Imposes no structure
6
jQueryJavaScript libraryMost popularOpen-source Released in 2006Easy to select DOM elements Used in Bootstrap and other libraries
7
jQueryStart with $(document).ready(function(){AJAX calls $.ajax({Element selector $(".item")Chaining $(".item").addClass("blue").slideDown("slow");Jquery.ui, jquery.validation
8
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
9
ElementsCSS• 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
12
What is Bootstrap?GridFormsNavigation, tabsPopovers, 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>
DEMO Bootstrap Provider Add-in
DEMO Bootstrap SharePoint hosted Add-in
21
LESSExtends the CSS language, adding features that allow variables, mixins, functionsBootstrap is based on LESSBootstrap 4.0 is based on SASS
DEMO Bootstrap with LESS
SharePoint hosted add-in
23
Bootstrap ThemesBootswatch – free themes at bootswatch.comWrapbootstrap – payed themes at wrapbootstrap.comOfficial Bootstrap themes - http://themes.getbootstrap.com/collections/all
24
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();
25
Data Rulesdata-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"
26
Textbox validation
27
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
Support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome
29
ModernizrModernizr.load({ test: Modernizr.borderradius, yep : alert("This browser supports border radius."), nope: 'PIE_IE678.js' });
30
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
31
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 browserAlso with newer browsers
32
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/Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
33