Example app image

Getting Productive with Our Example App in 2020

What's New?

It has been over a year since we last provided an overview of the updates and changes made to the Scrivito Example App. With over 100 merged pull requests, we have made many changes and improvements. It is time, once again, to provide an overview so follow along as we summarize the changes over the last year. If you have not kept your Example-App-based project up to date, consider rebasing your changes on the current master or reviewing the closed pull requests to see the full details of what we changed, incrementally.

Chunking Styles

Performance of the Example App has been paramount in our development. With this in mind, as well as making widgets and pages more modular, we have moved the styling CSS for most widgets from one big index.css file into its own file within the respective folder of the widget. This change will not only assist in making your projects more performant by more easily removing unused styles but also allows you to modify the look and feel of these widgets more efficiently.

Widget folgder with SCSS file

Cookies and GDPR Compliance

The included cookie consent component has undergone several iterations as the GDPR requirements were clarified and better documented. With the latest version of the cookie consent component, no tracking is initiated until users affirm their consent. This requirement is important to stay compliant, and surprisingly many third-party services begin tracking as soon as they are loaded. This further instigated us to switch out the YouTube video package and Unsplash images from previous versions. As most will customize their projects based on the Example App, be sure to check the services you integrated and add the ones that use tracking cookies to the the tracking.js file to stay compliant.

Cookie consent

Scrivito.extractText

With the inclusion of extractText in Scrivito 1.10.0, we were able to remove our own implementation and let Scrivito handle this, resulting in less code and removing some unneeded complexity. After all, your CMS should be able to provide an extract of the content you already provided without having to jump through extra steps.

const extractedText = Scrivito.extractText(obj);

Added Sample Validations

Content validations were added as part of Scrivito SDK 1.7.0 and further refined the feature as part of 1.9.0. By including some simple and typical validations in the Example App, developers can see how easy and flexible it is to add validations to your project in a real-life scenario. We liked them so much that we added quite a few, but upon further discussion and customer feedback, we scaled back the number of validations we included. So now, it just has the basics, but remember that Scrivito is flexible and extensible so feel free to provide the validations that work for your team.

Simplified CSP Headers

Let’s be honest, Content Security Policies are not easy. But never the less, they are important to the security of your website. Implementing CSP headers in a project should be the least of your worries as organizing the right policies is hard enough. So we reduced it to a JSON format, which should make it easier to understand the structure of the header and to modify it. More information can be found in the tutorial.

In-Place Date Editing

Previously, editing date attributes required editors to go to the widget or page properties to make the change. Now, just like editing text, it can be done in place, right where it is on the website.

In place date editing

Smaller CSS Footprint

By simply commenting out unused CSS modules we reduced the size of the package the client needs to download. Read: more performance! We just commented the unused pieces out so if there is a Bootstrap feature you expect to work but it doesn’t, double check to make sure the module is not commented out.

Fingerprinting JS and Prerender Files

Fingerprinting files ensures that the latest version of static files is always used. This facilitates better cache mechanisms and was put in place to facilitate power users’ implementations. Normally we would have saved a power user implementation feature for a tutorial but in this case, it is also a precursor to some new features and options we are working on. It is also a JavaScript best practice and we are all about including those.

React’s Hydrate and Scrivito.updateContent

In August of last year, once React’s hydrate was stable, we added it to the Example App to better render the application. Previously, with a prerendered application, it would re-render after loading, causing a flicker and not a great user experience. With React .hydrate, the React application transitions seamlessly from the prerendered version to the dynamic version. In addition, for covering rapid changes to published content, Scrivito.updateContent was added. Called in the app’s startup phase after React .hydrate, this function updates the content to prerender, causing the first meaningful paint to be in sync with the published content almost instantly.

Minor Bug Fixes

We are all fallible and make mistakes, the key is to correct and move on. The following pull requests can be referenced for the fixes we implemented to correct some minor bugs.

SchemaDotOrg bugfix

- Dedicated RedirectToUi obj

CSP bugfix

In addition, we are continually evaluating and updating npm packages used in the project as well as the latest versions of the Scrivito SDK. As the Example App is open source, you can see all the changes we made any time by perusing the closed pull requests. If you have a feature or improvement you would like to see or share, please let us know, or send a pull request.