Kotti CMS - frontend decoupled from backend. How we did it (part 2)

In the previous article http://davidemoro.blogspot.it/2015/07/kotti-cms-successful-story-part-1.html we have seen that:

• decoupled public website from the private content management is cool
• Python and Pyramid is cool
• don't use PHP please :)

No we will see:

• how to build a pure Python Kotti based setup with a private content management area decoupled from the public website (with tips, links, technical details and screenshots)

Here you can see some screenshots, implementation details and links.

Project setup

The installation folder is a package that contains all the application-specific settings, database configuration, which packages your project will need and where they lives.

From https://pypi.python.org/pypi/mr.developer.

The installation folder is a "one command install" meta package:

• replicable
• under version control + git flow
• documented + change list for each plugin and the project itself
• with a tag based deploy
• based on Python pip/requirements.txt
• batteries included
• exceptions logging on file (with logrotate) enabled by default
• automated deploy

so let the computer works for us and have fun.
See:

• http://davidemoro.blogspot.com/2015/04/pip-for-buildout-folks.html
• https://github.com/davidemoro/kotti_project
• http://davidemoro.blogspot.com/2015/03/pyramid-exceptions-logging.html

Populators

Populators are functions with no arguments that get called on system startup, they may then make automatic changes to the database like content initialization.

Populators are very important because when you install the project folder during development or on the very first production instance you'll find all the most important contents and sections by default. Things will be created automatically if the database is empty, so you don't obtain a blank site on the very first install.

Populators are also good for improving the first impact of the end users (I mean editors) with the platform because they see all the main sections already there.

See:

• http://kotti.readthedocs.org/en/latest/developing/basic/configuration.html#kotti-populators

Private backend area

Turning Kotti CMS into a private content administration is quite easy:

• http://davidemoro.blogspot.com/2015/02/kotti-cms-intranet.html
• http://davidemoro.blogspot.com/2015/02/kotti-cms-workflow-reference.html
• http://kotti.readthedocs.org/en/latest/developing/basic/security.html

Later I've created a generic package that does all the things for you (kotti_backend):

• https://github.com/Kotti/kotti_backend

so things are even easier now (install kotti_backend, done).

Multilingual

kotti_multilingual is your friend.

Goto frontend link, translation management and link to the technical documentation online based on Sphinx

See:

• https://github.com/Kotti/kotti_multilingual 
• http://davidemoro.blogspot.com/2015/04/kotti-multilingual.html

Elastic search

kotti_es provides ElasticSearch integration for fulltext search. This plugin needs more love and and a complete refactor (it was built in a hurry and I'm not yet satisfied) but it proved there are no known issue after months of intensive usage.
Probably things will change, hope other guys with the same needs will contribute.

See:

• https://github.com/Kotti/kotti_es
• http://davidemoro.blogspot.com/2015/05/kotti-cms-elasticsearch-integration.html

Main navigation and header/footer links

You can use the kotti_actions plugin if you want to implement footer, header links or even nested main navigation menus. Obviously kotti_actions is ment to be used with a decoupled frontend.

As you can see a custom colour can be assigned to courses, navigation links, sections and every kind of object thanks to the json annotations column provided by default by Kotti. So you can add arbitrary fields.

How the multilevel menu looks like on the public website

See:

• https://github.com/Kotti/kotti_actions
• http://davidemoro.blogspot.com/2015/02/kotti-cms-annotations-store-arbitrary-data.html

Portlets

The main layout based on box managers for portlets

The kotti_boxes is your friend. This plugin is ment to be used with a decoupled frontend. And it was quite quick implementing portlets because we didn't need to customize the private backend area.

You can define different page layouts for each resource type (home page, news, courses, etc) and show boxes in well defined areas (box managers), for example LeftBoxManager, AboveFooterBoxManager and so on.

So box and box managers are just non publishable contents and you can:

Banner portlets with links

• copy/paste them
• assign workflow with different security policies to box and box managers
• assign different views
• share edit permission to certain box or box managers to particular users or groups
• prevent certain type of boxes to be included in some areas (for example: banner box image only addable to the left box manager).

See:

• https://github.com/Kotti/kotti_boxes

Editor toolbar

As you can see if you are logged in the frontend will show an editor toolbar with:

• link to the backend version of the page
• object information (state, type of object, etc)

Info and links to the backend, edit and folder contents

or see exactly the website as an anonymous user (very common customer request):

Anonymous view

You can also add more features, for example direct edit links for images or portlets or live edit features.

Talking about a pure Python solution, you might implement this feature with a Pyramid Tween (I hope I'll have enough spare time to do that. Anyone would want to contribute? We are very welcome, contact me!):

• http://docs.pylonsproject.org/projects/pyramid//en/latest/glossary.html#term-tween
• http://docs.pylonsproject.org/projects/pyramid//en/latest/narr/hooks.html#registering-tweens

Course types (custom content types)

The course view with portlets and collapsable paragraphs

They are a sort of rich documents with an image attachment column and integrated with an external ecommerce site. When you add a course type there is an event that initializes automatically subobjects and the main image attachement by default, so less work for editors.

In addition all image content types and image attachments are addable or editable just by allowed users thank to custom roles and global or local permission sharing.

Collapsable paragraphs are implemented with custom content types not directly reachable on the frontend.

There are a lot of fields on this content type, so they are grouped together using fieldsets.
Editors can also create a base private course model and then copy and paste it when new courses should be added.

Sometimes you want to prevent the addability on the site root for particular object types, this way things will remain always tidy (why you should add a course on the very root of the site?).

See:

• http://davidemoro.blogspot.com/2015/02/kotti-cms-how-to-create-new-content-image.html
• http://davidemoro.blogspot.com/2015/03/kotti-cms-events-insert-subobjects.html
• http://davidemoro.blogspot.com/2015/05/kotti-cms-how-to-add-new-roles.html
• http://davidemoro.blogspot.com/2015/01/kotti-avoid-types-addable-in-content.html
• http://kotti.readthedocs.org/en/latest/developing/basic/security.html

Windows and MySQL issues and tips

Kotti can be installed on Windows but I strongly suggest to adopt a Unix-like server with Postgresql instead of MySQLas storage layer: 

• http://davidemoro.blogspot.com/2015/03/pyramid-mysql-windows-good-ugly-bad.html
• http://davidemoro.blogspot.com/2015/01/how-to-install-kotti-cms-on-windows.html
• http://davidemoro.blogspot.com/2015/03/pyramid-exceptions-logging.html 

Tests

All the software is tested. Very happy with the py.test framework.

See:

• http://pytest.org/latest/
• http://davidemoro.blogspot.it/2015/02/python-mock-library-for-ninja-testing.html

Other third party Kotti plugins

I've used the following third party plugins that can be used on a standard Kotti environment:

• kotti_calendar for events (very good solution!)
• kotti_newsitem for news
• kotti_navigation, add a configurable navigation on our backend
• kotti_link, link types

See also the full list of available plugins:

• https://pypi.python.org/pypi?%3Aaction=search&term=kotti&submit=search

Photoes and credits

All the screenshots shown in this article are taken from the "MIP Politecnico di Milano's graduate school of business" website:

• http://www.mip.polimi.it

So the MIP's website backend is powered by Pylons/Pyramid and Kotti CMS, I'll write a non-technical case study soon. In the mean time many thanks to:

• MIP
• Simona Strepparola, Head of Communication
• Gabriele Bedani, Microsoft Sysadmin
• all the MIP staff
• Truelab 
• Riccardo Bonini, project manager
• Ruben Barilani, web developer
• Caio Ceccon, web developer (Faculty and Staff implementation). Python developer that joined us for only 5 days but enough to become good friends! He never touched a Pyramid/Pylons or Kotti application but he was able to be productive in a couple of days, this proves the Pyramid/Pylons developer friendliness
• Davide Moro, it's me
• Andrea Sironi, creative director

Results

You can consider Kotti as a very good, secure, flexible, battle tested and easy to approach solution for important customers.

All Kotti posts published by @davidemoro

• http://davidemoro.blogspot.it/search/label/kotti

Next steps

Reading this article you should find all the bricks you need if you want to implement a public website decoupled from its backend with Kotti.

Now I'm assembling the above bricks in order to provide an "easy to install" solution with the same pattern I've described here. This is my roadmap:

• kotti_backend (https://github.com/Kotti/kotti_backend). Already published on PyPI, ready to be used. Turns Kotti CMS into a private content administration area
• kotti_frontend (https://github.com/Kotti/kotti_frontend). Public website solution completely decoupled by the Kotti backend with modern frontend tools (I want to obtain something like http://davidemoro.blogspot.it/2014/09/plone-angularjs-yeoman-starter.html or http://davidemoro.blogspot.it/2014/09/pyramid-starter-seed-yeomam-part-1.html). Optional support for blank sheet themes if you need more flexibility. It is just an incomplete but quite promising prototype, it is still under development.
  UPDATE 20150824: no more kotti_frontend. See http://davidemoro.blogspot.com/2015/08/introducing-substancek-kotti-project.html and https://github.com/substancek/substancek_cms_theme
• a new pyramid tween implementing the editor toolbar available on the public website (TODO)
• a meta-package "one command" installer based (a modified version of https://github.com/davidemoro/kotti_project). Still in TODO
• installable themes and themes generation (scaffolding)
• a Kotti distribution that provides all the most useful third party plugins, just if you need a CMS. Now you have to install all external components manually.
• REST interface support (included in standard Kotti's roadmap), very useful if you want to built heavy Javascript based applications 

It can be considered a good starting point for:

• CMS-ish application
• a generic framework for building generic web apps or single page web applications (remember, Kotti is not only a CMS, it could be considered as a framework)

So stay tuned and if you like this work please consider to contribute with

• code
• testing
• issue reporting
• Github stars
• spreading the word 

or why not sponsorships!

And if you want to know more about Kotti and you are attending +EuroPython Conference 2015 in Bilbao don't miss the Andreas Kaiser's talk "Standing on the Shoulders of Giants: The Kotti Web Application Framework". I'll join the sprint (remotely) at the end of EuroPython so see you on IRC (http://webchat.freenode.net/?channels=kotti). If you want to stay tuned follow https://twitter.com/KottiCMS.