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
- 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.
Now I will go into deep analysis, analysing behind the scene technical changes.
First some observations I have made
- 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
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
a reference to require.js file
a script section with reuire.js configuration. This configuration takes 95% (130Kb of 136Kb) of the whole page and defines 31 modules.
Defines a global variable _spModuleLink
Defines _spPageContextInfo variable.
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.
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
The page is reloaded again loading page html as well as all the Office 365 data again.
A single call to /_api/web/GetList(‘[fusion_title of your document library]’)/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
New look data load
The same page statistics with 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.
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:
At the same custom actions with script block are not supported:
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.
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.
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
- Andrew Connell: Modern JSLink, Custom Actions and More coming to the SharePoint Framework
- MSDN: Customizing “modern” site pages
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