Technical Review SharePoint Document Library New Look -Welcome REST and Knockout js

Something very interesting we have discovered after analysing behind the scene technical changes from Microsoft for the document libraries New Look in SharePoint Online. Our SharePoint solution FlyView had a minor issue because of the latest change and we did this investigation while preparing the fix. Rightly the ‘New Look’ has created a lot of buzz in the developer and user community and there is already good analysis of the new features done from a user’s perspective. However in our analysis we took step further, one of FlyView team member performed an in-depth technical analysis of the changes and have summarised his findings in this blog post.

The New Look UI Differences

First, just for reference the difference in the look and feel.

Old Look

SharePoint Online Document Library Old Look

New Look

SharePoint Online document library new look

In summary,

  • The document library ribbon is now gone, replaced by a new action toolbar (but with very limited actions when compared with the previous one)
  • The new toolbar feels more responsive and snappy
  • Search is now built-in in the toolbar
  • A new grid view, showing the documents as tiles with thumbnail previews.
  • Entire folders now can be uploaded

So this is a brief summary of the changes, however I am more interested in how did they implement them and what architectural changes have been done behind the scene, so let’s get our hands dirty now.

Note: If you want to leave the new look click “Return to classic SharePoint” hyperlink at the bottom left corner.

Issues and Problems

The new document library look has caused some issues for the SharePoint users who had their site look and feel customised, we will see later the technical architectural changes causing this issue. Furthermore the out of the box library ribbon is gone, making it difficult to browse within  a document library and quickly access the setting options. This also caused some issues to our SharePoint Solution FlyView and we had to released a quick fix, thanks to FlyView’s technical design principle i.e. making minimal or almost no changes to SharePoint generated code.

Technical Analysis

Now I will go into deep analysis, analysing behind the scene technical changes.

First some observations I have made

Key Findings:

  • New look is built on KnockOutJS library
  • Uses SharePoint REST API to read SharePoint content and data (Previously the html page would be generated on the server and downloaded)
  • No Html is generated on the server, all the rendering is done in browser
  • Optimised Data download: On my site the test page
    • with old look would download approx. 7MB data
    • with new look it was 5MB
  • Is switched on by cookie splnu=1
  • Item limit is ignored, the view displays all the items, loads them in chunk of 30 as you scroll

The new look is not based on web forms and hence does not assume usage of any of master page.

Good bye JSOM

New look does not load any of standard SharePoint javascript API files including Client API

  • sp.js
  • sp.core.js
  • sp.runtime.js

It looks like MS is targeting REST service is a primary API.

Instead it uses KnockoutJS templates and makes calls to SharePoint REST services.

What it is made of

When the view is called it loads the content of the view file containing

  1. a reference to require.js file

  2. a script section with reuire.js configuration. This configuration takes 95% (130Kb of 136Kb) of the whole page and defines 31 modules.

  3. Defines a global variable _spModuleLink

  4. spmodulelinkDefines a global variable g_SPOffSwitches with a number of GUID valuesThe same GUID values are repeated in “killSwitches” field of _spPageContextInfo variable._SPOffSwitches

  5. Defines _spPageContextInfo variable.

Paging

Old look

A single call to webservice at /_layouts/15/inplview.aspx

Here we find a key difference, SharePoint is now loading content differently. It is no more the old styled aspx page. It is more on the lines of the page source/scripts pull the data and format it.

New look

Visually there is no paging, the view provides a continuous scrolling experience and all the data are loaded in chunks of 30

Opening a subfolder

Old look

The page is reloaded again loading page html as well as all the Office 365 data again.

New look

A single call to /_api/web/GetList(‘

‘)/RenderListDataAsStream REST service, data is retrieved and rendered.

Data Load – The default library view

Below is statistics on a fresh page load of my test page.

Old look data load

SharePoint Online data load

New look data load

The same page statistics with New Look

SharePoint new feature document library new look

What is left – Comparing the page source

The only thing left from the standard SharePoint API is a context variable _spPageContextInfo but its format is changed a bit to be JSON compliant.

Old look

NewLookData

New look

NewLookData2

Customisations – How to do them now?

Right now it’s not known how to customise the look because it does not support master page.

The only way to customise it so far is to use Custom Action with Script Source reference like that:

customactionnewlook

At the same custom actions with script block are not supported:

smeactionnotsupported

Update: Jul 16.

Microsoft has now disabled customisations in the New Look, they are enabling the bit by bit but custom actions are still disabled, we have to just wait, Microsoft has said they are working on it.

https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/13385364-allow-javascript-customization-and-css-branding-th

Update Aug 16

Microsoft has released the Developer’s Preview for the new SharePoint Framework, custom actions are still not there though, but it looks they are actively working to bring back the customisations to the New Look.

https://dev.office.com/blogs/sharepoint-framework-developer-preview-release

Update May 16

Finally there is light at the end of the tunnel!, Microsoft has announced the customization support is coming soon to the New Look. We are also waiting (im)patiently!. Read Andrew Connells’ blog for more

  1. Andrew Connell: Modern JSLink, Custom Actions and More coming to the SharePoint Framework
  2. MSDN: Customizing “modern” site pages

Conclusion

For developers this change brings some significant messages. Microsoft is now moving away from the way they had been generating and rendering content. They themselves are now following the SharePoint hosted model. It also means we should expect more changes on these lines coming soon. This is a good news as it will make SharePoint speedy and snappy while reducing the size of the data download. However, the solutions and features implemented by hooking up the code with the SharePoint generated page source will required to be re-written or modified.

You can also try FlyView for SharePoint, a free chrome web browser plugin to explore the document library with new look enabled.

And there is the place where SharePoint New Look issues have been reported, have a look..

Let us know your thoughts…

PS: Taking these hand-written notes was quicker than writing this blog 🙂 but hope it will help the fellow SharePoint developers

New SharePoint Doc Library Look SP online Old Look