everyday superpowers Chris May—October 16, 2023 HTML-ivating your Django app with Alpine, HTMX, and Streaming HTML Slides 

everyday superpowers SPA 

everyday superpowers SPA 

everyday superpowers 

everyday superpowers SPA—Single Page Application • A prevalent architectural pattern • Initial page load downloads a JavaScript application • This application handles all interactions • Uses APIs to communicate with servers • Changes the HTML and URL of the browser without leaving the page 

everyday superpowers —Thoughtworks “SPAs incur complexity that simply doesn't exist with traditional server-based websites… Too often teams are skipping that trade-off analysis, blindly accepting the complexity of SPAs by default even when business needs don't justify it.” Source: https://www.thoughtworks.com/radar/techniques/spa-by-default 

everyday superpowers —Thoughtworks “Some developers aren't aware of an alternative approach because they've spent their entire career in a framework like React.” Source: https://www.thoughtworks.com/radar/techniques/spa-by-default 

everyday superpowers Experience drove SPA popularity SPAs became very popular because they provided a better experience: • Every interaction didn’t cause a new page to load • Powered dynamic and engaging interfaces • Interface is updated from small payloads • Changing data updates interface 

everyday superpowers Taylor’s story “Making the world’s fastest website, and other mistakes” https://dev.to/tigt/making-the-worlds-fastest-website-and-other-mistakes-56na 

everyday superpowers web app native app amazon.com walmart.com Source: https://dev.to/tigt/so-what-c8j 

everyday superpowers “Be so fast it’s fun on the worst devices and networks our customers use” Taylor’s goal: 

everyday superpowers 130KB Budget (for all HTML, CSS, and JS) 

everyday superpowers Remaining budget 20KB (for all HTML, CSS, and JS) ReactJS Redux 44.7KB 

everyday superpowers “Maybe if I sprinkled the HTML with just enough CSS to look good… and if I had any room left, some laser-focused JavaScript for the pieces that benefit most from complex interactivity.” —Taylor Hunt Source: https://dev.to/tigt/making-the-worlds-fastest-website-and-other-mistakes-56na 

everyday superpowers web app native app amazon.com walmart.com Source: https://dev.to/tigt/so-what-c8j demo app 

everyday superpowers Hi, I’m Chris May! Python technical coach & Lead Software Engineer @ source7 I help python developers and teams reach their potential by temporarily joining teams and improving how they build software. https://everydaysuperpowers.dev 

everyday superpowers How to create elevated experiences 

everyday superpowers Components of elevated experiences • Remove whole-page refreshes for every interaction • Use small payloads from the server to update the interface • Update HTML as a result of changes in data • Empower rich on-page interactions • Be fast 

everyday superpowers 

everyday superpowers 

everyday superpowers 

everyday superpowers django-unicorn 

everyday superpowers 

everyday superpowers 

everyday superpowers Components of elevated experiences ✓Remove whole-page refreshes for every interaction HTMX ✓Use small payloads from the server to update the interface HTMX • Update HTML as a result of changes in data • Empowered rich on-page interactions • Be fast 

everyday superpowers 

everyday superpowers 

everyday superpowers Components of elevated experiences ✓Remove whole-page refreshes for every interaction HTMX ✓Use small payloads from the server to update the interface HTMX ✓Update HTML as a result of changes in data Alpine ✓Empowered rich on-page interactions Alpine • Be fast 

everyday superpowers What about developer experience? 

everyday superpowers Developer experience boost • Both frameworks can use HTML attributes to control behavior • Locality • Remove your JS build system • Write mostly Python and HTML • Easier maintenance • Faster iteration cycles 

everyday superpowers https://youtu.be/3GObi93tjZI?t=1078 

everyday superpowers https://youtu.be/3GObi93tjZI?t=1141 

everyday superpowers Components of elevated experiences ✓Remove whole-page refreshes for every interaction HTMX ✓Use small payloads from the server to update the interface HTMX ✓Update HTML as a result of changes in data Alpine ✓Empowered rich on-page interactions Alpine • Be fast 

everyday superpowers The cost of SPAs on mobile devices Source: https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks 

everyday superpowers 

everyday superpowers 

everyday superpowers Deliver critical elements as quickly as possible With traditional web apps, Python will: • Gather all the data pieces • Grab the templates • Render and stitch together the whole template in memory • Send it down the pipe This is sub-optimal and occasionally hurts the experience. 

everyday superpowers Deliver critical elements as quickly as possible What we want: • Start rendering the templates • Send it down the pipe as soon as you can • Wait for data • When a piece of data is available, render its fragment of HTML and send it down the pipe. 

everyday superpowers 1 of 4 Standard process 

everyday superpowers 1 of 4 Standard process 

everyday superpowers 2 of 4 Basic streaming 

everyday superpowers 3 of 4 Stream every item 

everyday superpowers .skeleton:not(:has(.item + .item + .item + .item ))::before { /* A faded white bar scrubbing across the skeleton */ content: ''; position: absolute; height: 100%; width: 3rem; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5)... animation: shimmer 2.5s linear infinite; } @keyframes shimmer { /* Animation moving the faded white bar across the skeleton */ 0% {transform: translateX(-100%)} 100% {transform: translateX(100vw)} } .skeleton:not(:has(.item + .item + .item + .item)) { /* The skeleton boxes */ position: relative; background-repeat: no-repeat; background-image: linear-gradient(#eee 0, #dfe1e1 95%), linear-gradient(#eee 0, #dfe1e1 95%), linear-gradient(#eee 0, #dfe1e1 95%), linear-gradient(#eee 0, #dfe1e1 95%), linear-gradient(#f9f9f9 0, #fefefe 95%), ... } 

everyday superpowers 4 of 4 Add skeletons 

everyday superpowers 

everyday superpowers How to create the demo in Django 

everyday superpowers import asyncio from django.http import StreamingHttpResponse from django.template.loader import get_template from home.recommendations import customized_recommendations async def stream_homepage_content(): for item in customized_recommendations: await asyncio.sleep(.7) # Faking a slow recommendation engine yield item async def index(request): template = get_template('home.html') return StreamingHttpResponse( template.template.generate_async({ 'recommendations': stream_homepage_content() }) ) 

everyday superpowers async def stream_homepage_content(): for item in customized_recommendations: # Faking a slow recommendation engine await asyncio.sleep(.7) yield item async def index(request): template = get_template('home.html') return StreamingHttpResponse( template.template.generate_async({ 'recommendations': stream_homepage_content() }) ) 

everyday superpowers async def stream_homepage_content(): for item in customized_recommendations: # Faking a slow recommendation engine await asyncio.sleep(.7) yield item async def index(request): template = get_template('home.html') return StreamingHttpResponse( template.template.generate_async({ 'recommendations': stream_homepage_content() }) ) 

everyday superpowers async def stream_homepage_content(): for item in customized_recommendations: # Faking a slow recommendation engine await asyncio.sleep(.7) yield item async def index(request): template = get_template('home.html') return StreamingHttpResponse( template.template.generate_async({ 'recommendations': stream_homepage_content() }) ) 

everyday superpowers async def stream_homepage_content(): for item in customized_recommendations: # Faking a slow recommendation engine await asyncio.sleep(.7) yield item async def index(request): template = get_template('home.html') return StreamingHttpResponse( template.template.generate_async({ 'recommendations': stream_homepage_content() }) ) 

everyday superpowers async def stream_homepage_content(): for item in customized_recommendations: # Faking a slow recommendation engine await asyncio.sleep(.7) yield item async def index(request): template = get_template('home.html') return StreamingHttpResponse( template.template.generate_async({ 'recommendations': stream_homepage_content() }) ) 

everyday superpowers async def stream_homepage_content(): for item in customized_recommendations: # Faking a slow recommendation engine await asyncio.sleep(.7) yield item async def index(request): template = get_template('home.html') return StreamingHttpResponse( template.template.generate_async({ 'recommendations': stream_homepage_content() }) ) 

everyday superpowers async def stream_homepage_content(): for item in customized_recommendations: # Faking a slow recommendation engine await asyncio.sleep(.7) yield item async def index(request): template = get_template('home.html') return StreamingHttpResponse( template.template.generate_async({ 'recommendations': stream_homepage_content() }) ) 

everyday superpowers async def stream_homepage_content(): for item in customized_recommendations: # Faking a slow recommendation engine await asyncio.sleep(.7) yield item async def index(request): template = get_template('home.html') return StreamingHttpResponse( template.template.generate_async({ 'recommendations': stream_homepage_content() }) ) 

everyday superpowers How do you do this in Django templates today? O ctober 2023 

everyday superpowers Option 1 • Split templates into pieces • Yield each part • Via Django 4.2’s new async iteration in StreamingHttpResponse O ctober 2023 

everyday superpowers Option 1 _shell.html _shell.html home.html _item.html O ctober 2023 

everyday superpowers import asyncio from django.http import StreamingHttpResponse from django.template.loader import render_to_string from home.recommendations import customized_recommendations async def stream_homepage_content(): pre_shell, post_shell = render_to_string('home/home.html').split('') yield pre_shell for item in customized_recommendations: await asyncio.sleep(.7) # Faking a slow recommendation engine yield render_to_string('home/_item.html', dict(recommendation=item)) yield post_shell async def index(request): return StreamingHttpResponse(stream_homepage_content()) O ctober 2023 

everyday superpowers async def stream_homepage_content(): pre_shell, post_shell = render_to_string('home/home.html') \ .split('') yield pre_shell for item in customized_recommendations: await asyncio.sleep(.7) # Faking a slow recommendation engine yield render_to_string('home/_item.html', dict(recommendation=item)) yield post_shell async def index(request): return StreamingHttpResponse(stream_homepage_content()) O ctober 2023 

everyday superpowers async def stream_homepage_content(): pre_shell, post_shell = render_to_string('home/home.html') \ .split('') yield pre_shell for item in customized_recommendations: await asyncio.sleep(.7) # Faking a slow recommendation engine yield render_to_string('home/_item.html', dict(recommendation=item)) yield post_shell async def index(request): return StreamingHttpResponse(stream_homepage_content()) O ctober 2023 

everyday superpowers async def stream_homepage_content(): pre_shell, post_shell = render_to_string('home/home.html') \ .split('') yield pre_shell for item in customized_recommendations: await asyncio.sleep(.7) # Faking a slow recommendation engine yield render_to_string('home/_item.html', dict(recommendation=item)) yield post_shell async def index(request): return StreamingHttpResponse(stream_homepage_content()) O ctober 2023 

everyday superpowers async def stream_homepage_content(): pre_shell, post_shell = render_to_string('home/home.html') \ .split('') yield pre_shell for item in customized_recommendations: await asyncio.sleep(.7) # Faking a slow recommendation engine yield render_to_string('home/_item.html', dict(recommendation=item)) yield post_shell async def index(request): return StreamingHttpResponse(stream_homepage_content()) O ctober 2023 

everyday superpowers async def stream_homepage_content(): pre_shell, post_shell = render_to_string('home/home.html') \ .split('') yield pre_shell for item in customized_recommendations: await asyncio.sleep(.7) # Faking a slow recommendation engine yield render_to_string('home/_item.html', dict(recommendation=item)) yield post_shell async def index(request): return StreamingHttpResponse(stream_homepage_content()) O ctober 2023 

everyday superpowers async def stream_homepage_content(): pre_shell, post_shell = render_to_string('home/home.html') \ .split('') yield pre_shell for item in customized_recommendations: await asyncio.sleep(.7) # Faking a slow recommendation engine yield render_to_string('home/_item.html', dict(recommendation=item)) yield post_shell async def index(request): return StreamingHttpResponse(stream_homepage_content()) O ctober 2023 

everyday superpowers O ctober 2023 

everyday superpowers O ctober 2023 

everyday superpowers O ctober 2023 

everyday superpowers O ctober 2023 

everyday superpowers async def stream_homepage_content(): pre_shell, post_shell = render_to_string('home/home.html') \ .split('') yield pre_shell for item in customized_recommendations: await asyncio.sleep(.7) # Faking a slow recommendation engine yield render_to_string('home/_item.html', dict(recommendation=item)) yield post_shell async def index(request): return StreamingHttpResponse(stream_homepage_content()) O ctober 2023 

everyday superpowers async def stream_homepage_content(): pre_shell, post_shell = render_to_string('home/home.html') \ .split('') yield pre_shell for item in customized_recommendations: await asyncio.sleep(.7) # Faking a slow recommendation engine yield render_to_string('home/_item.html', dict(recommendation=item)) yield post_shell async def index(request): return StreamingHttpResponse(stream_homepage_content()) O ctober 2023 

everyday superpowers async def stream_homepage_content(): pre_shell, post_shell = render_to_string('home/home.html') \ .split('') yield pre_shell for item in customized_recommendations: await asyncio.sleep(.7) # Faking a slow recommendation engine yield render_to_string('home/_item.html', dict(recommendation=item)) yield post_shell async def index(request): return StreamingHttpResponse(stream_homepage_content()) O ctober 2023 

everyday superpowers async def stream_homepage_content(): pre_shell, post_shell = render_to_string('home/home.html') \ .split('') yield pre_shell for item in customized_recommendations: await asyncio.sleep(.7) # Faking a slow recommendation engine yield render_to_string('home/_item.html', dict(recommendation=item)) yield post_shell async def index(request): return StreamingHttpResponse(stream_homepage_content()) O ctober 2023 

everyday superpowers async def stream_homepage_content(): pre_shell, post_shell = render_to_string('home/home.html') \ .split('') yield pre_shell for item in customized_recommendations: await asyncio.sleep(.7) # Faking a slow recommendation engine yield render_to_string('home/_item.html', dict(recommendation=item)) yield post_shell async def index(request): return StreamingHttpResponse(stream_homepage_content()) O ctober 2023 

everyday superpowers Option 1 • Split templates into pieces • Yield each part • Via Django 4.2’s new async iteration in StreamingHttpResponse O ctober 2023 

everyday superpowers Option 2 • Render a view • Subscribe to Server-Sent Events with HTMX • Send the slow parts to the page when they’re ready O ctober 2023 

everyday superpowers import asyncio import random import re from django.http import StreamingHttpResponse from django.shortcuts import render from django.template.loader import render_to_string from home.recommendations import customized_recommendations def index(request): return render(request, 'home/home_sse.html') async def sse_recommendation(): recommendations = [] for item in customized_recommendations: await asyncio.sleep(.7) content = render_to_string('home/_item.html', dict(recommendation=item)) recommendations.append( re.sub('\n', '', content) ) all_recommendations = ''.join(recommendations) yield f'data: {all_recommendations}\n\n' def handle_sse(request): return StreamingHttpResponse(streaming_content=sse_recommendation(), content_type='text/event-stream') def index(request): return render(request, 'home/home_sse.html') async def sse_recommendation(): recommendations = [] for item in customized_recommendations: await asyncio.sleep(.7) content = render_to_string('home/_item.html', dict(recommendation=item)) recommendations.append( re.sub('\n', '', content) ) all_recommendations = ''.join(recommendations) yield f'data: {all_recommendations}\n\n' def handle_sse(request): return StreamingHttpResponse( streaming_content=sse_recommendation(), content_type=‘text/event-stream' ) O ctober 2023 

everyday superpowers def index(request): return render(request, 'home/home_sse.html') async def sse_recommendation(): recommendations = [] for item in customized_recommendations: await asyncio.sleep(.7) content = render_to_string('home/_item.html', dict(recommendation=item)) recommendations.append( re.sub('\n', '', content) ) all_recommendations = ''.join(recommendations) yield f'data: {all_recommendations}\n\n' def handle_sse(request): return StreamingHttpResponse( streaming_content=sse_recommendation(), content_type=‘text/event-stream' ) O ctober 2023 

everyday superpowers def index(request): return render(request, 'home/home_sse.html') async def sse_recommendation(): recommendations = [] for item in customized_recommendations: await asyncio.sleep(.7) content = render_to_string('home/_item.html', dict(recommendation=item)) recommendations.append( re.sub('\n', '', content) ) all_recommendations = ''.join(recommendations) yield f'data: {all_recommendations}\n\n' def handle_sse(request): return StreamingHttpResponse( streaming_content=sse_recommendation(), content_type=‘text/event-stream' ) O ctober 2023 

everyday superpowers O ctober 2023 

everyday superpowers O ctober 2023 

everyday superpowers O ctober 2023 

everyday superpowers O ctober 2023 

everyday superpowers O ctober 2023 

everyday superpowers O ctober 2023 

everyday superpowers O ctober 2023 

everyday superpowers def index(request): return render(request, 'home/home_sse.html') async def sse_recommendation(): recommendations = [] for item in customized_recommendations: await asyncio.sleep(.7) content = render_to_string('home/_item.html', dict(recommendation=item)) recommendations.append( re.sub('\n', '', content) ) all_recommendations = ''.join(recommendations) yield f'data: {all_recommendations}\n\n' def handle_sse(request): return StreamingHttpResponse( streaming_content=sse_recommendation(), content_type=‘text/event-stream' ) O ctober 2023 

everyday superpowers def index(request): return render(request, 'home/home_sse.html') async def sse_recommendation(): recommendations = [] for item in customized_recommendations: await asyncio.sleep(.7) content = render_to_string('home/_item.html', dict(recommendation=item)) recommendations.append( re.sub('\n', '', content) ) all_recommendations = ''.join(recommendations) yield f'data: {all_recommendations}\n\n' def handle_sse(request): return StreamingHttpResponse( streaming_content=sse_recommendation(), content_type=‘text/event-stream' ) O ctober 2023 

everyday superpowers def index(request): return render(request, 'home/home_sse.html') async def sse_recommendation(): recommendations = [] for item in customized_recommendations: await asyncio.sleep(.7) content = render_to_string('home/_item.html', dict(recommendation=item)) recommendations.append( re.sub('\n', '', content) ) all_recommendations = ''.join(recommendations) yield f'data: {all_recommendations}\n\n' def handle_sse(request): return StreamingHttpResponse( streaming_content=sse_recommendation(), content_type=‘text/event-stream' ) O ctober 2023 

everyday superpowers def index(request): return render(request, 'home/home_sse.html') async def sse_recommendation(): recommendations = [] for item in customized_recommendations: await asyncio.sleep(.7) content = render_to_string('home/_item.html', dict(recommendation=item)) recommendations.append( re.sub('\n', '', content) ) all_recommendations = ''.join(recommendations) yield f'data: {all_recommendations}\n\n' def handle_sse(request): return StreamingHttpResponse( streaming_content=sse_recommendation(), content_type=‘text/event-stream' ) O ctober 2023 

everyday superpowers def index(request): return render(request, 'home/home_sse.html') async def sse_recommendation(): recommendations = [] for item in customized_recommendations: await asyncio.sleep(.7) content = render_to_string('home/_item.html', dict(recommendation=item)) recommendations.append( re.sub('\n', '', content) ) all_recommendations = ''.join(recommendations) yield f'data: {all_recommendations}\n\n' def handle_sse(request): return StreamingHttpResponse( streaming_content=sse_recommendation(), content_type=‘text/event-stream' ) O ctober 2023 

everyday superpowers def index(request): return render(request, 'home/home_sse.html') async def sse_recommendation(): recommendations = [] for item in customized_recommendations: await asyncio.sleep(.7) content = render_to_string('home/_item.html', dict(recommendation=item)) recommendations.append( re.sub('\n', '', content) ) all_recommendations = ''.join(recommendations) yield f'data: {all_recommendations}\n\n' def handle_sse(request): return StreamingHttpResponse( streaming_content=sse_recommendation(), content_type=‘text/event-stream' ) O ctober 2023 

everyday superpowers def index(request): return render(request, 'home/home_sse.html') async def sse_recommendation(): recommendations = [] for item in customized_recommendations: await asyncio.sleep(.7) content = render_to_string('home/_item.html', dict(recommendation=item)) recommendations.append( re.sub('\n', '', content) ) all_recommendations = ''.join(recommendations) yield f'data: {all_recommendations}\n\n' def handle_sse(request): return StreamingHttpResponse( streaming_content=sse_recommendation(), content_type=‘text/event-stream' ) O ctober 2023 

everyday superpowers def index(request): return render(request, 'home/home_sse.html') async def sse_recommendation(): recommendations = [] for item in customized_recommendations: await asyncio.sleep(.7) content = render_to_string('home/_item.html', dict(recommendation=item)) recommendations.append( re.sub('\n', '', content) ) all_recommendations = ''.join(recommendations) yield f'data: {all_recommendations}\n\n' def handle_sse(request): return StreamingHttpResponse( streaming_content=sse_recommendation(), content_type=‘text/event-stream' ) O ctober 2023 

everyday superpowers def index(request): return render(request, 'home/home_sse.html') async def sse_recommendation(): recommendations = [] for item in customized_recommendations: await asyncio.sleep(.7) content = render_to_string('home/_item.html', dict(recommendation=item)) recommendations.append( re.sub('\n', '', content) ) all_recommendations = ''.join(recommendations) yield f'data: {all_recommendations}\n\n' def handle_sse(request): return StreamingHttpResponse( streaming_content=sse_recommendation(), content_type=‘text/event-stream' ) O ctober 2023 

everyday superpowers Option 2 • Render a view • Subscribe to Server-Sent Events with HTMX • Send the slow parts to the page when they’re ready O ctober 2023 

everyday superpowers https://github.com/PyHAT-stack/web-async-patterns Let’s build better options together! 

everyday superpowers Exceptional experiences with Django • Use StreamingHttpResponse to stream critical elements to the user as quickly as possible. • Use HTML fragments to update parts of the page with HTMX. • Leverage scoped-down frameworks like AlpineJS to power rich interactions. 

everyday superpowers Proof-of-concept repo: https://github.com/PyHAT-stack/web-async-patterns Slides: https://speakerdeck.com/chrismay/html-ivating-your-django- app-with-alpine-htmx-and-streaming-html For more from me: https://everydaysuperpowers.dev https://fosstodon.org/@_chrismay