SPChat Transcript - SharePoint JavaScript, Development and Governance (Sponsored by SPCAF)

Thank you to SPCAF , the SharePoint code analyzer and assistant, for sponsoring today's SPChat. Learn more at http://www.spcaf.com

**** STARTING SPCHAT WITH Hugh Wood**** 

• Hugh Wood

  Hi guys

• MD QAIS AKHTAR

  Great

• Me

  Hugh thank you again for joining us!. If you wouldn't mind, could you please give a brief introduction on the topic and about yourself?

• Hugh Wood

  I am 34 years old and the lead developer at Rencore AB, currently working on version 6 of SPCAF. (The sponsors of this SPChat). I have been a Microsoft Stack Developer since 2000, and I have focused mainly on web based and SQL technologies. My expert areas are SharePoint, Information Architecture

• , Compiler Theory, Applied Mathematics and Mechanics, .Net and of Course JavaScript.

• Today I will be taking questions on two areas which are a part of my every day life with SPCaf, and these are Code Governance and JavaScript

• So if you are unsure about an approach or have anything general to ask go ahead

• Matt I'm ready

• First question please

• David Shumate

  Hi Hugh, do you have any comment on Typescript and it's integration with SharePoint?

• Hugh Wood

  Answering David Shumate thank you for your question

• TypeScript is a transpiled language. This means it is one language that is transformed into another language in order to supply a standard that isn't yet in place, in this case the new version of JavaScript coming out this summer Version 6

• TypeScript in SharePoint indeed does have its place and over 60% of the JavaScript in SharePoint was written in another transpiled language called Script#

• So using TypeScript allows you to follow this process

• What this gives you is strongly typed variables and greater peace of mind in your code

• 13:06
• Hugh Wood

  However there is a learning curve, and it is a business decision to put the ALM processes in place for them to work properly in such a way. Some developers won't understand the language, and the compiled output may be confusing to read until you get used to it

• 13:07
• Hugh Wood

  So it can create a safety barrier against poorer code quality, but it can also introduce cost and time into a project. With the new app model and angular JS jumping on board with TypeScript, and it has been in MVC for some time, you may already have this skill set which will actually mean project

• cost is then reduced instead

• Weigh up the pros and cons with any new technology before you adopt

• Is that okay David?

• 13:09
• Me

  Hello David?

• Hugh Wood

  I think David saw I was typing a few lines and went and made a coffee

• Me

  5 second rule....

• Hugh Wood

  So Next Question

• Me

  LOL

• Lance Taylor

  So, our company uses SP2007 today an we are currently migrating to SP2013. What is the best practice for implementing Javsacript webparts or where to locate any code libraries so the migration from one version to the next goes smoothly. (i.e. in 2007 we used CWEP for code, 2013 has HTML java part).

• Hugh Wood

  Hi Lance are you moving to on premises or cloud SharePoint?

• David Shumate

  yup, that works, i was getting a coffee, hugh thanks for that great insight

• Lance Taylor

  Our own onsite farm.

• Hugh Wood

  Okay great

• Lance Taylor

  Quest migration tool was not picking up some folders I used in SP Designer (i.e. /includes)

• Hugh Wood

  JavaScript file hosting should be done in site assets, however on premises you may opt for the layouts folder deployment instead

• but there are clear advantages to site assets that will reduce downtime should disaster occur so this would be my recommendation straight away

• the exact pattern of where your javascript lies in the main farm also depends if you are using apps or webparts

• Lance Taylor

  All webarts.

• Hugh Wood

  webparts will most likely be formatted by a js file added through the script link attribute, and linked from site assets

• this will also allow files to be cached and increase page speed load times

• Lance Taylor

  Good to know.

• Hugh Wood

  No problem, have I answered okay for you?

• Lance Taylor

  Yes you have been helpful, thanks Hugh.

• Hugh Wood

  Awesome next question

• Brad Shannon

  What is your preferred method for custom list forms, especially in O365? Do you prefer to add JS to an existing form page via a web part?

• Hugh Wood

  Hi brad have you seen Martin Hatches recent entry into Office PnP ?

• He has samples for this very thing

• Brad Shannon

  I have not

• Hugh Wood

  and being PnP it is recommended best practice on how to use js files with script link for all types of forms and lists

• it's really great stuff and was released Tuesday

• Awesome: Next question

• Jasjit Chopra

  Can you explain how one can implement javascript porxy so client always gets the updated file instead of local cache?

• Hugh Wood

  do you just want to bypass the cache Jasjit?

• Jasjit Chopra

  not always - just when we update js files

• 13:17
• Hugh Wood

  The client controls the cache mostly in this case

• so it's the call to the file which needs to be altered

• Jasjit Chopra

  Jeremy Thake suggested using some form of proxy to avoid this situation where that proxy file will in return point the right version of js file you want the client to use

• Hugh Wood

  you can do this by appending a query string value to the end of the request url

• Jasjit Chopra

  ok

• 13:19
• Hugh Wood

  I will dig out the page for the js proxy pattern for you after this jasjit

• but it has pitfalls, I cant find it at the moment

• Jasjit Chopra

  ok thanks

• Hugh Wood

  Next question

• Shafqat Balouch

  What is SharePoint Code Analysis Framework (SPCAF)?

• 13:21
• Hugh Wood

  SPCAF is a static code analysis tool, that has the capability of being integrated into pretty much any build server. It also has powershell, command line and a stand alone application and will scan WSPs and APPs for SharePoint best practices and known major issues

• you can discover more at www.spcaf.com

• It's the only tool of its kind for SharePoint

• Shafqat Balouch

  WSPs for all SharePoint versions?

• Hugh Wood

  Yes

• and the new version introduces a bunch of new CSOM rules as well

• Shafqat Balouch

  Great, Thank You!

• Hugh Wood

  No problem

• Next question

• Fernando Hunth

  do you know if all those best practices are present on nuget? do you use nuget?

• Paul Choquette

  Can you describe your dev environment for working with JavaScript, particularly with SP/O365? What tools and extensions do you prefer to use?

• 13:25
• Hugh Wood

  @fernando We have SPCAF on nugethttp://ift.tt/1EI3oS4 it's an SDK though for created your own custom rules, you still require a license

• is there anything in particular you had in mind Fernando?

• Fernando Hunth

  Great, good to know. I'll explore it,thanks

• Hugh Wood

  @paul dev environments

• Fernando Hunth

  Just have only one place with all best practices

• Hugh Wood

  We have our documentation on the website for the tool, there is a lot to go through

• But the tool automates these checks to ensure they are in place

• http://ift.tt/1FgNlye

• dev environments

• Where you dev your JS depends on the project

• You may only be writing a single file to be deployed for a POC with jslink so I would be using IE 11 and FireFox Developer Edition with Visual Studio (For intellisense)

• I may then also duck into Notepad++ for small and quick edits

• For JavaScript you can write in what you need to, what you find quickest and most comfortable

• However having an integrated analysis tool really does help in avoiding critical errors especially security vulnerabilities that may occur

• This is why I always lean towards Visual Studio as it has the largest array of options for analysis, development and deployment from all IDEs

• When debugging the profiler in IE11 is essential

• It will tell you where you have gone wrong just be looking at the performance of the code

• it also has one of the best network views and emulation modes for standard enterprise browsers

• FireFox comes in handy because it allows for different types of debugging and views that aren't available in IE, and also allows you to quickly modify JavaScript to try a patch in realtime without having to actually redeploy

• Does this answer your question Paul?

• Paul Choquette

  Sort of. Do you use any extensions like Web Essentials, etc?

• Hugh Wood

  Firefox developer edition has all the tooling you might need built in

• it even has an integrated WebIDE for you to make more advanced edits

• also responsive and 3d layer view for you to check what is happening in the DOM visually

• it's quite useful

• Plus the blue firefox logo it comes with is pretty cool ;)

• Shafqat Balouch

  :) Nice

• Paul Choquette

  Got it. I may give FF another go as Chrome's memory usage is giving me a headache. :)

• Hugh Wood

  Awesome next question

• Dale Howard

  with regard to SPO, would you have any comment on the last few Javascript news worthy announcments, that look like its going to be easier to run single page apps entirely client side? like CORS integration in the O365 API, and ADAL JS with Oauth2. Anything else you know of on the horizon?

• Frank H

  I´m a big fan of making javascript apps for a lot of customization in SharePoint after the introduction of REST api. Do you think MS will improve the API for future versions, allowing us to further utilize an even more powerfull REST api, or are we still stuck with JSOM in some cases? Predictions?

• Hugh Wood

  SPO is try to fix the SharePoint hosted apps by including things like CORS that we have been asking for, for a long time on the apis

• this means we will be able to write small and quick SPA apps that inject into the page with minimal code

• There are still issues which the dev team are working on, and some MVPs have been quite active in helping the dev team fix these issues

• I think the story is almost complete and we will see true in page add-in/apps in SPO very soon

• Is that okay Dale?

• Dale Howard

  yep thanks Hugh

• Hugh Wood

  @frank they are always listening to feedback

• if we go on office voice and shout that we need something then they will supply it

• especially as we now have batching, and more endpoints and a better odata schema to play with

• so I think if we need it and shout, we will get what we need

• if JSOM is fine as it is for the use case then it won't get touched

• That okay Frank?

• Frank H

  thanks, Hugh :)

• Hugh Wood

  Next question

• Paul Choquette

  What patterns would you say every developer should know when working with JavaScript?

• Me

  Hi Hugh, as libraries like SPServices mature, are there any new/obscure SP JavaScript libraries you would recommend the community explore? Although I might have heard SPServices is updating to work with REST or something along those lines.

• Ryan Yates

  For someone that has almost no experience with any JavaScript and use in SharePoint where would you suggest to start - any good online courses or suggestions to get a real feel for what I could be potentially unleashing into my world and suggestive variant to start out with?

• Hugh Wood

  @paul there is 1 pattern if you are using JavaScript you need to know and that is the module pattern, another pattern that is highly useful is the builder pattern

• with these two patterns you can create pretty much anything in in javascript

• another pattern that does come in useful is the factory pattern

• http://ift.tt/oMKJUn

• this is a great resource for understanding what I just said!

• @matt j

• As SPServices matures Marc Anderson recommends moving and migrating to rest

• and I totally agree

• now we have a complete model with client side rendering and rest we no longer really need external data libraries to wrap things up neatly

• However I do recommend in keeping a framework to reduce repeating code fragments for any consultancy or team that run multiple projects, it really helps reduce risk and increases code quality

• is that okay matt?

• Me

  yes, so there aren't really any external things you would recommend

• Hugh Wood

  not at all

• Me

  just use what MSFT is recommending going forward

• ok

• thanks

• Hugh Wood

  we have a story lets use it because it is complete

• @ryan yes and it would be the You don't know JS books by Kyle Simpsonhttp://ift.tt/1EI3p8r get them read them

• even if you know JS get them read them

• past that you will start finding the debug.js files in sharepoint

• and reading them without problems

• and this is your best resource on learning how sharepoint really works

• once you have that it doesnt matter what JS you need to write, you will find it quite straight forward and your understanding of sharepoint in general will be increased

• @ryan is that okay?

• Ryan Yates

  Yes Brill Thanks Hugh :-)

• Hugh Wood

  Next question

• Mark Wilson

  In one of your recent blog posts you talk about using in built SP libraries instead of JQuery. Seems like quite a learning curve. Do you actually do that yourself and never use JQuery?

• Hugh Wood

  If I need to use jquery, ie I am using something that relies on it I will use jquery

• most of the time you only load jquery for one of two things

• selectors

• or ajax

• both are very easy to learn in native javascript

• and if you need selectors jquery uses sizzle so you can just use sizzle.js

• Basically I try and avoid bloating my sharepoint load times as much as possible, I want the end user to have a fast experience

• as I also said in the blog post, we live in a world which is consumed digitally by people who have a goldfish attention span

• if it isn't perceived as near instant it is usually cast aside

• So the short answer is most of the time no

• But when I do, I ensure it is optimised for the end user and that I really have to have it

• The learning curve for built in js

• Mark Wilson

  I guess personally it is a balance of trying to learn so many things at once. New frameworks, new version of MVC, node.js whatever it is. Query is fairly portable and a re-usable skill. So I'm trying to balance that against using the in built SP libraries

• Hugh Wood

  Well if you know JS, and your browser functionality it is quite easy, if you don't it will overwhelm you

• Mark Wilson

  but thanks

• Hugh Wood

  in my opinion better off learning native js first, this won't go anywhere

• Next question

• Paul Choquette

  Who do you follow on social media in the JavaScript community?

• Hugh Wood

  I have over 200 people in my followed list that are JavaScript

• However useful are JavaScriptDigest - a js retweet bot, this makes sure you don't miss anything

• Paul Choquette

  so, Top 3 or 5? :D

• Hugh Wood

  getify - kyle simpson

• and paulirish - google chrome evangelist and javascript nerd

• there are others like resig

• who are awesome to follow

• but they don't tweet as often

• Next question

• 13:54
• Deanna Schneider

  How do you typically handle dev-test-prod scenarios with your client-side SharePoint development?

• 13:55
• Hugh Wood

  Hi Deanna, testing and alm governance are key but also costly

• so each point has to be taken with a balance of risk and cost

• sometimes risk is so high the cost doesnt matter

• but it's also important for the person who evaluates this to understand what the real risks are, so it best for you to plan this with more than one person, looking at governance, information architect, project management and development teams

• they then need to look over how the code is designed

• as with any development you need to decide if you are doing test driven development, where tests (unit tests or test scripts) are written first

• or if you can't afford this and perform smoke testing and write test scripts afterwards

• Code analysis tools will help in testing, identifying the bugs before they go to test, and showing how much requires testing through key metrics such as Cyclomatic Complexity

• this will prevent an overhead of cost and time at test

• deployment is then the next concern

• are you deploying in the newer app model

• are you deploying in wsps on premises

• Deanna Schneider

  We're still on 2010, so no.

• Hugh Wood

  so you are deploying directly into the farm via wsps

• Deanna Schneider

  No, mostly we're just doing customizations in the middle layer - so CEWP includes of JS files

• Hugh Wood

  for this then will be building their client side code and deploying it via wsps

• even with working with the content editor webpart, then deployment through wsps should be the way to go

• this allows you to have a standardised approach for deployment

• Deanna Schneider

  ok

• Hugh Wood

  so it is the same automated test proces dev -> test as it is to production

• this allows all the quality gates to be tested at dev

• and test becomes a production ready test and user acceptance and not overloading with issues

• this helps reduce overall project cost and time, and provide peace of mind when it comes to production deployment (Somewhat!)

• does this answer your question Deanna?

• Deanna Schneider

  Yes, thanks

• Me

  Just as FYI, we might want to wrap up this SPChat and have Hugh pick the winners since time has ran out. However, Hugh did you want to stay later and answer more questions after picking the winners?

• Laura Addiego

  where would you recommend loading your JQuery libraries? page / site / site collection / farm?

• Hugh Wood

  I will answer one more from Laura then

• Me

  ok

• Laura Addiego

  Thanks!

• Hugh Wood

  If you want to load jquery then site assets is the best place, however you can use the CDN Manager for 2013/365 which is an app in the Office Dev PnP samples on github that allows you to manage the deployment of external libraries directly from external CDNs into the environment

• Does this answer your question Laura?

• Laura Addiego

  so,

• Hugh Wood

  http://ift.tt/1EI3p8x <- cdn manager link

• Laura Addiego

  if you loaded in the assets

• belonging where

• Hugh Wood

  where you pick it up from is up to you, you can put it centrally in the root site collection and reference that if you wish

• Laura Addiego

  each one has its own assets folder

• Hugh Wood

  this will be easier to manager

• manage*

• Laura Addiego

  thanks!

• Hugh Wood

  no problem

• okay we are out of time

• BUT

• we have two winners to pick

• Me

  yes please pick the 2 best questions

• from today's SPChat

• Hugh Wood

  So I am going for Lance Taylor on his deployment question

• and Deanna Schneider with the last minute ALM question

• Me

  cool Lance & Deanna

• Paul Choquette

  congrats!

• Deanna Schneider

  Thanks!

• Me

  we will make sure we email the prizes to your email addresses on file here

• Deanna Schneider

  Sounds good.

• Me

  Anything else before you wrap up Hugh?

• Hugh Wood

  Congratulations guys you both get Amazon gift cards courtesy of SPCAF and a big thank you from myself and Matthias Einig the CEO of Rencore AB for attending

• Me

  like, where you are on social media, etc

• thank you SPCAF for sponsoring today!

• Hugh Wood

  You can email me questions at hugh.wood@rencore.se

• Beetlejuice

  thanks Hugh and Matthew

• Hugh Wood

  tweet and follow me @hughajwood

• and read my blog athttp://blog.spcaf.com

• Me

  great! Thank you for coming today, we really appreciate it!

• Hemant Patel

  Thanks

• Shafqat Balouch

  Thanks

• dave magner

  Thanks

• Dale Howard

  thanks guys

• Laura Addiego

  thanks!

• Pradip Rathod

  Thanks!

by Matthew J Bailey via Everyone's Blog Posts - SharePoint Community