Quick Start Guide to JavaScript Frameworksfor SharePoint Add-ins#SPSOslo

Sonja MadsenOctober 17th, 2015

SharePoint SaturdayOslo 2015

SharePoint SaturdayOslo 2015

@sonjamadsendev@sonjasapps.com

Belgium, Paris, Netherlands, Cambridge, Copenhagen, Barcelona, Oslo, Stockholm, Slovenia

www.sonjasapps.com

Sonja Madsen

SP2013.blogspot.com

JavaScript Frameworks and Libraries

Development

Add-in (App)

SharePoint 2003-2010

SharePoint 2010-2013

.NET, SharePoint

controls, CSS and JS

libraries

JavaScript frameworks and libraries

SharePoint REST, CSOM

SHAREPOINTDEVELOPMENT

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– Set of tools– Imposes no structure

jQuery• JavaScript library• Most popular• Open-source • Released in 2006• Easy 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 4 alpha

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

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

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

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 App

DEMO Bootstrap SharePoint hosted

app

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 app

Bootstrap Themes• Bootswatch – free themes at bootswatch.com• Wrapbootstrap – payed themes at

wrapbootstrap.com• Official Bootstrap themes -

http://themes.getbootstrap.com/collections/all

SharePoint SaturdayOslo 2015

jQuery Validation / Unobtrusive

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

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

Support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome

ModernizrYepnopejs 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

• Also with newer browsers

SharePoint SaturdayOslo 2015

• 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• LESS http://lesscss.org/• Polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-

Cross-browser-Polyfills

Links

SharePoint SaturdayOslo 2015

SharePoint SaturdayOslo 2015

Thanks to our

Sponsors

Questions?

@sonjamadsen

http://...

Get stamps from all the sponsors, so make sure to visit them

Deposit the passport to enter the prize raffle

Good luck!

The SPSOslo Passport

FREE BEER!Make sure to get your voucher

Network and have fun with your colleagues and mingle with our great speaker lineup.

SharePint sponsored by

They help us improve for SharePoint Saturday 2016!

Remember to evaluate our sessions