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
48
Writing Async Microservices in Python
yakky
0
650
1 API - 3 Framework - 30 minutes
yakky
0
92
Building real time applications with Django and Channels 2 @ DjangoCon Europe
yakky
1
670
Building real time applications with Django and Channels 2 @ PyCon Italia
yakky
0
520
Building real time applications with Django
yakky
0
640
django knocker
yakky
0
57
django CMS application - A comprehensive approach
yakky
0
51
Liveblogging using channels
yakky
0
41
Other Decks in Programming
See All in Programming
ワンバイナリWebサービスのススメ
mackee
10
7.7k
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
130
Interface vs Types ~型推論が過多推論~
hirokiomote
1
250
Bytecode Manipulation 으로 생산성 높이기
bigstark
1
140
Effect の双対、Coeffect
yukikurage
4
1.2k
Passkeys for Java Developers
ynojima
2
810
FormFlow - Build Stunning Multistep Forms
yceruto
1
130
実はすごいスピードで進化しているCSS
hayato_yokoyama
0
110
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
370
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
710
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
0
110
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
290
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Docker and Python
trallard
44
3.4k
Fireside Chat
paigeccino
37
3.5k
The Language of Interfaces
destraynor
158
25k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How GitHub (no longer) Works
holman
314
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Making Projects Easy
brettharned
116
6.2k
Speed Design
sergeychernyshev
30
980
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
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?