Monthly Archives: September 2016

Yammer integrations in ReactJS

By | Front-end, Javascript, React.js, Redux, Webpack, Yammer | No Comments

react_yammer

I am writing this blog while I am working on a project for our client’s intranet website. The client requires the website has the ability to share, like and write comments in the website through a social media channel called Yammer (https://www.yammer.com/) which is created by Microsoft.

I have never used or even heard about Yammer before. By the first look at the user interface and functionalities it provides, I thought it is just a Facebook-like product for enterprise to use internally.

The main framework for the frontend I use for this project is React + Redux which is built with Babel, Webpack and ES6. The website itself is nothing magic but a painful to deal with a lot of security staff (VPN, Azure authentication etc) which takes me a lot of time and I am not going to discuss them here today.

Back to Yammer, when I looked at the documentation(https://developer.yammer.com/docs), I found it is really poorly written with only a few example code that you can follow, compared with Facebook and Twitter. There is no official git repository available either. It made me hard to work on, someone who has no experience working with Yammer before, especially in ReactJS.

To integrate with Yammer, there are two possible ways that you can enable its features in your client side: REST API and Javascript embeded widget. By read through the documentations, I found both have pros and cons:

Yammer REST API

Pros:
  • Be able to fully customize UI
  • Can do like, comments and other functions which are not available in embedded javascript widget
  • Easy to code with frontend framework
Cons:
  • Time consuming. To make it works properly, for instance, commenting, you are almost rebuilding the new widget.
  • No ‘share’ endpoint available in REST API

Yammer Embedded Widget

Pros:
  • Very easy to use in the current code base and not much work to do
  • Good integrations for share and commenting feature
Cons:
  • Documents are poor with no explanation on each params of the widgets
  • Use iframe for ‘like’
  • No ‘number of likes’ available in the ‘like’ widget
  • Can’t change the look of the ‘like’ button easily
  • No official NPM module currently available from Microsoft Yammer team’s answer

By comparing the approaches above, our team made the decision to use them as a combination:

  • Use REST API for ‘like’ feature due to the lack of support by Yammer widget
  • Use Embedded widget for ‘share’ and ‘commenting’ features to save time and make sure the project can be done within the tight timeframe.

However, as I have said, there is no official NPM modules available for Yammer so far. It made me feel really frustrated to use the library in React component. I tried different ways to import the library from Webpack but none of them work. For your interest, this is the one I have tried https://www.npmjs.com/package/script-loader.

Finally, I found a solution which is inspired by Ambroos. The solution is to use a library which can easily load an external library into ReactJS component and finally solve my problem.

The library is called scriptjs – https://www.npmjs.com/package/scriptjs and it is really easy it use as follows in my code:

import $scriptjs from 'scriptjs';
componentDidUpdate() {
//script loader
let _self = this;
setTimeout(function(){
$scriptjs('https://c64.assets-yammer.com/assets/platform_embed.js', function(){
$('#embed-feed').remove();
window.yam.connect.embedFeed(YammerHelper.loadComments(_self.props.myNewsStory.href));
});
}, 1000);
}

In this way, you can refer the global yam object with ‘window.yam’ and call its functions in the callback. This code above does load the Yammer feeds widget every time the current component gets updated. Of course, like the other NPM modules, you need to run ‘npm install scriptjs’ first before you can use it in your ReactJS component.

I don’t think this is best practice to use Yammer library in ReactJS, but at least it can solve my problem, pain in the easiest way without putting too much effort in it and change much of my code.