JavaScript Frameworks for SharePoint add-ins Cambridge
Download as PPTX, PDF1 like674 views
This document provides a quick start guide to JavaScript frameworks for developing SharePoint apps. It introduces several popular JavaScript frameworks and libraries including jQuery, Bootstrap, LESS, and Modernizr. jQuery is described as the most popular JavaScript library for easier DOM element selection and AJAX calls. Bootstrap is explained as an open-source framework for developing responsive, mobile-first projects with pre-built CSS and JavaScript components. LESS and SASS are defined as languages that extend CSS with features like variables and mixins. The document also covers validation plugins, polyfills/shims, and provides demo code examples of Bootstrap and validation in SharePoint apps.
JavaScript Frameworks for SharePoint add-ins Cambridge
- 1. Quick Start Guide to JavaScript Frameworks for SharePoint Apps SharePoint Saturday Cambridge e By Sonja Madsen
- 3. JavaScript Frameworks and Libraries SharePoint Saturday Cambridge
- 4. SharePoint Apps SharePoint 2003-2010 SharePoint 2010-2013
- 5. 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
- 6. jQuery JavaScript library Most popular Open-source Released in 2006 Easier to select DOM elements Used in Bootstrap and other libraries
- 7. jQuery Start with $(document).ready(function(){ AJAX calls $.ajax({ Element selector $(".item") Chaining $(".item").addClass("blue").slideDown("slow"); Jquery.ui, jquery.validation
- 8. 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
- 9. 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
- 10. Bootstrap • Grid • Forms • Navigation, tabs • Popovers, badges, collapse, pagination…
- 11. DEMO Bootstrap Provider App
- 12. DEMO Bootstrap SharePoint hosted app
- 13. DEMO Bootstrap with LESS SharePoint hosted app
- 14. Bootstrap Themes Bootswatch – free themes at bootswatch.com Wrapbootstrap – payed themes at wrapbootstrap.com Official Bootstrap themes - http://themes.getbootstrap.com/collections/all
- 15. LESS Extends the CSS language, adding features that allow variables, mixins, functions Bootstrap is based on LESS Bootstrap 4.0 is based on SASS
- 16. jQuery Validation / Unobtrusive HTML <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();
- 17. 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"
- 18. DEMO Validation
- 19. 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
- 20. Modernizr Yepnopejs is deprecated Modernizr.load({ test: Modernizr.borderradius, yep : alert("This browser supports border radius."), nope: 'PIE_IE678.js' });
- 21. 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
- 22. 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
- 23. 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 LESS http://lesscss.org/
- 25. 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
- 26. 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!!!