Rails offers a unique hybrid approach that falls between Ember and traditional JavaScript responses

My current project is a standard rails application that has primarily utilized HTML without any AJAX. However, I am planning to gradually incorporate "remote" links and support for JS responses to improve the user experience. While I acknowledge that generating JS server side is considered evil by some, I find it convenient, efficient, and beneficial for enhancing the speed and responsiveness of the application, especially with built-in i18n capabilities.

Although opting for a pure JSON approach would result in a lighter solution, it requires significant client-side coding efforts.

Now, let's consider a scenario where users interact with a mailbox within the application. Since the goal is to enable users to perform most actions without reloading the page, the mailbox counter should update dynamically without requiring manual refreshes.

So, the question arises: What is the most effective way to address this challenge?

  1. One potential solution involves using Ember.js for data binding and integrating views from Rails through a handlebars implementation for Ruby. While this approach may offer great functionality, it can be less intuitive for developers. However, leveraging handlebars for ember-specific views while keeping the rest in their original format might streamline the process.

  2. Another option could be utilizing an event system like EventSource and adopting a JS-centric view approach to listen for relevant events. This method typically involves handling JSON objects as events and requires client-side coding for proper execution. Additionally, considering hosting on Heroku, a service like Faye might be necessary for real-time updates. Any suggestions for implementing this effectively?

While the ember.js approach appears more robust, it also seems complex and runs the risk of duplicating efforts across server and client sides.

EDIT:

I came across this article, which provides insights similar to option #2.

Answer №1

One interesting aspect of employing a JavaScript framework is the ability to consolidate and shrink the entire application into a single JavaScript file. With modern browsers caching JavaScript aggressively, subsequent requests for these assets could be eliminated after the initial page load.

Another benefit of utilizing a JavaScript framework is that it encourages you to interact with your own API. By developing the application's API for personal use, it may reduce future workload especially if there are plans for mobile apps or third-party integration.

If the application does not necessitate delivering an HTML response for every request, using a JavaScript framework could present a strong argument.

However, some advantages may diminish if the application requires responding to each request with an equivalent HTML template. The Ember core has expressed their disapproval towards supporting this style of progressive enhancement. Due to the current instability and immaturity of tools for implementing a JavaScript framework in such a manner, I might lean towards choosing option 2 to tackle this challenge.

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

When utilizing Ionic Firebase, the user profile saved in the sidemenu is stored using the Events class. However, the saved profile disappears as soon as

Hello there. I am currently working on displaying my user's information in the sidemenu, and after some research, I found that using the Events class might solve this issue. However, I have noticed that the data saved in subscribe gets destroyed whene ...

Inspecting element value on a website

On a marketplace website, I extracted the attribute (capacity_gold) from a table. Since the values are dynamic and constantly changing, I aim to develop a basic script that will notify me when the attribute value exceeds 100. The current value of the attr ...

Using Array.Map() to retrieve the child array within a React component

Here is the data I have retrieved from an API: [ { "id": 1, "appName": "string", "defaultAction": "string", "defaultMessage": "string", "rules": [ { "id": 1, "version": "string", "brand": "string", ...

Leveraging JavaScript to identify web browsers

I am looking to implement a feature on my website where if the visitor is using Internet Explorer 8.0 or an earlier version, they will receive an alert prompting them to upgrade their browser before proceeding. For users with other browsers, the page will ...

Angular: Modifying the parent scope from a child component

Hey there! So I'm a beginner in this whole programming thing, but I'm currently working on a small application where I can add and update items with details using Ionic, Cordova, and AngularJS. However, I've hit a roadblock with the followin ...

I encountered an issue in reactjs where I received the error message: TypeError: this.state.coords.map is not functioning properly

Here is the code snippet I wrote: import React, { Component } from 'react'; class LocationApp extends Component { constructor(props){ super(props) this.state = { coords:[], error:[], } } ...

The successful execution of $.ajax does not occur

Starting out with ajax, I wanted to create a simple add operation. Here is the code that I came up with: HTML: <!doctype html> <html> <head> <title>Add two numbers</title> <meta content="text/html;charset=utf-8" h ...

How to Access a Method from Controller 2 in AngularJS Controller One

angular.module('starter.controllers', []) .controller('controller1',function($scope) { $scope.function1= function () { // Code for controller1 function } }) .controller('controller2',fun ...

Utilize Vue.js to take screenshots on your device

After following the tutorial at https://www.digitalocean.com/community/tutorials/vuejs-screenshot-ui, I was able to successfully capture a screenshot with Vue.js. However, it seems that the dimensions of the screenshot are not quite right. Issue: The cap ...

Encountering difficulties accessing props while invoking a component in React

In my project, I've created a component called FilterSliders using Material UI. Within this component, I passed a prop named {classes.title} by destructuring the props with const { classes }: any = this.props;. However, when I try to access this prop ...

Preserve a data point without causing any alterations

I am working with a device that continuously sends values until it is stopped. These values are then saved inside an array. deviceMonitoring( device2 ){ // In this function, I populate the arrayTimestamp and then copy the first value. this.arrayElement = t ...

How to Conceal the <th> Tag with JavaScript

I attempted to conceal certain table elements using JavaScript. For <td> elements, it works fine: function hide(){ var x=document.getElementsByTagName('td'); for(var i in x){ x[i].style.visibility='hidden'; ...

Subsequent Ajax requests are fetching outdated data

Thank you so much in advance. Situation: I am attempting to query a mySQL database using jQuery and AJAX with multiple fields. The initial search works correctly. However, when I update the fields and perform a new search, the data from the original sear ...

How to hide an image in the React carousel display

I am having an issue with my Carousel, specifically with the image not being displayed even though I have set up the data in a const called items. Here is how my const looks: var items = [ { url:'../../assets/img/hors1.jpg', ...

Making a standard AJAX request using jQuery without including the XHR header

I am looking to make an ajax-type request using the following headers (or something similar): GET example.com/ajaxapi/article/1 HTTP/1.1 Host: localhost Accept: application/hal+json Cache-Control: no-cache The key aspect here is to accomplish this withou ...

Is it possible to execute a JavaScript command before the function finishes its execution?

Is there a way to hide a button when a function starts, display some text, and then hide the text and show the button again when the function finishes? I'm struggling with this task because JavaScript doesn't output anything to the screen until ...

JavaScript string: Use regex to find and replace with position index

I'm not very familiar with regex, so I'm curious about the process of replacing a section in a string based on a regex pattern where the index is part of the identified section. Let's consider this example string: let exampleStr = "How do ...

Signing in using Passport.js with mongoDB authentication

Apologies if this question appears redundant, but I am struggling to resolve an issue with a "MISSING CREDENTIALS" error when trying to implement user login using email and password. Despite going through numerous responses, none have provided a solution. ...

Is it feasible to maintain a persistent login session in Firebase without utilizing the firebase-admin package through the use of session cookies?

Currently, I am integrating Firebase into my next.js application for user login functionality. The issue I am facing is that users are getting logged out every time they switch paths within the site. Even though their session cookie has not expired, if the ...

What is the best way to dynamically select and deselect radio buttons based on a list of values provided by the controller?

I am currently working on implementing an edit functionality. When the user initially selects a list of radio buttons during the create process, I store them in a table as a CSV string. Now, during the edit functionality, I retrieve this list as a CSV stri ...