[{"data":1,"prerenderedAt":237},["ShallowReactive",2],{"term-m\u002Fmvc":3,"related-m\u002Fmvc":222},{"id":4,"title":5,"acronym":5,"body":6,"category":202,"description":203,"difficulty":204,"extension":205,"letter":206,"meta":207,"navigation":208,"path":209,"related":210,"seo":215,"sitemap":216,"stem":219,"subcategory":220,"__hash__":221},"terms\u002Fterms\u002Fm\u002Fmvc.md","MVC",{"type":7,"value":8,"toc":196},"minimark",[9,14,18,22,25,29,185,189,192],[10,11,13],"h2",{"id":12},"eli5-the-vibe-check","ELI5 — The Vibe Check",[15,16,17],"p",{},"MVC is like a restaurant: the Model is the kitchen (data and logic), the View is the plate of food (what the user sees), and the Controller is the waiter (takes orders, talks to the kitchen, brings back food). They each have one job and stay in their lane.",[10,19,21],{"id":20},"real-talk","Real Talk",[15,23,24],{},"Model-View-Controller is an architectural pattern that separates an application into three components: the Model manages data and business logic, the View renders the user interface, and the Controller handles input and orchestrates the flow between Model and View.",[10,26,28],{"id":27},"show-me-the-code","Show Me The Code",[30,31,36],"pre",{"className":32,"code":33,"language":34,"meta":35,"style":35},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Controller\napp.get('\u002Fusers', async (req, res) => {\n  const users = await User.findAll(); \u002F\u002F Model\n  res.render('users\u002Findex', { users }); \u002F\u002F View\n});\n","javascript","",[37,38,39,48,103,137,174],"code",{"__ignoreMap":35},[40,41,44],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sHwdD","\u002F\u002F Controller\n",[40,49,51,55,59,63,66,69,73,75,78,82,85,89,91,94,97,100],{"class":42,"line":50},2,[40,52,54],{"class":53},"sTEyZ","app",[40,56,58],{"class":57},"sMK4o",".",[40,60,62],{"class":61},"s2Zo4","get",[40,64,65],{"class":53},"(",[40,67,68],{"class":57},"'",[40,70,72],{"class":71},"sfazB","\u002Fusers",[40,74,68],{"class":57},[40,76,77],{"class":57},",",[40,79,81],{"class":80},"spNyl"," async",[40,83,84],{"class":57}," (",[40,86,88],{"class":87},"sHdIc","req",[40,90,77],{"class":57},[40,92,93],{"class":87}," res",[40,95,96],{"class":57},")",[40,98,99],{"class":80}," =>",[40,101,102],{"class":57}," {\n",[40,104,106,109,112,115,119,122,124,127,131,134],{"class":42,"line":105},3,[40,107,108],{"class":80},"  const",[40,110,111],{"class":53}," users",[40,113,114],{"class":57}," =",[40,116,118],{"class":117},"s7zQu"," await",[40,120,121],{"class":53}," User",[40,123,58],{"class":57},[40,125,126],{"class":61},"findAll",[40,128,130],{"class":129},"swJcz","()",[40,132,133],{"class":57},";",[40,135,136],{"class":46}," \u002F\u002F Model\n",[40,138,140,143,145,148,150,152,155,157,159,162,164,167,169,171],{"class":42,"line":139},4,[40,141,142],{"class":53},"  res",[40,144,58],{"class":57},[40,146,147],{"class":61},"render",[40,149,65],{"class":129},[40,151,68],{"class":57},[40,153,154],{"class":71},"users\u002Findex",[40,156,68],{"class":57},[40,158,77],{"class":57},[40,160,161],{"class":57}," {",[40,163,111],{"class":53},[40,165,166],{"class":57}," }",[40,168,96],{"class":129},[40,170,133],{"class":57},[40,172,173],{"class":46}," \u002F\u002F View\n",[40,175,177,180,182],{"class":42,"line":176},5,[40,178,179],{"class":57},"}",[40,181,96],{"class":53},[40,183,184],{"class":57},";\n",[10,186,188],{"id":187},"when-youll-hear-this","When You'll Hear This",[15,190,191],{},"\"Rails follows MVC by default.\" \u002F \"Put that logic in the model, not the controller.\"",[193,194,195],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":35,"searchDepth":50,"depth":50,"links":197},[198,199,200,201],{"id":12,"depth":50,"text":13},{"id":20,"depth":50,"text":21},{"id":27,"depth":50,"text":28},{"id":187,"depth":50,"text":188},"architecture","MVC is like a restaurant: the Model is the kitchen (data and logic), the View is the plate of food (what the user sees), and the Controller is the waiter (...","beginner","md","m",{},true,"\u002Fterms\u002Fm\u002Fmvc",[211,212,213,214],"MVVM","MVP","Architecture","Separation of Concerns",{"title":5,"description":203},{"changefreq":217,"priority":218},"weekly",0.7,"terms\u002Fm\u002Fmvc",null,"4W2_SqLKEX38aXWP3JsvKzEIg5hVSOKxHLNyZbqugo0",[223,227,231,234],{"title":213,"path":224,"acronym":220,"category":202,"difficulty":225,"description":226},"\u002Fterms\u002Fa\u002Farchitecture","intermediate","Architecture is the master blueprint for your app — like deciding whether to build a house, apartment block, or skyscraper before laying a single brick.",{"title":212,"path":228,"acronym":212,"category":229,"difficulty":204,"description":230},"\u002Fterms\u002Fm\u002Fmvp","general","An MVP is the simplest version of your product that actually works well enough for real users to use and for you to learn from.",{"title":211,"path":232,"acronym":211,"category":202,"difficulty":225,"description":233},"\u002Fterms\u002Fm\u002Fmvvm","MVVM is MVC's cooler cousin for UI-heavy apps.",{"title":214,"path":235,"acronym":220,"category":202,"difficulty":204,"description":236},"\u002Fterms\u002Fs\u002Fseparation-of-concerns","Separation of Concerns means different parts of your code should handle different concerns and not step on each other's toes.",1776518293939]