1. Getting Started with JavaScript Libraries for Office 365 Tim Ferro @BucksCoJs July 6 th, 2016

2. Office 365 / SharePoint Implementations * Upgrades Hybrid * Portals Workflows * Search Data Analytics Visualization * Warehouse Big Data * SQL Server Tableau Cloud Enterprise Transformation Hybrid * Platform Services Mobile * Security Application Integration Digital Marketing Internet Sites * CMS eCommerce * Sitecore Transform your business with RDA! rdacorp.com | 888 441-1278 | marketing@rdacorp.com

3. © 2016 RDA Corporation. All rights reserved. Tim Ferro Microsoft MVP: Visual Studio and Development Technologies Principal Architect at RDA Corporation Senior Software Engineer / SharePoint Specialist Author / Editor / Speaker / Blogger / Tweeter 12 Years Engineering Software Solutions 9 Years Developing Solutions for SharePoint ferro@rdacorp.com www.timferro.com @timferro

4. © 2016 RDA Corporation. All rights reserved. Publications Technical EditorAuthor

5. © 2016 RDA Corporation. All rights reserved. Agenda Overview Office 365 JavaScript Options JavaScript Tips Must Have JavaScript Libraries Niche JavaScript Libraries JavaScript Snippets Demo SharePoint Framework (SPFx): What to Learn References

6. © 2016 RDA Corporation. All rights reserved. Overview Office 365 JavaScript Options Content Editor Web Part Script Editor Web Part SharePoint Designer or Custom Action to Register Code SSOM or JSOM CSS JavaScript Injection Client Side Code Injection SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady)

7. © 2016 RDA Corporation. All rights reserved. JavaScript Tips JavaScript !== jQuery Where to store them? CDN vs Document Library vs 15 Hive Enable Blob Cache Use a Rich Editor: Visual Studio or Visual Studio Code Organize your files in folders Learn non-SharePoint JavaScript Multiple SharePoint Data Access Options JSOM, SPServices, REST, SOAP, DOM Minimal Download Strategy (MDS) Compliant Code

8. © 2016 RDA Corporation. All rights reserved. Must Have JavaScript Libraries jQuery (http://jquery.com/)http://jquery.com/ jQueryUI (http://jqueryui.com/)http://jqueryui.com/ Office UI Fabric (http://dev.office.com/fabric)http://dev.office.com/fabric SPServices (http://spservices.codeplex.com/)http://spservices.codeplex.com/ DataTables (http://www.datatables.net/)http://www.datatables.net/ jqPlot (http://www.jqplot.com/)http://www.jqplot.com/ ADAL.js (https://github.com/AzureAD/azure-activedirectory-library-for-js)https://github.com/AzureAD/azure-activedirectory-library-for-js

9. © 2016 RDA Corporation. All rights reserved. JavaScript Library: jQuery/jQueryUI jQuery (http://jquery.com/)http://jquery.com/ jQueryUI (http://jqueryui.com/)http://jqueryui.com/

10. © 2016 RDA Corporation. All rights reserved. JavaScript Library: SPServices SPServices (http://spservices.codeplex.com/)http://spservices.codeplex.com/

11. © 2016 RDA Corporation. All rights reserved. JavaScript Library: DataTables DataTables (http://www.datatables.net/)http://www.datatables.net/

12. © 2016 RDA Corporation. All rights reserved. JavaScript Library: jqPlot jqPlot (http://www.jqplot.com/)http://www.jqplot.com/

13. © 2016 RDA Corporation. All rights reserved. JavaScript Library: Active Directory Authentication Library (ADAL) for JavaScript ADAL.js (https://github.com/AzureAD/azure-activedirectory-library-for-js)https://github.com/AzureAD/azure-activedirectory-library-for-js MSAL.js (coming soon)

14. © 2016 RDA Corporation. All rights reserved. Niche JavaScript Libraries Bootstrap (http://getbootstrap.com/)http://getbootstrap.com/ Moment.js (http://momentjs.com/)http://momentjs.com/

15. © 2016 RDA Corporation. All rights reserved. JavaScript Snippets Get InternalName for a SharePoint List Column Registering JavaScript on All Pages in Office 365

16. © 2016 RDA Corporation. All rights reserved. JavaScript Snippet: Get SharePoint Column Internal Name http://sympmarc.com/2015/01/27/get-the-internalname-for-a-sharepoint-list-column/

17. © 2016 RDA Corporation. All rights reserved. JavaScript Snippet: JavaScript on all Pages Registering JavaScript on All Pages in Office 365

18. © 2016 RDA Corporation. All rights reserved. Demo: JavaScript in Office 365 Office 365 Developer Tenant JavaScript jQuery SPServices jqPlot

20. Tooling Node.js Yeoman Gulp TypeScript Visual Studio (Code) Frameworks – Choose yours React Angular.js Knockout Etc.

21. IIS Express VS Project  New  C#

22. https://nodejs.org/en/

23. https://www.npmjs.com/

24. http://yeoman.io

25. http://gulpjs.com/

26. https://www.typescriptlang.org/

27. http://dev.office.com/fabric

29. © 2016 RDA Corporation. All rights reserved. SharePoint Framework Overview Links Watch These Videos 1. https://channel9.msdn.com/Shows/Mechanics/Open-and-Connected-Platform-The- SharePoint-Framework https://channel9.msdn.com/Shows/Mechanics/Open-and-Connected-Platform-The- SharePoint-Framework 2. https://channel9.msdn.com/blogs/OfficeDevPnP/PnP-Web-Cast-Getting-started-with- SharePoint-Framework https://channel9.msdn.com/blogs/OfficeDevPnP/PnP-Web-Cast-Getting-started-with- SharePoint-Framework 3. https://channel9.msdn.com/blogs/OfficeDevPnP/PnP-Web-Cast-Preparing-for-SharePoint- Framework-What-should-I-learn https://channel9.msdn.com/blogs/OfficeDevPnP/PnP-Web-Cast-Preparing-for-SharePoint- Framework-What-should-I-learn Listen to These Podcasts 1. https://blogs.office.com/2016/05/05/episode-092-on-the-future-of-sharepoint-office-365- developer-podcast/ https://blogs.office.com/2016/05/05/episode-092-on-the-future-of-sharepoint-office-365- developer-podcast/ 2. https://blogs.office.com/2016/05/19/episode-093-on-pnp-and-the-sharepoint-framework- office-365-developer-podcast/ https://blogs.office.com/2016/05/19/episode-093-on-pnp-and-the-sharepoint-framework- office-365-developer-podcast/

30. © 2016 RDA Corporation. All rights reserved. SharePoint Framework Overview Links Read These Blogs 1. https://blogs.office.com/2016/05/04/the-sharepoint-framework-an-open-and- connected-platform/ https://blogs.office.com/2016/05/04/the-sharepoint-framework-an-open-and- connected-platform/ 2. http://www.sharepointnutsandbolts.com/2016/05/the-new-sharepoint-development- model.html http://www.sharepointnutsandbolts.com/2016/05/the-new-sharepoint-development- model.html 3. http://www.binarywave.com/blogs/eshupps/Lists/Posts/Post.aspx?ID=311 http://www.binarywave.com/blogs/eshupps/Lists/Posts/Post.aspx?ID=311 4. http://www.wictorwilen.se/web-parts-are-back-at-the-center-of-sharepoint- development http://www.wictorwilen.se/web-parts-are-back-at-the-center-of-sharepoint- development

31. © 2016 RDA Corporation. All rights reserved. SharePoint Framework Overview Links And These Blogs Too 5. https://blogs.technet.microsoft.com/stefan_gossner/2016/05/04/sharepoint- developer-announcement-the-sharepoint-framework-an-open-and-connected- platform/ https://blogs.technet.microsoft.com/stefan_gossner/2016/05/04/sharepoint- developer-announcement-the-sharepoint-framework-an-open-and-connected- platform/ 6. https://content.sharepointeurope.com/blog/2016/5/be-prepared-for-the-sharepoint- framework https://content.sharepointeurope.com/blog/2016/5/be-prepared-for-the-sharepoint- framework 7. https://blog.mastykarz.nl/everything-about-sharepoint-framework/ https://blog.mastykarz.nl/everything-about-sharepoint-framework/ 8. https://blog.mastykarz.nl/preparing-sharepoint-framework-what-learn/ https://blog.mastykarz.nl/preparing-sharepoint-framework-what-learn/

33. © 2016 RDA Corporation. All rights reserved. Tim Ferro Microsoft MVP: Visual Studio and Development Technologies Principal Architect at RDA Corporation Senior Software Engineer / SharePoint Specialist Author / Editor / Speaker / Blogger / Tweeter 12 Years Engineering Software Solutions 9 Years Developing Solutions for SharePoint ferro@rdacorp.com www.timferro.com @timferro

34. © 2016 RDA Corporation. All rights reserved. References http://www.rdacorp.com/2014/12/javascript-libraries-net-sharepoint-developers/ http://www.timferro.com/wordpress/archives/806 http://www.c-sharpcorner.com/UploadFile/81a718/7-jquery-code-snippets-every-web-developer- must-have/ http://www.c-sharpcorner.com/UploadFile/81a718/7-jquery-code-snippets-every-web-developer- must-have/ http://blogs.msmvps.com/windsor/2014/07/28/session-recording-javascript-and-jquery-for- sharepoint-developers/ http://blogs.msmvps.com/windsor/2014/07/28/session-recording-javascript-and-jquery-for- sharepoint-developers/ http://www.timferro.com/wordpress/archives/841 https://github.com/vball525/o365 http://www.rdacorp.com/2015/01/tips-tricks-building-javascript-applications-sharepoint/ https://groups.google.com/forum/#!topic/DotNetDevelopment/QC0sC-bJBMU http://www.spcaf.com/blog/sharepoint-javascript-context-dev-part-1/ http://sympmarc.com/2015/01/27/get-the-internalname-for-a-sharepoint-list-column/ http://blogs.msmvps.com/windsor/2015/02/13/reduce-code-need-for-rest-api-calls-with- sprestrepository/ http://blogs.msmvps.com/windsor/2015/02/13/reduce-code-need-for-rest-api-calls-with- sprestrepository/