Client Side mvc versus Server side pros and cons

Some technologies will work better for some situations than others. Client side mvc is more suitable for some use cases than others. 
So it depends on many factors. e.g. If a "desktop-like" ui experience is critical, then think client side mvc. If your team has little javascript experience or mvc experience or you have significant SEO requirements then client side mvc may not be a good fit. 
The following are my opinions and are not conclusive. Recommend you also research the web.

Client side mvc
Pro: User experience: traditional web apps typically submit a request and get back a full page each time; client side mvc apps handle more processing on the client and also typically make data requests to the client which should be faster to turnaround. Use gmail? Then you're using a single page app. gmail and others such apps provide a desktop-like experience in the browser. No page refreshes. We'll see more and more of these kinds of apps.
Pro: Code organization: mvc is an established pattern and brings organization to complicated client side code, which is becoming more and more complicated (how many lines javascript in gmail which downloads over 400kb of optimized javascript!)
Pro: Server load; less and smaller (data) requests to server; more work done on clients browser
Pro: fun! not to be underestimated but as a developer, to me its fun and enjoyable to develop client side mvc (especially if you have the right tooling and build scripts e.g. see yoeman.io project)
Con: SEO: client side mvc uses hashbang in url for older browsers (< IE9) to navigate pages then that is not seen by SEO crawlers. Not an issue for all apps, but is an issue for some e.g. not an issue for apps which require user input to get to next step (e.g. step by step wizards) since they cannot be crawled anyway.
Con: Rendering: with client side mvc this is both a pro and a con frankly. A benefit is rendering views on the client but a challenge can be reusing the same rendering (if needed) on the server.
Con: like any technology there's a learning curve (but then again, learning curves are a given in the technology business)

Server side mvc
Pro: SEO: Does not have SEO issues since uses normal urls (no hashbang)
Pro: Well known and understood
Pro: Rendering and routing on the server; frankly depending on how you view it this is also a con!
Con: Full page loads; can be mitigated some but still not same as whats possible with client side mvc
Con: Client side code organization; most apps have a lot of logic and javascript on the client these days. Server side mvc does not help organize code on client side. So developers are left to their own devices, sometimes good sometimes bad. Client side mvc brings consistent organization and patterns to the client.

Comments

Post a Comment

Popular posts from this blog

deep dive into Material UI TextField built by mui

Image
The Material Design system is a design system used to create consistent digital experiences across platforms such as android, web and ios. Includes: a color system a typography system a shape system a grid system it addresses motion and lots more Also includes Material Theming which makes it easy to customize Material Design to match your brand. Material Design is not just a set of guidelines it is a whole ecosystem. Material itself stopped maintaining it's react implementation and recommends opensource versions.  A very popular open source implementation is  MUI ,  a react component library  built to implement Material Design . Bills itself as the "worlds most popular React UI framework" and at this time has 1.2M weekly downloads on npm and used by over 750k projects on github (did I mention it's very popular?).  Note: there are other react component libraries implementing bootstrap and ant design for example, so up to you and your design team on what you choose. 
Read more

angular js protractor e2e cheatsheet

Many from the protractor test suite category detailed task syntax example load page load a page browser.get('yoururl') browser btn actions browser back/forward browser.navigate().back() OR browser.navigate().forward() access elements on page See Protractor API list and examples from Protractors test suite access by angular ngmodel name (must match ngmodel in the html) this is the preferred approach element(by.model('person.name')); access by the css id on the page e.g, #user_name (but this can be brittle) element(by.id('user_name')) access angular binding to get generated value i.e. for {{}} element(by.binding('person.concatName')); access angular repeat list data (must match repeat stmt in the html) See Protractor test suit l
Read more

react-router v6.4+ loaders, actions, forms and more

react-router  react-router is used for in app single page app navigation, we configure routes for pages in the app to map to components react-router has over 1bn downloads, its an industry standard (but there are others e.g. Nextjs router) many apps use react-router, many on v5.x the new react-router 6.4.x the newest major version of react router v6.4 is a significant enhancement which adds a lot of new features. react-router v6.4 offers new features to load data (loaders) and handle actions (actions).  It's done gone all Remix-y which makes sense because the same guys wrote both. eliminates a lot of boilerplate code to fetch data in useEffect() and set various loading states put your data load and update logic in react-route components instead of custom code unlike Remix, react-router v6.4 is still just all on the client (not server like Remix) paradigm shifts Lets start with a couple of high level ideas; "back to the future" so to speak OR "what's old is new ag
Read more