Top method for incorporating Ember.js with outside code (such as Android's WebView)

Can someone advise on the best approach to developing an Ember.js app that needs to interact with external code, such as being called from an Android app through a WebView or other sources outside of the Ember Application's scope?

In such cases, having a clear public interface between the JavaScript and Java worlds is crucial. This interface could be an encapsulated object that allows the Ember.js router to respond to changes in the application state. While AngularJS seems to handle this type of scenario well with services and Dependency Injection, it's not as straightforward in Ember.js. What mechanisms does Ember.js provide for creating an external interface between the App and the outside world?

While there are potential workarounds like using App.container, I'm seeking a solution that aligns with the framework's intended design principles. I don't want to end up battling against the framework I choose. That's why, for this specific project, I'm considering using a less opinionated framework like Backbone.js, even though I appreciate the overall organization of Ember.js based on my limited experience.

javascriptember.jsintegration

Answer №1

I'm interested in learning about the most effective approach...

It's difficult to pinpoint a single best practice for integrating with external code.

When working on an Android app using a WebView, it is essential to have a public interface bridging the gap between JavaScript and Java. This interface could be an encapsulated object that enables Ember.js router to respond to changes in the application state.

Using a controller singleton for this purpose makes sense. By accessing the router, this controller can also interact with other controllers to alter their state.

App.ApplicationRoute = Ember.Route.extend({
  setupController: function() {
    bridge = this.controllerFor('bridge');
    // While functional, relying on a global constant is not ideal
    // Dependency Injection would offer a better solution, as shown below...
    ImaginaryJavaLibrary.sendStateChangesTo(bridge);
  }
})

App.BridgeController = Ember.Controller.extend({
  eventOne: function(data) {
    //react to state change, possibly triggering actions on the router.
  }
})

AngularJS appears to excel in providing services for this purpose (which could serve as my interface) and facilitating Dependency Injection. What mechanisms does Ember.js provide for establishing an external interface between the App and the outside world?

Services are impressive. Although AngularJS may document Dependency Injection more thoroughly, ember also incorporates this concept seamlessly. Refer to this post for instructions on injecting objects (like your interface) into an ember application.

Dive into this guide explaining how to integrate Pusher - it aligns closely with what you're seeking:

Here are some additional resources outlining alternative approaches we've discussed:

  • Accessing ember router via global constant (not recommended) Emberjs - how to access router in RC1
  • Utilizing Ember Instrumentation: How to fire an event to Ember from another framework

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

What is the best way to incorporate an apostrophe into a string so that it can be displayed in a tooltip using jQuery

There is a text or string stored inside the 'data' variable, containing some texts with apostrophes. The issue I'm facing is that the tool tip is not displaying the text after the apostrophe symbol. How can I include all texts, including apo ...

javascriptjquery

How can I create distinct edges that intersect the surfaces of other objects in THREE.js?

Currently, I'm involved in a three.js project where I need to display all edges of geometries, even when those edges intersect with surfaces of other objects. Below is the code snippet that showcases my dilemma: var camera, scene, renderer, materi ...

javascriptthree.js

How to dynamically populate a Vue multiple select dropdown with v-for loop?

I have been attempting to implement multi-select questions in Vue using v-for. The Select menu and its options are populated via JSON data. Unfortunately, I am facing difficulty in retrieving the selected results as expected. Whenever I select an option ...

javascriptvue.jsvuejs2

Transition one background image into another using background positioning

Snippet of code: https://jsfiddle.net/foy4m43j/ HTML: <div id="background"></div> CSS: #background { background-image: url("http://i.imgur.com/hH9IWA0.png"); background-position: 0 0; background-repeat: repea ...

javascriptjqueryhtmlcss

Oops! You can only have one parent element in JSX expressions

I'm working on creating a password input box, but I keep encountering an error when integrating it into my JS code. Here's the snippet of my code that includes TailwindCSS: function HomePage() { return ( <div> <p className=&q ...

javascripthtmlreactjsnext.js

`Modify the appearance of the child's image`

I'm currently using this script to create a basic image gallery. However, I am encountering an issue where the border style of the image within 'this' is not changing as expected. Can you help me identify what I might have done incorrectly? ...

javascriptimage-gallery

Remaining stationary as additional elements are inserted at the start of the div

I'm currently working on a chat page. Within this page, there is a div element that serves as the message container. As users scroll up, a request is sent to the server to retrieve older messages, which are then added to the beginning of the message c ...

javascriptvue.js

Issues with sending empty strings to an API in Vue Js

My code below is designed to update data using a Node Js REST API. The remaining field contains an equation using v-model=remaininginst to calculate and store the result in remaininginst. However, when I check the console.log, I am getting NaN empty data s ...

javascriptvue.js

What is the best way to determine which function to invoke in ngIf?

Depending on the value of a variable, I need to call either the login() or logout() methods from this.loggedInService.isLoggedIn. If the value of the variable is !this.loggedInService.isLoggedIn, then call login(). If !this.loggedInService.isLoggedIn is ...

javascripthtmlangulartypescript

Is it possible to Use Vuejs 2 to Update MathJax dynamically?

Just figured out how to resolve this issue. Simply bind the data using v-html <div id="app"> <h1 v-html="equation"></h1> <button @click='change'>Change</button> </div> var vm ...

javascriptvue.jsvuejs2mathjax

Using the "this" keyword within a debounce function will result in an undefined value

It seems that the this object becomes undefined when using a debounce function. Despite trying to bind it, the issue persists and it's difficult to comprehend what is going wrong here... For instance, in this context this works fine and returns: Vu ...

javascriptvue.js

What are the best ways to improve ajax response in jQuery?

My database query is fetching around 5000 rows of data along with data from 5 relational tables, leading to performance issues. The network tab shows the size of the request resource as 9.1 mb. After that, I am dynamically adding this data to a table using ...

javascriptjqueryajaxxmlhttprequest

Loading an external script is causing a total style overhaul on my website

Every time I load my page to check the remaining balance of a gift card (using a third-party script), it seems to mess up the styles that are already set on my website. Here is a snippet of the code causing the issue: <div id="main" class=&quo ...

javascripthtmlcsshandlebars.js

Using Node.js to convert a file name to a timestamp

I need to change a filename into a timestamp in my Laravel application. let test = "/2020-05-16_11-17-47_UTC_1.jpg" I attempted using split and join to replace the -, but I don't believe it's the most efficient method. The desired output should ...

javascriptnode.js

Angular - Execute function every 30 seconds while considering the duration of the function execution

In my Angular 7 application, I am utilizing RxJS to handle asynchronous operations. My goal is to retrieve a list of items from an API endpoint every 30 seconds. However, there are times when the request may take longer than expected, and I want to ensure ...

javascriptangulartypescriptrxjs

Upon initiating a refresh, the current user object from firebase Auth is found to be

Below is the code snippet from my profile page that works perfectly fine when I redirect from the login method of AuthService: const user = firebase.auth().currentUser; if (user != null) { this.name = user.displayName; this.uid = user.uid; } e ...

javascriptangularfirebasefirebase-authentication

Why won't angularjs interpret my object accurately?

Currently, I am in the process of developing an angularjs application and I have encountered a minor issue. The problem arises when I populate a list of projects and then apply filtering based on certain conditions. Visually, everything appears fine on the ...

javascriptangularjs

Create JavaScript variable from either HTML or database sources

Hello, I am trying to implement a counter that retrieves its value from a JavaScript file, but I would like to customize it. Below is the JavaScript code: function updateCounter(count) { var divisor = 100; var speed = Math.ceil(count / divisor); ...

c#javascriptasp.nethtml

Embracing the use of paragraph tags within tweets on a webpage

For a project on freecodecamp.com, I created a quote machine where you click a button to get a random quote and then have the option to tweet it using the "Tweet It" button. However, I encountered difficulty in getting the quote to display properly in the ...

javascriptjqueryhtmltwitter

What are some best practices for preventing unforeseen rendering issues when utilizing React Context?

I am encountering an issue with my functional components under the provider. In the scenario where I increase counter1 in SubApp1, SubApp2 also re-renders unnecessarily. Similarly, when I increase counter2 in SubApp2, SubApp1 also gets rendered even thou ...

javascriptreactjsreact-nativereact-navigation-v5