Jonathan Reinink — Podcast Appearances & Summaries

Featured On 1 Podcast

Full Stack Radio

3 episodes

All Appearances

3 episodes

108: Jonathan Reinink - Client-Side Rendering, Server-Side Routing

Full Stack Radio

Feb 14, 201970 minGuest/Recurring Guest

AI Summary

→ WHAT IT COVERS Jonathan Reinink explains his approach to building Laravel applications using Vue.js for all UI rendering while maintaining traditional server-side routing and controllers, avoiding the complexity of full single-page applications and APIs. → KEY INSIGHTS - **Hybrid architecture pain points:** Mixing server-rendered Blade templates with Vue components creates confusion about template locations, requires switching between build processes, and forces parent wrapper components when siblings need to communicate, eventually consuming entire page sections unnecessarily into Vue. - **Client-side rendering without SPAs:** Render every page as a full Vue component by passing component names and JSON-encoded props through data attributes on a root div, letting Vue instantiate on page load while controllers prepare all data server-side, eliminating API requirements. - **Data preparation advantages:** Controllers transform database queries into component-ready props before rendering, avoiding multiple HTTP requests that SPAs require. Six database queries on the server execute faster than six Ajax calls from the client, leveraging Laravel's Eloquent ORM directly. - **Authorization through props:** Pass permission checks as boolean props from controllers using a can object structure, either globally for page-level actions or nested within individual resources. This approach views all data through the authenticated user's lens, enriching resources with editable metadata. - **Route and layout solutions:** Use Ziggy library to expose Laravel named routes to JavaScript, register route as a Vue mixin for template access. Implement layouts as Vue components with default slots, enabling reactive title updates and component communication without server-side template inheritance. → NOTABLE MOMENT Reinink realized that using v-cloak to hide entire server-rendered pages until Vue loads eliminates the primary benefit of server-side rendering, making the approach pointless since users cannot see content any faster than pure client-side rendering would provide. 💼 SPONSORS [{"name": "Cloudinary", "url": "https://cloudinary.com"}, {"name": "Rollbar", "url": "https://rollbar.com/fullstackradio"}] 🏷️ Vue.js, Laravel, Server-Side Routing, Client-Side Rendering, Web Architecture

Read Full Summary Listen

104: Jonathan Reinink - Pushing More Work to the Database

Full Stack Radio

Dec 19, 201862 minGuest/Recurring Guest

AI Summary

→ WHAT IT COVERS Jonathan Reinink explains how pushing database queries instead of PHP logic reduced page loads from 30 seconds to milliseconds by using Postgres subqueries, date ranges, and WHERE NOT EXISTS clauses in Laravel Eloquent applications. → KEY INSIGHTS - **N+1 vs Memory Problems:** Loading 100 users with eager-loaded login records creates 10,000 Eloquent model instances consuming massive memory. Each model initialization adds milliseconds that compound into 200+ millisecond delays, worse than running multiple queries for performance-critical applications. - **Subquery SELECT Pattern:** Use SELECT sub in Laravel to add dynamic columns like last login date directly in the main query. Returns 200 total records for 100 users instead of 10,000, avoiding both N+1 queries and memory bloat while maintaining two-query efficiency. - **WHERE NOT EXISTS Optimization:** Database stops searching immediately after finding one matching record in WHERE NOT EXISTS subqueries. Reverse logic to check if conflicts exist rather than gathering all possibilities, dramatically reducing query execution time for eligibility and availability checks across large datasets. - **R-Rule Caching Strategy:** Cache time-based rules only when triggered by user actions, not time passage. Convert recurring availability rules into 365 daily records per teacher per school year, regenerating only when schedules change or administrators modify school year dates for real-time performance. - **Database-Specific Features:** Postgres offers native date range comparison and overlap detection unavailable in MySQL. Abstracting databases to remain database-agnostic sacrifices performance gains from specialized features like range operators, extensions, and optimized functions built into specific database engines over decades. → NOTABLE MOMENT A school district substitute teacher system processed tens of thousands of real-time phone calls through Twilio each morning. Converting complex PHP eligibility logic checking credentials, blacklists, and availability into one Postgres query eliminated 30-second page loads and cache invalidation nightmares. 💼 SPONSORS [{"name": "Refactoring UI", "url": "https://refactoringui.com/book"}, {"name": "Odeer", "url": "https://odeer.app"}, {"name": "Rollbar", "url": "https://rollbar.com/fullstackradio"}] 🏷️ Laravel Eloquent, Database Optimization, Postgres, Query Performance, Subqueries

Read Full Summary Listen

127: Jonathan Reinink - Building Modern Monoliths with Inertia.js

Full Stack Radio

Nov 6, 201996 minGuest/Developer of Inertia.js

AI Summary

→ WHAT IT COVERS Jonathan Reinink explains Inertia.js, a protocol enabling developers to build single-page applications using Vue, React, or Svelte with traditional server-side frameworks like Laravel or Rails, eliminating the need for separate APIs while maintaining modern interactive experiences. → KEY INSIGHTS - **Server-side routing with client-side rendering:** Inertia maintains traditional controller-based architecture where developers return component names and props instead of blade templates. Initial requests return HTML, but subsequent navigation sends JSON responses containing only the component name and data needed, keeping the Vue or React instance alive throughout. - **Automatic asset versioning:** Inertia solves stale asset problems by passing an MD5 hash of the asset manifest with each request. When the server detects mismatched versions between client and server, it automatically triggers a full page reload to fetch updated JavaScript and CSS, while preserving flash messages and form data through intelligent reflashing. - **Form handling without APIs:** Developers submit forms using inertia.post() methods that follow server-side redirects automatically. Validation errors flash to session and return as props to the same page component, displaying reactively without manual state management. Successful submissions redirect to new pages, maintaining the traditional server-side workflow without custom AJAX handlers. - **Preserve state for interactive elements:** Adding a preserve-state attribute to links prevents Vue or React from destroying the component during navigation. This maintains scroll positions, form input values, and focus states when filtering or searching on the same page, as only props update while local component state persists throughout the interaction. - **Persistent layouts for media players:** Inertia renders layout components independently from page components rather than as children, preventing audio players or scrollable sidebars from resetting during navigation. This architecture enables Spotify-like experiences where media continues playing while users browse different pages, matching traditional SPA capabilities without API complexity. → NOTABLE MOMENT Reinink reveals that browser AJAX requests automatically follow server redirects, enabling Inertia's form submission pattern. When a create-user endpoint validates data and redirects to an index page, the client receives the index page response without knowing the intermediate redirect occurred, perfectly mimicking traditional server-side form behavior while maintaining SPA responsiveness. 💼 SPONSORS [{"name": "DigitalOcean", "url": "https://do.co/fullstack"}, {"name": "Cloudinary", "url": "https://cloudinary.com"}] 🏷️ Inertia.js, Single-Page Applications, Laravel, Vue.js, Server-Side Rendering, Monolithic Architecture

Read Full Summary Listen

Never miss Jonathan Reinink's insights

Subscribe to get AI-powered summaries of Jonathan Reinink's podcast appearances delivered to your inbox weekly.

Start Free Today

No credit card required • Free tier available