Learn about JavaScript frameworks and new developer practices in SharePoint and on Office 365. JavaScript frameworks are there for you to help you develop faster and easier. You don't need to do your apps from scratch.
Apps and the cloud app model have brought not only new ways to interact, send, write, and receive data from SharePoint. Apps have also brought JavaScript frameworks into SharePoint development. JavaScript frameworks are right there as part of the app template when you start a SharePoint hosted or a Cloud app. In this session, I'll show what you can do with JavaScript frameworks that are part of the app template. I'll show jQuery, Bootstrap, and modernizr.
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
Library
Set of tools
Imposes no structure
7. jQuery
JavaScript library
Most popular
Open-source
Released in 2006
Easier to select DOM elements
Used in Bootstrap and other libraries
8. jQuery
Start with $(document).ready(function(){
AJAX calls $.ajax({
Element selector $(".item")
Chaining
$(".item").addClass("blue").slideDown("slow");
Jquery.ui, jquery.validation
9.
10. 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
22. 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
24. 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
25. 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
26.
27. Links
jQuery http://api.jquery.com/
Bootstrap tutorial
http://www.tutorialspoint.com/bootstrap/bootstrap_t
utorial.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