On this page, we'll explore the core features and concepts or the "how" behind SonicJs. It is recommended to read thru this page in order to gain a better understanding on how SonicJs works at a high level before taking a deep dive on site administration or custom development.
Content Types are similar to tables in a database. They are what we use to define our data. Content Types are built using a drag and drop editor. Examples include:
- Page
- Menu
- Blog Post
- Book
- Movie
- Employee
- Customer
SonicJs' ability to manage content types is an extremely versatile and flexible solution fit for many common web application use cases. At a high level, content types can:
- Manage the fields of the content type
- Manage field level user input validations
- Setup Views (both list and details) to display content on the site
- Manage permissions
- Manage overall settings
SonicJs' admin tool uses content types even for core CMS objects such as site settings, pages and menus. This enables these object to be customized out of the box to meet your requirements.
One of SonicJs' major strengths is its built in form builder. SonicJs has tight integration and has extended Form.io (https://www.form.io/). This enables developers to build a consistent administrative user experience across the entire platform. If you've ever used Wordpress, you know how annoying it is that every module has a totally separate UI/UX which forces you to pursue a separate learning curve.
This also allows you to built site forms - anything from contact forms to highly complex business forms with relationships, repeating sections and much more.
SonicJs automagically generates user input forms based on the content types (defined in the admin UI). Content types are managed with a drag and drop style form editor.
Field types are the building blocks of a content type.
Each field has various settings specific to how the UI is rendered along with behavior and validations. Developers can easily add their own custom field types and reuse them across content types.
The out of the box field types include:
Basic
Advanced
Layout
Data
Modules allow you to define content types, views to display data, data entry forms and write code to support business logic.
Most CMS have some form of modules (aka plugin-ins or extensions), but most only allow you to bolt on functionality and at best interact with a predefined API. This makes their capabilities limited and the implementation of specific components highly opinionated.
With SonicJs modules can not only alter/extend core functionality of the platform, but even alter/extend the features of other modules. This makes SonicJs, highly unopinionated and flexible. This prevents a situation where you might build 90% of your application on a CMS/Platform, only to realize that the remaining 10% is going to be a high friction experience and even presents the possibility of having to dig in and modify the system's core source code.
Each module has its own css and js files, making it completely isolated from other modules for visual UI controls.
The SonicJs page builder is an integrated visual editor for building out your site's pages. It allows you full control of both your pages layout (sections / rows / columns) and the content within each column. It comes with loads of features including:
- On the fly content editing - no need to go to the admin back end to manage content.
- Manage layout of your page including sections, rows and columns.
- Sections can be re-used on other pages
- Easily add new modules to the page.
- Module instance can be re-used on other pages.
- Modules can be drag and dropped to a new location.
- Modules can be copied.
- Modules can be deleted (removed from the column and/or completely deleted)
- Real-time CSS editor, see your styles updated in real time as you type css changes using the online editor.
- Edit the current's pages properties without visiting the admin section.
The SonicJs page page template system allows you to visual build a base page and use it as a template for other pages.
For example, if you look thru the various doc pages (that you are reading right now) you will notice that they all share the same left side menu and compacted header. This is accomplished using the visual page template system. If we wanted to add a new module below the left sidebar menu, we would simply edit the page template and all pages using this template would be updated automatically.
Shortcodes are small html-like tags that can be rendered on the server or client side. They allow for a great deal of UI/UX flexibility while building out website page.
Generally, shortcodes are automatically generated when you add a module to a page. However, there may be more advanced scenarios where you might want to manually edit them (and their surrounding divs) to achieve a more highly customized UI. The below example shows 3 modules, one for html, one for title and one for a code snippet:
<div>
[HTML id="e6be6ba6-09bb-4bb9-bc3e-f9428b9f24e4"]
[TITLE id="d8918a01-14f2-43d8-94f4-7ecf7a5de318"]
[CODE-SNIPPET id="2d57ffaa-5805-469a-8803-d7b8a2987df3"]
</div>Hooks are what gives SonicJs it's flexibility and what ultimately allow development within the SonicJs platform to follow the SOLID principals.
Hooks allow us to alter core functionality and even the functionality defined in other modules without touching the code within the target function.
With Hooks, we can "inject" or override business logic in areas where we want to customize view/behaviors of the system. A few examples:
- Turn a raw data model into a view model by adding new properties based on business rules.
- Custom process a view before it is rendered to the client.
- Register a module with the core CMS.
- Perform a check when the app is starting up.
- Apply a business rule driven security/permission check.
- Apply custom server side or client side form validation.
See the Hooks documentation section for more info
SonicJs is 100% GraphQL based. All CRUD operations and all other calls go thru the back end GraphQL server. SonicJs also has a javascript based client, making it easy to interact with the API.
As a result, SonicJs is a great choice for a headless CMS. This is because SonicJs has "dog fooded" its API during its own development. All of the advanced features, especially with respect to managing custom content types, hooks, views and content are all accessible via the GraphQL client.
See here for more info on using SonicJs as a headless CMS for your project.
SonicJs' built in media management server allows you manage assets (images, files, etc) from the admin UI.
Media assets are also accessible via the GraphQL API.
On The Fly Resizing
It is a common requirement to resize images on the server side in order to send to smallest possible size image to the client. This can be archived in SonicJs simple by appending a height or width parameter to the image page, ie: /assets/uploads/somefile.jpg?width=200
Uploading Images
Images can easily be upload in the admin media section using Dropzone. This allows you to bulk upload images to be used in your site pages.
You can also add files to the file system here: ../server/assets/uploads. Once you have added file to this directly, simply visit the media page in the admin section. SonicJs will automatically create a new media record for each new file.
Files can be stored locally (default) or uploaded to an Amazon S3 Bucket (as set in the .env file)
The setting section in the admin interface is, not surprisingly just a content type and can be extended just like any content type. Any new properties that you add will be available in any view or module (business logic) files.
Themes allow developers/designers full control over the look the and feel of your website/app. SonicJs enables you to easily convert any Bootstrap based theme into SonicJs theme in just a few steps.
Modules views can be overwritten at the theme level, enabling you to make module view changes without having to alter the core module views. Sections can also be overwritten at a theme level.
SonicJs also manages both css/js assets, including combination and minification, ensuring that your site loads lightning fast in production.
The administration section uses the same theme engine and can also be altered to meet your design needs.
User and Role management is an essential part of any web application and many websites. SonicJs provides a solid foundation for user and role management. Both user and role properties can be extended using the drag and drop content type editor (user/roles are at their core, just content types).
SonicJs uses Node's popular authentication package Passport (http://www.passportjs.org/) to support authentication.
This means that you can not only use simple email/passport profiles to enable users to authenticate to your site, but other popular services like Facebook, Twitter, Github, Oauth, AuthO, OpenId, JWT, Saml and dozens more without having to worry about the implementation details.
Even with caching disabled, as it is by default in you local development environment, SonicJs renders pages extremely fast due to its simple performance-centric data model.
For production, SonicJS has a simple built in cache, enabling your pages to run lightning fast by bypassing the need to lookup page rendering data from the database on each page load.
Cache entries are automatically marked stale when the underlying page's data is updated, making it a simple "smart cache".
SonicJs supports sending email notifications, but can also be extended to send SMS messages. SonicJs currently uses Sendgrid as they offer a liberal free plan, but this can easily be swapped out with other service providers.
The backup/restore section allows you to backup your content. When you click "Backup Now" from Admin -> Backup/Restore the system will export every content record to a json file. The system will then zip all of those content files with a current time stamp as the file name.
Backup files are stored in the [site root]/backups folder.
You can restore your content by clicking on the "Restore" button in the backup list. This is a hard restore, meaning it deletes all existing content and re-imports the content from the backup file (json files). Always, always do a backup before a restore. It is also highly advised that you manually backup your database before performing a restore just in case anything goes wrong.
You can upload a backup file by drag and dropping it on the BackUp/Restore page.
The restore feature can be used to migrate site content from staging to production. In an upcoming release, you will have the option or performing an interactive restore which will allow you to merge the backup into the current site as well as accommodate a few other use cases.
Regardless of your intended use case with SonicJS, it is highly recommended that you head over to the User Guide and at least scan thru it. You will need to be familiar with site administration, even if you are planning on using SonicJs as a foundation for heavy custom development (ie: building a sophisticated business application).