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.
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.
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.
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.
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.
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.
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.
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.
.hydrate, the React application transitions seamlessly from the prerendered version to the dynamic version. In addition, for covering rapid changes to published content,
Scrivito.updateContentwas 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.
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.