Quick Start Guide to JavaScript Frameworks for SharePoint Apps

#SPSBE20

Sonja Madsen

April 18th, 2015

JavaScript Frameworks and Libraries

SharePoint Apps

SharePoint 2003-2010

SharePoint 2010-2013

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 made sites

http://expo.getbootstrap.com/

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;

}

DEMO Bootstrap SharePoint hosted app

Bootstrap Themes

Bootswatch – free themes at bootswatch.com

Wrapbootstrap – payed themes at wrapbootstrap.com

Validation with jQuery

Jquery.validation

Jquery.validation.unobtrusive

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

DEMO Validation

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

Pla

tin

um

Go

ldSilver

Thanks to our sponsors!

Thank you!