1 / 29

Building Solutions using Client Side Frameworks & Technologies

Building Solutions using Client Side Frameworks & Technologies. SharePoint 2013. 31 May 2014. Matthew Carriere & Shereen Qumsieh Dynamic Owl Consulting CALSPUG Inc. About Me. Matthew Carriere Co-Founder, Dynamic Owl Consulting SharePoint Development Manager

leena
Download Presentation

Building Solutions using Client Side Frameworks & Technologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Building Solutions using Client Side Frameworks & Technologies SharePoint 2013 31 May 2014 Matthew Carriere & Shereen Qumsieh Dynamic Owl Consulting CALSPUG Inc.

  2. About Me • Matthew Carriere • Co-Founder, Dynamic Owl Consulting • SharePoint Development Manager • Writer @ SharePointDeveloperHQ • Shereen Qumsieh • Co-Founder, Dynamic Owl Consulting • Principal Architect • SharePoint MVP

  3. Session Agenda • Introduction to the SharePoint 2013 App Models • Overview of the Client Side Object Models • Tools, Frameworks and Libraries • Tips, Tricks and Debugging

  4. What Isn’t Covered • Infrastructure and Config • Coding Demo

  5. The App Models • SharePoint Hosted • Auto/Cloud Hosted (Deprecated) • Provider Hosted

  6. SharePoint Hosted

  7. Provider Hosted

  8. Client Side APIs • JavaScript Object Model (JSOM) • Client Side Object Model (CSOM) - Managed • REST • Client object models act as proxy’s to the server object model • REST for GETs and CSOM/JSOM for everything else

  9. Comparing the APIs

  10. DemoJSOM and REST

  11. Tools, Frameworks and Libraries • Angular – JavaScript Framework • jQuery – JavascriptLibrary • Sass – Syntactically Awesome Style Sheets • Moment – Date Library • Local Storage - Caching

  12. Angular • JavaScript framework for building MVW applications • Developed by a team at Google • Enables you to extend HTML vocabulary for your web applications

  13. jQuery • Subset included in SharePoint by default • Learn how to namespace jQuery when adding your own • Best practices for including jQuery • CDN • /_layouts/ • Content Database

  14. DemoAngular

  15. Sass • CSS preprocessor that’s an extension to CSS • Allows us to leverage variables, nesting, functions and mixins in our stylesheets • Enables us to manage really large and complex stylesheets

  16. Variables

  17. Nesting

  18. Mixins

  19. Moment • Lightweight date library • Parse, validate and manipulate dates • Leverage this on any client side projects • moment(publishDate).format("MMMM DD/YY")

  20. DemoMoment.js

  21. Local Storage • You shouldn’t be thinking about cookies anymore • Local storage is an HTML 5 technology that’s been available since IE8 • Enables us to achieve: • A lot of storage space • On the client • That persists beyond a page refresh • And isn’t transmitted to the server

  22. DemoLocal Storage

  23. Tips, Tricks & Debugging • Web performance tools/timers • Firefox 3D view • Responsive Frameworks in SharePoint • Console.log, Console.error • Using Chrome Console

  24. Resources • MSDN API Index • Development Overview

  25. Questions & Answers {Something to say?}

  26. Thanks to Our Sponsors

  27. Special Thanks • SharePoint Training Courses • http://www.neweratechnology.com/courses/sharepoint.aspx CalSPUG Calgary SharePoint User Group

  28. Housekeeping • Join us for SharePint • Time: 4:15 PM – 6:00 PM • Location: TBD

More Related