{"id":26,"date":"2026-06-06T21:48:59","date_gmt":"2026-06-06T21:48:59","guid":{"rendered":"https:\/\/softwareproduction.eu\/wordpress\/?p=26"},"modified":"2026-06-06T23:45:48","modified_gmt":"2026-06-06T23:45:48","slug":"the-full-picture-what-the-new-concept-delivers","status":"publish","type":"post","link":"https:\/\/softwareproduction.eu\/?p=26","title":{"rendered":"The Full Picture \u2014 What the New Concept Delivers"},"content":{"rendered":"\n

Twentieth and final article in a series about migrating from legacy architectures to a modern Nuxt 4 stack.<\/em><\/p>\n\n\n\n

\n\n\n\n

From Parts to Whole<\/h2>\n\n\n\n

The previous fifteen articles describe individual pieces \u2014 the GraphQL gateway, code generators, performance, infrastructure, security. This article brings them together and answers the question that matters to decision-makers: what does the complete system deliver?<\/strong><\/p>\n\n\n\n

\n\n\n\n

The Architecture at a Glance<\/h2>\n\n\n\n
flowchart TB\n    A[\"Azure Front Door<br\/>(CDN + WAF)\"] --> B[Azure Container Apps Environment]\n    B --> C[\"Nginx Proxy<br\/>TLS, Image cache, OTel spans\"]\n    C --> D[\"Nuxt 4<br\/>SSR + GQL Gateway<br\/>SSR, GraphQL stitching<br\/>Page cache, Redis\"]\n    D --> E[\".NET API<br\/>Pricing, Orders, Users, Validation\"]\n    D --> F[\"Redis<br\/>(per-env)\"]\n    B --> G[\"External Services<br\/>Headless CMS \u00b7 Application Insights<br\/>Azure Key Vault \u00b7 Azure AD\"]<\/pre>\n\n\n\n
Four containers per environment. One frontend language (TypeScript<\/strong>). One data schema (GraphQL<\/strong>). One module system (Nuxt modules<\/strong>). One configuration generator (YAML \u2192 JSON + Bicep<\/strong>).<\/p>\n\n\n\n
\n\n\n\n
The Five Pillars<\/h2>\n\n\n\n
Five architectural pillars, each delivering measurable value in a large enterprise application.<\/p>\n\n\n\n
Pillar 1: Unified Data Layer (GraphQL Schema Stitching)<\/h3>\n\n\n\n
What it delivers<\/strong>: One API endpoint for all data sources. The frontend never needs to know which backend produced which field.<\/p>\n\n\n\n
Before<\/th>After<\/th><\/tr><\/thead>
3\u20135 REST calls per page<\/td>1 GraphQL query per page<\/td><\/tr>
Manual data joining in frontend code<\/td>Automatic via @delegate<\/code> directive<\/td><\/tr>
Per-endpoint types, manually maintained<\/td>Generated from unified schema<\/td><\/tr>
Custom error handling per API<\/td>One Apollo error link<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Pillar 2: Total Automation (Code Generation)<\/h3>\n\n\n\n
What it delivers<\/strong>: Developers write declarations (GraphQL queries, YAML translations, GraphQL input types). The system generates everything else.<\/p>\n\n\n\n
flowchart LR\n    A[What developers write] --> B[What is generated]\n    A1[.graphql files] --> B1[\"Typed composables<br\/>(auto-imported)\"]\n    A2[YAML translation files] --> B2[\"Typed t.* proxy chain<br\/>(auto-imported)\"]\n    A3[GraphQL input types] --> B3[Form field metadata + validation]\n    A4[CMS content model] --> B4[Vue component stubs + types]\n    A5[Module scaffold command] --> B5[Complete module structure]<\/pre>\n\n\n\n
Roughly 40\u201360% of the TypeScript code is generated<\/strong> \u2014 not boilerplate, but correct implementations derived from authoritative schemas.<\/p>\n\n\n\n
Pillar 3: SSR Performance Stack<\/h3>\n\n\n\n
What it delivers<\/strong>: Near-instant page loads with near-perfect Lighthouse scores.<\/p>\n\n\n\n
flowchart TB\n    S[Performance Stack]\n    S --> L1[\"SSR<br\/>Content visible immediately\"]\n    S --> L2[\"Multi-Tier Cache<br\/>Sub-ms data retrieval\"]\n    S --> L3[\"Deferred Hydration<br\/>No render-blocking JS\"]\n    S --> L4[\"Same-Origin Proxy<br\/>\u2212594ms LCP\"]\n    S --> L5[\"Font Strategy<br\/>Zero CLS\"]\n    S --> L6[\"Bot Detection<br\/>Clean audit scores\"]\n    S --> L7[\"Manual Chunks<br\/>Only needed JS per page\"]\n    S --> R[\"Combined Result<br\/>Lighthouse 97+ (mobile)\"]<\/pre>\n\n\n\n
Pillar 4: Production-Grade Operations<\/h3>\n\n\n\n
What it delivers<\/strong>: Elastic infrastructure, zero-downtime deployments, full observability, and instant rollback.<\/p>\n\n\n\n
Capability<\/th>Implementation<\/th>Article<\/th><\/tr><\/thead>
Elastic scaling<\/td>Container Apps auto-scale (5\u201320 replicas)<\/td>11<\/td><\/tr>
Zero-downtime deploy<\/td>Blue-green with traffic switching<\/td>11<\/td><\/tr>
Per-branch environments<\/td>Automated feature deployments<\/td>11<\/td><\/tr>
Full request tracing<\/td>W3C Trace Context across all services<\/td>13<\/td><\/tr>
Security<\/td>CSRF + Azure AD + runtime CSP<\/td>12<\/td><\/tr>
Instant rollback<\/td>Traffic switch to previous revision<\/td>11<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Pillar 5: Developer Experience<\/h3>\n\n\n\n
What it delivers<\/strong>: Fast feedback loops, strong type safety, AI-assisted debugging, and clear modular boundaries.<\/p>\n\n\n\n
Aspect<\/th>Experience<\/th><\/tr><\/thead>
New data source<\/strong><\/td>Write .graphql<\/code> file \u2192 composable auto-imported<\/td><\/tr>
New translation<\/strong><\/td>Add YAML key \u2192 t.section.key<\/code> typed and available<\/td><\/tr>
New module<\/strong><\/td>Run scaffold \u2192 complete structure created<\/td><\/tr>
Debugging<\/strong><\/td>AI assistant with 30+ live inspection tools<\/td><\/tr>
Architecture understanding<\/strong><\/td>AGENTS.md<\/code> + module READMEs + consistent patterns<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
For Decision-Makers: The Numbers<\/h2>\n\n\n\n
Performance<\/h3>\n\n\n\n
These example metrics illustrate typical gains when moving a legacy enterprise frontend to a modern SSR + GraphQL stack:<\/p>\n\n\n\n
Metric<\/th>Legacy<\/th>New<\/th>Improvement<\/th><\/tr><\/thead>
Median response time<\/td>2,618 ms<\/td>165 ms<\/td>15.9\u00d7 faster<\/strong><\/td><\/tr>
Error rate<\/td>3.91%<\/td>0.09%<\/td>97% lower<\/strong><\/td><\/tr>
Lighthouse Performance (mobile)<\/td>~50<\/td>97+<\/td>+47 points<\/strong><\/td><\/tr>
LCP<\/td>> 5 s<\/td>< 2.5 s<\/td>Google “good”<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Capacity and Cost<\/h3>\n\n\n\n
Metric<\/th>Legacy<\/th>New<\/th>Improvement<\/th><\/tr><\/thead>
Max tested capacity<\/td>~99 RPM<\/td>494+ RPM<\/td>5\u00d7 more<\/strong><\/td><\/tr>
Infrastructure model<\/td>Fixed (always on)<\/td>Elastic (pay-per-use)<\/td>~40% cost reduction at average load<\/strong><\/td><\/tr>
Scaling<\/td>Manual (operations team)<\/td>Automatic (config-driven)<\/td>Zero manual intervention<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Development Velocity<\/h3>\n\n\n\n
Metric<\/th>Legacy<\/th>New<\/th>Improvement<\/th><\/tr><\/thead>
New API integration<\/td>Write REST client + types + mapper<\/td>Write .graphql<\/code> file<\/td>~90% less glue code<\/strong><\/td><\/tr>
New form<\/td>Backend + frontend sync + manual testing<\/td>Schema-driven, auto-validated<\/td>No manual field wiring<\/strong><\/td><\/tr>
New CMS content type<\/td>Manual component + data fetching + types<\/td>Generated component stub + typed query<\/td>No boilerplate<\/strong><\/td><\/tr>
New translation key<\/td>Add key, hope it matches at runtime<\/td>YAML key \u2192 typed t.section.key<\/code><\/td>Compile-time checked<\/strong><\/td><\/tr>
New module<\/td>Create folders, wire routing, exports, types<\/td>yarn plop<\/code> \u2192 complete scaffold<\/td>Consistent structure in seconds<\/strong><\/td><\/tr>
Type safety coverage<\/td>Partial (hand-written)<\/td>Complete (generated)<\/td>Zero type drift<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n
For Architects: The Design Principles<\/h2>\n\n\n\n
Five design principles unify the decisions across all 15 articles for large-scale web applications.<\/p>\n\n\n\n
1. Generate, Don’t Write<\/h3>\n\n\n\n
If code can be derived from an authoritative schema (GraphQL, CMS model, YAML translations), generate it. Hand-written code drifts; generated code stays correct.<\/p>\n\n\n\n
2. One Source of Truth Per Concern<\/h3>\n\n\n\n
    \n
  • Data shape \u2192 GraphQL schema  <\/li>\n
  • Validation rules \u2192 Backend model annotations  <\/li>\n
  • URL structure \u2192 CMS entries  <\/li>\n
  • Translations \u2192 YAML files  <\/li>\n
  • Infrastructure configuration \u2192 YAML values files  <\/li>\n<\/ul>\n\n\n\n
    No concern has two sources. Everything is defined once and consumed many times.<\/p>\n\n\n\n
    3. Eliminate Work, Don’t Optimize It<\/h3>\n\n\n\n
    The biggest performance gains came from removing<\/strong> work: modulepreload hints, cross-origin connections, redundant CMS queries. The biggest productivity gains came from removing boilerplate. Subtraction outperforms optimization.<\/p>\n\n\n\n
    4. Modules as Boundaries<\/h3>\n\n\n\n
    Folders suggest organization. Modules enforce it. With 35+ modules, each owning its own API surface, the codebase has real boundaries.<\/p>\n\n\n\n
    5. Measure Everything, Assume Nothing<\/h3>\n\n\n\n
    Architecture claims without data are opinions. Load test results, Lighthouse scores, cache hit rates, and response time distributions turn them into evidence. The production configuration is shaped by measurement.<\/p>\n\n\n\n
    \n\n\n\n
    Lessons Learned<\/h2>\n\n\n\n
    The whole is greater than the sum of the parts<\/h3>\n\n\n\n
    No single technique produces a 15.9\u00d7 improvement. Stitched GraphQL removes multi-source joins, caching eliminates redundant fetches, deferred hydration removes render-blocking JS, and elastic infrastructure eliminates over-provisioning. Each targets a different bottleneck; together they transform the system.<\/p>\n\n\n\n
    Architecture must allow change<\/h3>\n\n\n\n
    The architecture is designed upfront \u2014 but designed for adaptability<\/em>. Technology and requirements evolve, and the system must evolve with them. An architecture that requires wholesale rewrites accumulates debt until it becomes unmaintainable.<\/p>\n\n\n\n
    Four mechanisms make change safe:<\/p>\n\n\n\n
      \n
    • Loose coupling via modules.<\/strong> Dozens of independent modules, each owning a vertical slice. Replacing authentication, tracking, or forms never cascades into unrelated code. A module can be deleted and rebuilt without touching the rest.<\/li>\n
    • Code generation from schemas.<\/strong> Generated code follows the schema it came from. When a data source changes or a service is replaced, regeneration produces correct integration code. No hand-written adapter layer drifting from reality.<\/li>\n
    • Schema-driven contracts (GraphQL).<\/strong> The frontend depends on a unified schema, not individual backends. A service can be rewritten, split, or replaced \u2014 as long as it serves the same fields, no frontend changes are required. New clients (mobile, internal tools) consume the same gateway without backend modifications.<\/li>\n
    • Infrastructure as configuration.<\/strong> The same YAML generates manifests for Container Apps, AKS, and App Service. Switching platforms or adding environments is a configuration change, not a re-architecture.<\/li>\n<\/ul>\n\n\n\n
      In practice: adding a data source is one subgraph and a stitch directive. Changing rendering strategy is a route rule. Replacing a backend service is transparent to the frontend. Swapping a module is contained to its directory.<\/p>\n\n\n\n
      Things that change often (services, modules, data sources, infrastructure) are easy to change. The few core decisions that are hard to change (framework, data protocol) are chosen carefully and affect only their own layer.<\/p>\n\n\n\n
      Developer experience is a force multiplier<\/h3>\n\n\n\n
      Fast feedback loops (auto-generated types, branch environments, AI debugging) do not just improve morale \u2014 they improve the system. When adding a data source takes minutes instead of hours, teams integrate more data. When debugging takes minutes instead of days, bugs get fixed faster.<\/p>\n\n\n\n
      Developer hardware is not optional<\/h3>\n\n\n\n
      This architecture demands fast machines. The dev stack runs a Nuxt server watching thousands of files, a GraphQL server, code generators, and TypeScript language services analyzing the module graph \u2014 simultaneously. When hardware falls short, HMR becomes sluggish, type checking lags, and code generation feels blocking.<\/p>\n\n\n\n
      Windows is particularly affected. Node.js file watching and module resolution are measurably slower on NTFS than on macOS or Linux. Teams on Windows need WSL2, faster disks, or higher-spec hardware.<\/p>\n\n\n\n
      A trade-off worth noting: the architecture optimizes for velocity given adequate hardware<\/em>. The minimum spec is higher than simpler stacks. Budget accordingly.<\/p>\n\n\n\n
      \n\n\n\n
      What’s Next<\/h2>\n\n\n\n
      The remaining articles dive deeper into specific technical patterns:<\/p>\n\n\n\n
        \n
      • Article 17<\/strong>: The @delegate<\/code> Directive Deep Dive<\/em> \u2014 Cross-subgraph field resolution in detail  <\/li>\n
      • Article 18<\/strong>: Building a Headless Design System \u2014 The Compose Pattern<\/em> \u2014 Separating style logic from templates  <\/li>\n
      • Article 19<\/strong>: A\/B Testing at SSR Level<\/em> \u2014 Cookie-based variant selection during server rendering  <\/li>\n
      • Articles 20\u201327<\/strong>: Content preview, logging, module development, conditional rendering, image proxying, observability, reactive filters, and deferred hydration<\/li>\n<\/ul>\n\n\n\n
        \n\n\n\n
        Munir Husseini is a software architect specializing in full-stack TypeScript, .NET, and cloud-native architectures.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
        Twentieth and final article in a series about migrating from legacy architectures to a modern Nuxt 4 stack. From Parts to Whole The previous fifteen articles describe individual pieces \u2014 the GraphQL gateway, code generators, performance, infrastructure, security. This article brings them together and answers the question that matters to decision-makers: what does the complete […]<\/p>\n","protected":false},"author":1,"featured_media":248,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-26","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advanced-web-app-with-nuxt-and-net"],"yoast_head":"\nThe Full Picture \u2014 What the New Concept Delivers - Scalable Web Production<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/softwareproduction.eu\/?p=26\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Full Picture \u2014 What the New Concept Delivers - Scalable Web Production\" \/>\n<meta property=\"og:description\" content=\"Twentieth and final article in a series about migrating from legacy architectures to a modern Nuxt 4 stack. From Parts to Whole The previous fifteen articles describe individual pieces \u2014 the GraphQL gateway, code generators, performance, infrastructure, security. This article brings them together and answers the question that matters to decision-makers: what does the complete […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/softwareproduction.eu\/?p=26\" \/>\n<meta property=\"og:site_name\" content=\"Scalable Web Production\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-06T21:48:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-06T23:45:48+00:00\" \/>\n<meta name=\"author\" content=\"Munir Husseini\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Munir Husseini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=26#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=26\"},\"author\":{\"name\":\"Munir Husseini\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#\\\/schema\\\/person\\\/fec48f54713e1bd117640fb9b748802f\"},\"headline\":\"The Full Picture \u2014 What the New Concept Delivers\",\"datePublished\":\"2026-06-06T21:48:59+00:00\",\"dateModified\":\"2026-06-06T23:45:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=26\"},\"wordCount\":1205,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=26#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/20-the-full-picture.jpg\",\"articleSection\":[\"Advanced Web App with Nuxt and .NET\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/softwareproduction.eu\\\/?p=26#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=26\",\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=26\",\"name\":\"The Full Picture \u2014 What the New Concept Delivers - Scalable Web Production\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=26#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=26#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/20-the-full-picture.jpg\",\"datePublished\":\"2026-06-06T21:48:59+00:00\",\"dateModified\":\"2026-06-06T23:45:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=26#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/softwareproduction.eu\\\/?p=26\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=26#primaryimage\",\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/20-the-full-picture.jpg\",\"contentUrl\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/20-the-full-picture.jpg\",\"width\":1733,\"height\":1300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=26#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/softwareproduction.eu\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Full Picture \u2014 What the New Concept Delivers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#website\",\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/\",\"name\":\"Softwareproduction\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/softwareproduction.eu\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#organization\",\"name\":\"Munir Husseini\",\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/softwareproduction-logo-32.png\",\"contentUrl\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/softwareproduction-logo-32.png\",\"width\":32,\"height\":32,\"caption\":\"Munir Husseini\"},\"image\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#\\\/schema\\\/person\\\/fec48f54713e1bd117640fb9b748802f\",\"name\":\"Munir Husseini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g\",\"caption\":\"Munir Husseini\"},\"sameAs\":[\"https:\\\/\\\/softwareproduction.eu\\\/\"],\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Full Picture \u2014 What the New Concept Delivers - Scalable Web Production","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/softwareproduction.eu\/?p=26","og_locale":"en_US","og_type":"article","og_title":"The Full Picture \u2014 What the New Concept Delivers - Scalable Web Production","og_description":"Twentieth and final article in a series about migrating from legacy architectures to a modern Nuxt 4 stack. From Parts to Whole The previous fifteen articles describe individual pieces \u2014 the GraphQL gateway, code generators, performance, infrastructure, security. This article brings them together and answers the question that matters to decision-makers: what does the complete […]","og_url":"https:\/\/softwareproduction.eu\/?p=26","og_site_name":"Scalable Web Production","article_published_time":"2026-06-06T21:48:59+00:00","article_modified_time":"2026-06-06T23:45:48+00:00","author":"Munir Husseini","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Munir Husseini","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/softwareproduction.eu\/?p=26#article","isPartOf":{"@id":"https:\/\/softwareproduction.eu\/?p=26"},"author":{"name":"Munir Husseini","@id":"https:\/\/softwareproduction.eu\/#\/schema\/person\/fec48f54713e1bd117640fb9b748802f"},"headline":"The Full Picture \u2014 What the New Concept Delivers","datePublished":"2026-06-06T21:48:59+00:00","dateModified":"2026-06-06T23:45:48+00:00","mainEntityOfPage":{"@id":"https:\/\/softwareproduction.eu\/?p=26"},"wordCount":1205,"commentCount":0,"publisher":{"@id":"https:\/\/softwareproduction.eu\/#organization"},"image":{"@id":"https:\/\/softwareproduction.eu\/?p=26#primaryimage"},"thumbnailUrl":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/20-the-full-picture.jpg","articleSection":["Advanced Web App with Nuxt and .NET"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/softwareproduction.eu\/?p=26#respond"]}]},{"@type":"WebPage","@id":"https:\/\/softwareproduction.eu\/?p=26","url":"https:\/\/softwareproduction.eu\/?p=26","name":"The Full Picture \u2014 What the New Concept Delivers - Scalable Web Production","isPartOf":{"@id":"https:\/\/softwareproduction.eu\/#website"},"primaryImageOfPage":{"@id":"https:\/\/softwareproduction.eu\/?p=26#primaryimage"},"image":{"@id":"https:\/\/softwareproduction.eu\/?p=26#primaryimage"},"thumbnailUrl":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/20-the-full-picture.jpg","datePublished":"2026-06-06T21:48:59+00:00","dateModified":"2026-06-06T23:45:48+00:00","breadcrumb":{"@id":"https:\/\/softwareproduction.eu\/?p=26#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/softwareproduction.eu\/?p=26"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/softwareproduction.eu\/?p=26#primaryimage","url":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/20-the-full-picture.jpg","contentUrl":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/20-the-full-picture.jpg","width":1733,"height":1300},{"@type":"BreadcrumbList","@id":"https:\/\/softwareproduction.eu\/?p=26#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/softwareproduction.eu\/"},{"@type":"ListItem","position":2,"name":"The Full Picture \u2014 What the New Concept Delivers"}]},{"@type":"WebSite","@id":"https:\/\/softwareproduction.eu\/#website","url":"https:\/\/softwareproduction.eu\/","name":"Softwareproduction","description":"","publisher":{"@id":"https:\/\/softwareproduction.eu\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/softwareproduction.eu\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/softwareproduction.eu\/#organization","name":"Munir Husseini","url":"https:\/\/softwareproduction.eu\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/softwareproduction.eu\/#\/schema\/logo\/image\/","url":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/05\/softwareproduction-logo-32.png","contentUrl":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/05\/softwareproduction-logo-32.png","width":32,"height":32,"caption":"Munir Husseini"},"image":{"@id":"https:\/\/softwareproduction.eu\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/softwareproduction.eu\/#\/schema\/person\/fec48f54713e1bd117640fb9b748802f","name":"Munir Husseini","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g","caption":"Munir Husseini"},"sameAs":["https:\/\/softwareproduction.eu\/"],"url":"https:\/\/softwareproduction.eu\/?author=1"}]}},"jetpack_featured_media_url":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/20-the-full-picture.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/posts\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26"}],"version-history":[{"count":10,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/posts\/26\/revisions"}],"predecessor-version":[{"id":249,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/posts\/26\/revisions\/249"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/media\/248"}],"wp:attachment":[{"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}