Build reactive applications with the Django tooling you already know and love
What is Sockpuppet?
Sockpuppet is a new way to craft modern, reactive web interfaces with Django.
We extend the capabilities of both Django and Stimulus by intercepting user interactions and passing them to Django over real-time websockets. These interactions are processed by Reflex actions that change application state. The current page is quickly re-rendered and the changes are sent to the client. The page is then morphed to reflect the new application state. This entire round-trip allows us to update the UI in 20-30ms without flicker or expensive page loads.
This architecture eliminates the complexity imposed by full-stack frontend frameworks without abandoning high-performance reactive user experiences. With Sockpuppet, small teams can do big things faster than ever before. We invite you to explore a fresh alternative to the Single Page App (SPA).
We are indebted to the work done in StimulusReflex. Without them Sockpuppet wouldn't exist; it's our bigger sibling who prefers to play in the Rails world.
Get Involved. We are stronger together! Please join us on Discord
Wouldn't it be great if you could focus on your product instead of the technical noise introduced by modern JavaScript? With Sockpuppet, you'll ship projects faster, with smaller teams and re-discover the joy of programming.
Goals
Enable small teams to do big things, faster 🏃🏽♀️
Increase developer happiness ❤️❤️❤️
Facilitate simple, concise, and clear code 🤸
Integrate seamlessly with Django 🚝
Build the next Twitter in just 9 minutes (or less) 😉
Our friends at StimulusReflex proves that you can build things fast.
How we got here
Applications nowadays pursue native UI speeds which spawned a new breed of increasingly complex technologies. Modern Single Page Apps have pushed much of the server's responsibilities to the client. Unfortunately, this new approach trades a developer experience that was once fun and productive for an alternative of high complexity and only marginal gains.
There must be a better way.
The revolution begins
In his 2018 ElixirConf keynote, Chris McCord(creator of thePhoenixframework forElixir) introduced LiveView, an alternative to the SPA. His presentation captures the same promise and excitement that Rails had in the early days.
We love Elixir and Phoenix. Elixir hits a sweet spot for people who want Rails-like conventions in a functional language. The community is terrific, but it's still small and comparatively niche.
Also, we just really enjoy using Django.
Sockpuppet was originally inspired by StimulusReflex which was inspired by LiveView, but we are charting our own course together with StimulusReflex. Our goal has always been to make building modern apps with Django the most productive and enjoyable option available. We want to inspire our friends working with other tools and technologies to evaluate how concepts like Sockpuppet could work in their ecosystems and communities.
Architecture
So what is happening behind the scenes here? Sockpuppet works in three layers.
It uses JavaScript; The JavaScript is re-used from StimulusReflex, which in itself is built upon StimulusJS. The JavaScript in StimulusReflex also uses something called morphdom which has the responsibility of modifying the DOM. The JavaScript layer ensures that the data is being sent to the server layer through websockets. When a message is received from the server layer it will re-render the dom according to the server-side instructions.
The HTML layer has the responsibility of defining where and how a "Reflex" is going to be triggered. Ie, a Reflex could be triggered by a browser event or the click of a button. When building more complex applications the HTML layer may also be used to store state so that this state is accessible when doing some interactivity in a stimulus controller.
The last layer is the server layer. This is where a Reflex class is defined. The Reflex knows what path and template was received and will re-render that template to contain any new information defined in the Reflex. The Reflex could also make database queries or initiate long-running processes. Once the template is re-rendered it will send it back to the frontend where JavaScript will modify the DOM to update everything.