When determining the extent to which client-side code should be utilized

As I work on developing a website with an extensive admin section, I am contemplating the amount of logic to incorporate on the client side. Using Ruby on Rails, I have the option of generating admin pages solely server-side with light client-side code for basic enhancements, or employing a framework like AngularJS for a more dynamic single-page application interacting with the server via JSON.

The downside of a heavily client-side approach is the potential for longer initial page load times and increased weight on mobile devices. However, the upside includes enhanced responsiveness post-load and the ability to easily extend or repurpose the server application as just an API in the future.

I recently came across an article discussing how Basecamp achieved speed without much client-side UI. While they focused on their speed improvements, they didn't touch on their preference for server-side code.

In determining the optimal balance between client and server-side code, I welcome any insights, additional pros and cons, and recommended resources for further exploration. Thank you!

Answer №1

Exploring this topic is truly fascinating, and I believe many developers are pondering the same question.

To begin with, the choice largely depends on the specific project. Nonetheless, consider the following points that might aid in making your decision:

Considerations for the UI

If your application entails a sophisticated user interface with extensive user engagement (such as clicking, dragging, etc.) and aims to have a more desktop application-like interactivity, opting for the client-side approach may be most appropriate.

However, as you mentioned:

The frontend is relatively simple without a need for a complex UI, so I intend to keep client-side code to a minimum.

Rails Framework and Development Experience

It appears that DHH and consequently Rails do not prioritize a heavily client-focused approach.

It's crucial to remember that Rails originated from Basecamp, and the recent enhancements (introduced in Rails 4, such as Russian doll caching and turbo links) were tailored for Basecamp. While scrutinizing the UI of the new version, one can discern the rationale behind these features; however, not every application aligns with this document-centric model. Therefore, take the impressive outcomes from 37signals (including all performance metrics) with caution (e.g., their exceptional caching hardware setup isn't financially feasible for everyone).

Furthermore, keep in mind that projects like Angular and Ember are relatively young and undergoing significant (possibly disruptive) changes, leading to potential frustrations regarding API adjustments.

Also, reflect on your preferred development environment:

Do you lean towards Ruby/server-side development involving TDD, RSpec, and swift feedback loops or debugging within the browser and scripting in JavaScript? Although tools like the Ember Inspector have made noteworthy progress in enhancing the experience, do not underestimate the significance of this aspect, as it will consume much of your time.

Performance Consideration

Similar to DHH's article, remarkable results have been achieved through conventional server-side methods.

Conducting a performance comparison by developing identical applications for both architectures and engaging in testing is ideal yet impractical. Ultimately, the focus should lie on the UI and the perceived speed/performance of your application. If your UI revolves around a single page where users primarily stay focused, the client-side approach may seem more "responsive," compensating for the initial overhead of downloading Javascript files.

API Implementation

Incorporating a robust JSON API into your application presents a compelling argument for adopting the client-side approach. eviltrout noted:

An intriguing benefit of a feature-rich client-side application is establishing a thoroughly tested API. Since our app has consistently interacted with our API since day one, its reliability is validated.

Further Reading/Resources

Noteworthy individuals/projects to follow include:

  • Discourse, a forum software emphasizing client-side functionality
  • Jeff Atwood
  • Robin Ward (Discourse co-founder)
  • Sam Saffron (Discourse co-founder)
  • All have appeared on the Ruby Rogues podcast at
  • Robin's article on choosing Ember for Discourse
  • David Heinemeier Hansson

  • Railsconf 2013 video
  • Yehuda Katz (Ember/Rails team member)

  • Tom Dale (Ember team member)
  • Screencast by Yehuda introducing Ember Inspector

Ultimately, the decision hinges on the nature of your project. For less critical applications where experimenting with novel technologies and client-side frameworks like Ember and Angular is desired, I would recommend pursuing such options.

This remains a highly discussed subject presently and for the foreseeable future, and I am keen to witness how it unfolds. I hope this provides some insight.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why does Chrome keep retrieving an outdated JavaScript file?

Lately, I've been facing a frustrating issue that I just can't seem to figure out. Every now and then, when I update the JavaScript or CSS files for my website hosted on Siteground, Chrome simply refuses to acknowledge the changes. While other br ...

Typescript tutorial: Implementing a 'lambda function call' for external method

The Issue Just recently diving into Typescript, I discovered that lambda functions are utilized to adjust the value of this. However, I find myself stuck on how to pass my view model's this into a function that calls another method that hasn't b ...

Having difficulty accessing the 'makeCurrent' property of an undefined object in Angular mobile application

I have followed the steps outlined in the Angular mobile toolkit guide found at https://github.com/angular/mobile-toolkit/blob/master/guides/cli-setup.md My Node version is v4.4.3 NPM version is 2.15.1 The issue arises when I run the command $ ng serve, ...

Uncover the secrets of HTML with JavaScript

I'm facing an issue with extracting data from a link's data attribute and trying to decode the HTML within it, but unfortunately, it's not functioning as expected. Check out my code on JSFiddle: http://jsfiddle.net/Kd25m/1/ Here's the ...

The gulp-concat plugin fails to concatenate a file when deployed on Heroku

Utilizing gulp to produce a config.js file for Angular, then utilizing another gulp task to concatenate all .js files together. Here is the setup of the gulp tasks: gulp.task('config', function() { var environment = process.env.NODE_ENV || & ...

AngularJS and multiple document interface (MDI) Single Page Application (SPA) with

We are tasked with developing a multiple-document-interface web application where each document exists in its own tab on the same page to maintain a single-page application experience. We anticipate having up to 50 tabs open simultaneously and want the abi ...

Adding a blank data-columns attribute using jQuery:

I am trying to add the data-columns attribute for salvattore.js, but I am facing an issue where I cannot simply add the attribute without providing a value. Currently, my code looks like this: $('#liste-vdl div.view-content').attr("data-columns" ...

Is checking for an email address in a form necessary?

I am currently in the process of creating a coming soon page. I have included a form on the page where users can sign up using their email addresses, which are then sent to me via email. However, I need assistance in determining how to verify that the in ...

Issues arise when trying to use Prettier and ESlint in conjunction with one another

It appears that prettier is not formatting the code as desired. Here is my current ESLint configuration: "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ &q ...

Concealing specific elements in Angular by utilizing ng-class conditions

Here's the code snippet I am currently working with: <tr ng-repeat="version in allVersions" ng-class="{{ version['active'] == 'true' ? 'active' : 'inactive' }}"> </tr> The ng-class is functioning ...

Node.js request body is not returning any data

UPDATE: @LawrenceCherone was able to solve the issue, it's (req, res, next) not (err, res, req) I'm in the process of building a MERN app (Mongo, Express, React, Node). I have some routes that are functioning well and fetching data from MongoDB. ...

What is the process for executing code on a server by clicking a button?

In my Next.js application, there is a file named dummy.js with the following content: class Dummy extends React.Component{ static async getInitialProps(ctx){ return { dummy : 'abc'}; } displayHelloWorld(params) { cons ...

RSPEC failing to automatically invoke 'to_json' on 'render(json: @instance)'

While testing a controller action in rspec, we encountered an unexpected issue with the json response. Instead of receiving a full json object of the instance as expected, we were getting a partial response. => render(json: @instance) "{\" ...

What is the best way to keep a bootstrap navbar fixed at the top when scrolling? (It's a bit tricky)

Check out this image of my website header. HERE Is there a way to achieve a smooth scrolling effect for the blue navbar as I scroll down the page? (Specifically just the navbar, excluding the logo and social media elements). Using position:fixed; does ...

Validation in ASP.Net to ensure the correct number of days between the arrival and departure dates

One of my project requirements involves checking the validation of the number of days entered between two date selectors (From & To Dates). The constraint is that the difference should not exceed 100 days. I'm considering using ASP.NET validators for ...

Achieving a similar functionality to Spring Security ACL in a Node.js AWS Lambda serverless environment

I am tackling a javascript challenge that has me stumped. Specifically, I am trying to figure out how to implement fine-grained authorization using an AWS serverless approach. In Spring security ACL, users can be banned from specific tasks at the instanc ...

Node.js is the perfect platform for streaming videos effortlessly

I'm attempting to live stream a video from my server, but it seems like I may be doing something wrong: Here is how my routes are defined: var fs = require('fs'); router.get('/', function(req, res) { fs.readdir(__dirname + &ap ...

What is the method for retrieving array values from an attribute?

I am currently developing an Angular 6 application and I need to pass and retrieve array values dynamically through attributes. Here is the code snippet I have used for this purpose: HTML: <ul class="list-unstyled" id="list" [attr.parent_id]="123"> ...

Issue with animated cursor function not activating when used with anchor links

I've spent hours searching for a solution but I can't seem to find one. I'm attempting to modify the codepen found at https://codepen.io/Nharox/pen/akgEQm to incorporate images and links, however, two issues are arising. The first issue is t ...

What is the best way to format a text component so that the initial word in each sentence is bolded?

Creating a text component where the first word of the sentence is bold can be a bit tricky. The current solution may result in a messy output like "Tips: favouritevacation" where there is no space after "Tips:". This approach is not very elegant. One pos ...