Get a complete design stack
Get to know DashCore color options
Useful accordion elements
Comply with the hideous EU Cookie Law
Online store home with an outstanding UX
Online store shopping cart
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:
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:
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:
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 there capabilities limited and the implemration of specific component 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 nearly impossible to implement without heavily modifying the core source code which in many cases is a show stopper.
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:
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 show 3 module, one for html, one for title and one for a code snippet:
[HTML id="289"][TITLE id="266"][CODE-SNIPPET id="290"]
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:
See the Hooks documentation section for more info
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
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.
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.
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 alter 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 mean that you can not only use simple email/passport profiles to enable user's 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, make 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.
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).