django CMS + Channels + DRF = ♥

Given at PyCon Uk 2016 17 September 2016

Video: https://www.youtube.com/watch?v=IW7mi5BIN6U

Transcript

1. DJANGO CMS IN THE REAL TIME WEB DJANGO CMS + CHANNELS + DRF = ♥
2. HELLO, I AM IACOPO Founder and CTO @NephilaIt django CMS core developer @yakkys https://github.com/yakky
3. CONTENT-CENTRIC WEBSITES ARE BORING awesome design little (if any) interesting code
4. BUT TIMES ARE A-CHANGIN'
5. ESCAPING THE CLICK- RELOAD PAIN
6. SPA ARE COMMONPLACE user interacts with the browser-side interface layer interface reads/writes data from a backend outcome is shown seamlessly
7. '90S CALLED: 3-TIER ARCHITECTURE AGAIN (still an advancement over '80s 2-tier of plain web)
8. WHAT IF YOU MIX SPA AND CMS?
9. WHAT IF YOU MIX SPA AND CMS? Desktop notifications Real time content updates Frictionless interaction
10. REAL WORLD-EXAMPLES Excuse the shameless plugs in the next slides
11. I focused on this topics in the past months Released some code as a result I'm going to show you my findings
12. DJANGO CMS & CHANNELS What if you mix them?
13. WHAT'S DJANGO CMS? (in a nutshell)
14. 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
15. WHAT'S CHANNELS? (in a micro-nutshell)
16. WHAT'S CHANNELS Websockets for django \o/ (but it's actually more) At most-once queue system Bring async to sync django code
17. WHAT'S CHANNELS Channels parlance ➡ Django concepts: Route ➡ URL Consumer ➡ View
18. DESKTOP NOTIFICATIONS!
19. DESKTOP NOTIFICATIONS! Examples below using django-knocker https://github.com/nephila/django-knocker
20. DESKTOP NOTIFICATIONS! 0:00 / 0:09
21. 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)})
22. 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
23. 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
24. 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; }};
25. LIVEBLOG! What if you can update django CMS page content in realtime?
26. EXAMPLE djangocms-blog.liveblog
27. LIVEBLOG! A special channels-enabled plugin Upon save: Renders itself Emits a message on a per-post group
28. LIVEBLOG! 0:00 / 0:46
29. 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)
30. 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), })
31. 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]); }
32. LIVEBLOG! Terrible hack: plugins are set in reverse order (latest-first) upon save
33. DJANGO CMS + CHANNELS TAKE-HOME Enriched user experience Very simple integration
34. DJANGO CMS + DRF
35. DJANGO CMS + DRF WHAT'S DRF (really?) A framework to build REST interfaces in Django
36. 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
37. DJANGO CMS + DRF CURRENT STATE PoC application: djangocms-rest-view Stable app for django CMS 3.5
38. DJANGO CMS + DRF DJANGOCMS-REST-VIEW Viewset Serializers A sample angular client
39. DJANGO CMS + DRF 0:00 / 0:20
40. 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
41. 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
42. 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
43. 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>
44. 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
45. DJANGO CMS + DRF TAKE-HOME Still road to go Major hurdle: sensible and simple plugin serialization Benefits are huge Stay tuned!
46. WHAT'S THE FUTURE Future looks bright!
47. CHANNELS Channels is maturing quickly Easy integration ➡ tons of new applications Easily fits in CMS flow ➡ great potential to invent new things
48. DRF by 2016 - complete experimental phase from 2017 - let's build REST-powered django CMS platforms
49. 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
50. GRAZIE! Follow me on: https://github.com/yakky https://github.com/nephila https://twitter.com/yakkys
51. QUESTIONS?