A Brief Introduction to Scrivito

A Brief Introduction to Scrivito

Scrivito is a top-tier cloud-based content management solution. All your content is managed in the background, automatically and transparently. No local or server-side database is required, there are no setup or maintenance hassles.

The Scrivito JS SDK is a library for building JavaScript-based websites and connecting them to your Scrivito CMS. It comes with an unmatched user interface for creating and editing content directly on the website. This SDK and its user interface are also part of CMS Fiona 8, our on-premise version of Scrivito. Hence, all editor guides and developer tutorials offered here equally apply to JS web applications powered by Fiona 8.

Client-side vs. server-side rendering

With most websites, whether they are based on PHP or Ruby on Rails, the individual pages are generated by a remote web application on the server side. The most obvious consequence of this concept is that you require remote machinery which needs to be equipped with sufficient computing power and bandwidth to serve the visitors of your website.

In contrast to a website delivered by a server, a JavaScript-based website lives in the visitor’s browser. It’s a client-side web application, so once the JavaScript application code has been downloaded into the browser, no remote computation is required for generating the pages. Their decreased request load makes client-side websites very fast: The response times are shorter, the visitors’ user experience improves.

To deliver the first meaningful paint with lightning speed, the markup of Scrivito-based websites is prerendered, earning them an excellent Google SEO score.

How is the site content handled?

All access to content is handled transparently by the Scrivito SDK. This means that developers do not have to deal with retrieving the data, but can concentrate entirely on the application logic, e.g. for structuring and rendering the various types of content the website contains. The SDK is a JavaScript library that gets included in every Scrivito-based web application. It also provides the user interface for editing content directly on the web pages.

While content is being produced – i.e. while text is being edited or images are being uploaded –, the SDK transfers it through the Scrivito backend to your CMS. All content is stored safely in the cloud using Amazon Web Services (AWS) such as Cloud Databases or S3.

From the perspective of a website developer, all that needs to be done to have CMS-managed content rendered and made editable on web pages is making an API call to the Scrivito SDK. All rendering is done with React, a component-based technology that makes creating interactive user interfaces easy.

What else does Scrivito have to offer?

With Scrivito, content can be created and edited by team members using working copies. This way, any number of editors can work on different or the same pieces of content without affecting the published content as it is seen by the website visitors. Working copies can be published by users permitted to do so, supported by workflows if needed.

The Scrivito SDK lets you compose pages using widgets. Widgets can best be thought of as modular pieces of content. You can rearrange widgets on the pages using drag and drop, or copy and paste them, even across pages. The Scrivito Example Application comes with many pre-built widget types that are easy to customize or complement with use-case-specific creations.

Content Browser for managing binary assets

For managing binary assets, a Content Browser is included that lets you find and modify the different types of content your site is made up of. Images and other binary files can be uploaded using drag and drop.

The SDK also takes care of caching and handles routing; it optimizes the communication between your website and your Scrivito CMS, supports automatic image scaling for mobile devices and offers user-friendly SEO.

Before diving into Scrivito, consider getting familiar with React and some of its concepts (if you aren’t already). Here are some guides and tutorials you might find useful.