Quick Start Guide to JavaScript Frameworks for SharePoint Apps

SharePoint SaturdayCambridgee

By Sonja Madsen

SharePoint MVPSONJASAPPSConsultingSpeaker

@sonjamadsen sp2013.blogspot.com dev@sonjasapps.com www.sonjasapps.com

Sonja Madsen

JavaScript Frameworks and LibrariesSharePoint SaturdayCambridge

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

JavaScript FrameworksStandardized code structure and rulesHTML, CSS and JS Front-end frameworks

CSS to position elementsTypography stylesBrowser compatibilityStandard CSS classesSet of toolsImposes no structure

jQuery

JavaScript libraryMost popularOpen-source Released in 2006Easier to select DOM elements Used in Bootstrap and other libraries

jQueryStart with $(document).ready(function(){AJAX calls $.ajax({Element selector $(".item")Chaining $(".item").addClass("blue").slideDown("slow");Jquery.ui, jquery.validation

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

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

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

DEMO Bootstrap Provider App

DEMO Bootstrap SharePoint hosted app

DEMO Bootstrap with LESS SharePoint hosted app

Bootstrap ThemesBootswatch – free themes at bootswatch.comWrapbootstrap – payed themes at wrapbootstrap.comOfficial Bootstrap themes - http://themes.getbootstrap.com/collections/all

LESSExtends the CSS language, adding features that allow variables, mixins, functionsBootstrap is based on LESSBootstrap 4.0 is based on SASS

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

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"

DEMO Validation

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

Modernizr

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

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

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

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/

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

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!!!