Our team is developing a content-heavy SharePoint site, which needs caching of some content on the client side for fast navigation and page loading. Initially, we’ve tried useCaching() with localStorage-PnPStorgareWrapper, however, this allows us to store a maximum of 10Mb (varies with browser) data per domain/host. Due to this limitation, PnPStorageWrapper is throwing a ‘storage quota exceeded’ error if the localStorage limit is exceeded for the domain. So, I’ve decided to create an indexedDB caching wrapper for the PnPJS, to overcome this storage quota error and publish it to npm.

I would like to introduce @simpletech/pnp-idb-cache package, a library that helps you to use indexedDB as cache storage on your Sharepoint sites. It can be installed via npm or yarn using the following command,

yarn add @simpletech/pnp-idb-cache

import { IDBCaching } from "@simpletech/pnp-idb-cache";

function getItems() {
    sp = spfi().using(SPFx(this.context));

    // get all the items from a list
    sp.web.lists
      // go with default cache params and expiry(24 hours) function
      .using(IDBCaching())
      .getByTitle("someListNameInTheSPSite")
      .items()
      .then(
        (items) => {
          console.log("data fetch completed", items);
        },
        () => {
          console.log("data fetch failed");
        }
      );

  }

Key features:

• It allows us to add indexedDB as cache storage
• Only supports browsers (NodeJS — not supported).
• Deletes expired items
• Customizable cache expiry, cache key functions & DB parameters

Links :

https://github.com/nithincvpoyyil/PnPIDBCache

https://www.npmjs.com/package/@simpletech/pnp-idb-cache

As always, I welcome your feedback, suggestions, and comments.

In our create-react-app based application, we are using several SVG icons with different gradients and colours, and importing SVG file as React Components.

We have a collection of SVG files and build an Icon component system. After going through many dev sites, we have decided to go with SVG sprite approach by importing symbol definitions using <use> tag and ‘xlink:href’ (deprecated as of now) OR ‘href’ attributes.

<!-- Sprite SVG File having gradient and icon definitions -->

<svg xmlns="http://www.w3.org/2000/svg">  
  
<defs>    
  <linearGradient id="app-gradient-default">   
    <stop offset="5%"  stop-color="gold" />
    <stop offset="95%" stop-color="red" />   
  </linearGradient> 
</defs>

<symbol id="delete-icon" viewBox="0 0 32 32">    
    <!-- <path>s and whatever other shapes in here -->  
</symbol>  
  
<symbol id="save-icon" viewBox="0 0 32 32">    
   <!-- <tilte>, <decription>, <path>s here -->  
</symbol>
</svg>

The `Problem` with IE11 and SVGX

Everything was perfect until the client asked for IE11 support, so we have decided to go with an excellent polyfill developed by Icomoon team called svgx. But, we have observed that in IE11, svgx using ajax call to load SVG file to the DOM. And we don't like to add 1 more polyfill + 1 more Ajax call.

Then, we have changed our approach slightly as below,

1. Render the SVG Sprite file as the first component in the application.
2. Use these symbol and gradient definitions from the sprite component to building the Icon components for the app.

Thus, we can get rid of svgx polyfill because there is no external SVG file loaded.

App Component

Icon Component

Pros

1. It enables the reuse of symbol and gradient definitions
2. Fast loading
3. No polyfills
4. No extra loading of components
5. Scalable & easy to maintain

Cons

1. More codes
2. Increase in the bundle size depends on your sprite file component size.

Thanks for reading, and please share your thoughts.

Before I start, I want to thank the Angular team for providing a very good tool which saves a lot of time on every new project..❤️ Also, Please have a look into this excellent article by Tomas Trajan for the best practices and pro-tips in angular

What are we going to learn

1. Adding global styles, variables, and media query mixin
2. Getting all configs before app initialization
3. Skipping HTTP interceptor for HTTP calls
4. Setting up JSON Server for testing
5. Adding compodoc for document generation

1. Adding global styles and variables

It is a best practise to keep a global file with all your SASS variables and mixins etc in the project. And instead of importing this global file in each components, we can use ‘includePaths’ of ‘stylePreprocessorOptions’ config in angular.json to define a global path as shown below.

If you like to add bootstrap like simple media queries in your project, this code snippet will be much helpful.

2. Getting configs/settings before app initialisation

This is a common scenario in app development. While initialising the application, it may need to fetch the initial configurations like API constants or 3rd party service tokens from server. In order to achieve this, angular provides an injection token called ‘APP_INITIALISER’ in @angular/core. A function that will be executed when app is initialised.

As described below, keeping it in a separate module will be better in design perspective.

a) Create a config loader module and import it in main app module

b) Create an angular service class to fetch the config from server

c) Create factory functions which will be called by the config loader module on app initialisation. Use getters to get the value from services.

For more detailed information, please see this article by Rich

3. Skipping HTTP Interceptor

Problem: Injected interceptor in the app module is intercepting all the HTTP calls from the app. But I want to intercept the calls only in a particular module or want to skip the interception in a particular scenario.

Solution for above scenario can be done in two ways,

a) Adding a header in the request and based on this header identify the requests to skip.

b) Use HTTPClient by passing HttpBackend handler.

By injecting http backend handler in HttpClient will make http client to dispatch all the requests directly to the backend, without going through the interceptor chain, so that all HTTP calls will be skipped. (I believe, this is the easiest and cleaner way of getting this work done)

4. Setting up JSON Server for testing

This is helpful when we want to simulate a backend REST service to deliver some data in JSON format to the front-end application and make sure everything is working as expected.

We can use JSON Server package which will help us to setup Restful CRUD operations very fast. To integrate this with angular cli app, we need to create JSON server and add proxy configs as below,

a) Create a JSON server and data.json file

b) Create a proxy config file and pass as an argument in ng serve

c) Use ‘concurrently’ for running cli commands & JSON server together. Create mock-server, dev-proxy and dev scripts in package.json as below. concurrently used to run multiple npm scripts together.

// package.json
......
"scripts": {
  "mock-server": "node ./src/json-server/server.js",
  "dev-proxy": "ng serve --proxy-config proxy.conf.json",
  "dev": "concurrently --kill-others \"npm run mock-server\" 
           \"npm run dev-proxy\" "

}
.....

5. Setup compodoc for documentation

This tool helps you to generate the documentation of your angular project with in seconds.

// package.json
......
"scripts": {
  "doc": "./node_modules/.bin/compodoc -p src/tsconfig.app.json"
}
.....

Full source code is available in this repository. Enjoy Coding !!!!!!