Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
django CMS + Channels + DRF = ♥
Search
Iacopo Spalletti
September 17, 2016
Programming
0
310
django CMS + Channels + DRF = ♥
Given at PyCon Uk 2016 17 September 2016
Video:
https://www.youtube.com/watch?v=IW7mi5BIN6U
Iacopo Spalletti
September 17, 2016
Tweet
Share
More Decks by Iacopo Spalletti
See All by Iacopo Spalletti
Django dalle trincee: pattern e pratiche dopo 15 anni di esperienza su Django
yakky
0
56
Writing Async Microservices in Python
yakky
0
680
1 API - 3 Framework - 30 minutes
yakky
0
93
Building real time applications with Django and Channels 2 @ DjangoCon Europe
yakky
1
690
Building real time applications with Django and Channels 2 @ PyCon Italia
yakky
0
540
Building real time applications with Django
yakky
0
670
django knocker
yakky
0
57
django CMS application - A comprehensive approach
yakky
0
52
Liveblogging using channels
yakky
0
41
Other Decks in Programming
See All in Programming
Team operations that are not burdened by SRE
kazatohiei
1
310
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
110
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
610
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
PicoRuby on Rails
makicamel
2
130
ふつうの技術スタックでアート作品を作ってみる
akira888
1
490
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
9.1k
Deep Dive into ~/.claude/projects
hiragram
13
2.5k
Hack Claude Code with Claude Code
choplin
3
890
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
790
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
230
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
337
57k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Gamification - CAS2011
davidbonilla
81
5.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Designing for Performance
lara
610
69k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Designing for humans not robots
tammielis
253
25k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
270
Faster Mobile Websites
deanohume
307
31k
Transcript
DJANGO CMS IN THE REAL TIME WEB DJANGO CMS +
CHANNELS + DRF = ♥
HELLO, I AM IACOPO Founder and CTO @NephilaIt django CMS
core developer @yakkys https://github.com/yakky
CONTENT-CENTRIC WEBSITES ARE BORING awesome design little (if any) interesting
code
BUT TIMES ARE A-CHANGIN'
ESCAPING THE CLICK- RELOAD PAIN
SPA ARE COMMONPLACE user interacts with the browser-side interface layer
interface reads/writes data from a backend outcome is shown seamlessly
'90S CALLED: 3-TIER ARCHITECTURE AGAIN (still an advancement over '80s
2-tier of plain web)
WHAT IF YOU MIX SPA AND CMS?
WHAT IF YOU MIX SPA AND CMS? Desktop notifications Real
time content updates Frictionless interaction
REAL WORLD-EXAMPLES Excuse the shameless plugs in the next slides
I focused on this topics in the past months Released
some code as a result I'm going to show you my findings
DJANGO CMS & CHANNELS What if you mix them?
WHAT'S DJANGO CMS? (in a nutshell)
WHAT'S DJANGO CMS One of the mostly widely used CMS
for Django Very simple frontend content editing Template-based page types Load of features available for integration in third- party apps
WHAT'S CHANNELS? (in a micro-nutshell)
WHAT'S CHANNELS Websockets for django \o/ (but it's actually more)
At most-once queue system Bring async to sync django code
WHAT'S CHANNELS Channels parlance ➡ Django concepts: Route ➡ URL
Consumer ➡ View
DESKTOP NOTIFICATIONS!
DESKTOP NOTIFICATIONS! Examples below using django-knocker https://github.com/nephila/django-knocker
DESKTOP NOTIFICATIONS! 0:00 / 0:09
DESKTOP NOTIFICATIONS! @receiver(post_publish) def notify_page_publish(**kwargs): page = kwargs.get('instance') language =
kwargs.get('language') knock = { 'title': 'Page update', 'message': page.get_title(language), 'icon': '/static/img/favicon.ico', 'url': page.get_absolute_url(language), 'language': language } group = Group('knocker-{0}'.format(knock['language'])) group.send({'text': json.dumps(knock)})
DESKTOP NOTIFICATIONS! BEHIND THE SCENES clients are added to a
per-language group as they connect simple js read messages from websocket and display as notifications
DESKTOP NOTIFICATIONS! @channel_session def ws_connect(message): prefix, language = message['path'].strip('/').split('/') gr
= Group('knocker-{0}'.format(language)) gr.add(message.reply_channel) message.channel_session['knocker'] = language
DESKTOP NOTIFICATIONS! notifications.onmessage = function (message) { var data =
JSON.parse(message.data); data = { body: notification.message, icon: notification.icon, tag: 'notifications_' + notification.language, url: notification.url }; var note = new Notification(notification.title, data); note.onclick = function () { document.location = notification.url; }};
LIVEBLOG! What if you can update django CMS page content
in realtime?
EXAMPLE djangocms-blog.liveblog
LIVEBLOG! A special channels-enabled plugin Upon save: Renders itself Emits
a message on a per-post group
LIVEBLOG! 0:00 / 0:46
LIVEBLOG! try: post = Post.objects.....get() except Post.DoesNotExist: message.reply_channel.send({ 'text': json.dumps({'error':
'no_post'}), }) return Group(post.liveblog_group).add(message.reply_channel)
LIVEBLOG! def save(self, *args, **kwargs): super(Liveblog, self).save(*args, **kwargs) notification =
{ 'id': self.pk, 'content': self.render(), 'creation_date': self.creation_date, 'changed_date': self.changed_date, } Group(self.liveblog_group).send({ 'text': json.dumps(notification), })
LIVEBLOG! var data = JSON.parse(message.data); var node = document.querySelectorAll( "div[data-post-id*='"
+ data.id + "']" ); var item = document.createElement('div'); item.innerHTML = data.content; if (node.length > 0) { node[0].parentNode.replaceChild(item.children[0], node[0]); } else { document.getElementById("liveblog-posts").insertBefore( item.children[0], document.getElementById( "liveblog-posts").children[0]); }
LIVEBLOG! Terrible hack: plugins are set in reverse order (latest-first)
upon save
DJANGO CMS + CHANNELS TAKE-HOME Enriched user experience Very simple
integration
DJANGO CMS + DRF
DJANGO CMS + DRF WHAT'S DRF (really?) A framework to
build REST interfaces in Django
DJANGO CMS + DRF LET'S GO ONE STEP BEYOND The
goal: Providing a unified API for web, SPAs, applications Integrating content in non-web environment Preserving the ease of use of a CMS
DJANGO CMS + DRF CURRENT STATE PoC application: djangocms-rest-view Stable
app for django CMS 3.5
DJANGO CMS + DRF DJANGOCMS-REST-VIEW Viewset Serializers A sample angular
client
DJANGO CMS + DRF 0:00 / 0:20
DJANGO CMS + DRF VIEWSETS : full pages list providing
pages metadata : full dump + rendered placeholders content + sekizai context : menu structure pages/ pages/<page-id>/ pages/menu
DJANGO CMS + DRF SERIALIZERS Currently very dumb Just map
the model attributes Provide rendered HTML for each page placeholder (really dumb) Discover sekizai resources in plugins
DJANGO CMS + DRF NEAT FEATURES Provides the sekizai context
⬇ Client load JS/CSS on demand Provides the page template name ⬇ Client can use a custom template for each page
DJANGO CMS + DRF CUSTOM TEMPLATES <div class="rest-header" ng-bind-html="content_page.placeholders.header |
<article class="body"> <div ng-bind-html="content_page.placeholders.content | safe"></div> </article>
DJANGO CMS + DRF SCOPE Very limited now Does not
map every django CMS feature: form submission dynamic apphooks (have to implement custom DRF for external apps) Used by a few projects in production
DJANGO CMS + DRF TAKE-HOME Still road to go Major
hurdle: sensible and simple plugin serialization Benefits are huge Stay tuned!
WHAT'S THE FUTURE Future looks bright!
CHANNELS Channels is maturing quickly Easy integration ➡ tons of
new applications Easily fits in CMS flow ➡ great potential to invent new things
DRF by 2016 - complete experimental phase from 2017 -
let's build REST-powered django CMS platforms
PROJECTS REPOSITORIES django-cms: https://github.com/divio/django-cms channels: https://github.com/django/channels DRF: https://github.com/tomchristie/django-rest-framework django-knocker: https://github.com/nephila/django-knocker
djangocms-blog: https://github.com/nephila/djangocms-blog djangocms-rest-view: https://github.com/nephila/djangocms-rest-view
GRAZIE! Follow me on: https://github.com/yakky https://github.com/nephila https://twitter.com/yakkys
QUESTIONS?