Quick start guide to java script frameworks for sharepoint apps spsbe-2015
Post on 16-Jul-2015
316 Views
Preview:
Transcript
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
SharePoint hosted / Provider app
jQuery
NuGet packages
• jQuery
• Bootstrap
• jQuery validation
• jQuery validation unobtrusive
• Modernizr
• Respond
jQuery
JavaScript library
Most popular
Open-source
Released in 2006
Easier to select DOM elements
Used in Bootstrap and other libraries
jQuery
Start with $(document).ready(function(){
AJAX calls $.ajax({
Element selector $(".item")
Chaining $(".item").addClass("blue").slideDown("slow");
Jquery.ui, jquery.validation
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
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
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)
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>
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;
}
Bootstrap Themes
Bootswatch – free themes at bootswatch.com
Wrapbootstrap – payed themes at wrapbootstrap.com
Validation / UnobtrusiveHTML
<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();
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
Modernizr
Yepnopejs is deprecated
Modernizr.load({
test: Modernizr.borderradius,
yep : alert("This browser supports border radius."),
nope: 'PIE_IE678.js'
});
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
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
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
top related