Can babylonjs communicate with a REST endpoint? - reactjs

I am trying to develop a 3D UI with babylon. This UI is expected to communicate with some ReST endpoints. Basically clicking on certain points of the scene should make some ReST calls like get, post, put etc and accordingly some more sub scenes be displayed. Any leads to simple examples would be appreciated.

Sure, although I'd say that the two aren't really related. BabylonJS is the graphics library which allows you interact with Canvas and WebGL via JavaScript. Separately there are plenty of options to make REST requests via vanilla JavaScript (see here). So you'd be using JavaScript to code both your graphics and the REST requests. The way in which you combine the two is up to you!
Maybe start looking at https://doc.babylonjs.com/how_to/how_to_use_actions. That suggests you can hook up any JS code (your REST request for example) based on a trigger action.

Related

Where to put the business logic of a Chrome extension

I am developing my first Chrome extension and have a question related to where to put the main logic (and things like API calls).
I use React for the popup, so an option is to put all logic in these React components. This is what I would do if was making a normal web app.
But with extensions you also have background scripts. So if I for example have to implement OAuth logging-in logic, what is the best place to put all the code?
A simple logic: All the API calls should be done in background script and DOM manipulation in content script.

How to use GET in ReactJS web chat app with Rest API back-end?

I am creating a chat app using ReactJS for a class project web app. For the back-end I am using Rest API. So ideally when I post something on the chat, I would use POST and when I receive a message from the other end, I would use GET. In terms of POST, I figure I can associate that with an event, such as pushing the submit button for the chat app. However, I am racking my mind for how I would call GET for receiving a message. Would it be as simple as using a React life cycle function, such as ComponentDidMount to call GET for receiving a message? Or would I need to use a timer with one of those functions? Or is there a radically different method altogether? From what I see of the life cycle functions, they only update based on changes in state and props.
Quite a lot of questions you have there. I will provide one possible solution.
Choose or implement chat UI, I recommend using https://github.com/PeterKottas/react-bell-chat as it's very easy to setup.
Implement backend, I recommend dot net core as it's fairly easy to wire this up in that framework.
Forget GET-ing messages on a timer. Imagine you have 1000 users getting every 5 seconds. That's a home-brew DDOS attack. Instead use bidirectional communication.
SignalR is the library that can help you implement that, you google the official repo, there's plenty of examples.
Connect to signalR on front end using the javascript (or typescript) client they provide.
And you're pretty much done.
Here they use angular but you should get the gist of it https://codingblast.com/asp-net-core-signalr-chat-angular/

Using Angular with Play: Role for Scala Templates?

When I first looked at Play and went through all the samples, I was pretty excited by the zentasks sample and the fluid, clean, effortless Javascript routing that left the work of rendering things to Play. But we decided instead to go with Angular.
Upon going down that road, I thought that Angular would control all aspects of rendering.
However, we have a page that has to get a socket. We were having the socket made on the server, so for now, we still have a Play (Scala) template doing that. We have pared it down to pretty much nothing: create the socket and then inject it into the Angular context.
But we are also trying to do Protractor tests and that is made uglier by having to figure out how to accommodate the Scala template.
Question: should we just ditch the scala template and have the Angular controller call the server and get the socket? That was my favored approach to begin with.
I'm currently working on two Play apps with Angular and in both we decided to have one single main.scala.html file that load all the necessary controllers,services,directives, etc from angular using of require.js.
The goal with Angular is to create a single page app and therefore you should avoid to mix it with server side templates.
You must see your main.scala.html template as the entry point of your single page application. There you generate and load all the pieces you need and give the hand to angular to manage the rest.
I agree with Renato. It's probably better to have a single controller and template that sets up the single page app with angular. Then use AJAX to send requests from the browser to other controllers (see http://www.playframework.com/documentation/2.2.x/JavaJsonRequests).
If want to to avoid Scala templates completely, you can put your web pages and javascript in the public directory and only use AJAX.

How to create a dynamic front end based on Node JS, MongoDB, Sails JS

Basically I'm writing an app and am using Sails, MongoDB and Node JS for the back end. I'll use Sail's API features and was wondering what would be the best way to make the app realtime.
For instance I could use AJAX to call the API and manipulate the DOM using jQuery and update the DB through $.post then let the model update the db in the backend, however I'm finding this approach quite cumbersome. Not to mention I can see the code could become quite difficult to maintain after a while.
I've been doing some research and - if I understood correctly - it seems I could use either Backbone, Angular or Knockout to manipulate the data/DOM on the front end, however I'm not sure what would be the best approach in my case nor whether any of these would indeed suit my needs:
Being able to get the data dynamically
Update the data and the DOM dynamically as the user interact with the page
Post the updated data dynamically with none or as minimal data transformation on the back end as possible
All the above asynchronously
As I don't want this to become a heated debate on which library is best, so I would like to know only whether any of the aforementioned libraries can do what I need and which is the leanest/simplest/has the lighter learning curve.
I did similar research a while ago and when found AngularJS, just stopped looking any further.
Right to your questions:
Being able to get the data dynamically
It is pure pleasure to do it in Angular. For the very basic functionality you have got $http service which allows you to send http request and register a callback when the data arrives.
For more complicated things there are modules ngResource and Restangular (external).
Update the data and the DOM dynamically as the user interact with the page
For manipulating DOM, Angular introduced concept of directive. It is basically future of the web (Shodow DOM and Web Components) right now. At this time point, there is nothing more elegant out there.
Post the updated data dynamically with none or as minimal data transformation on the back end as possible
Yes. JSON.
All the above asynchronously.
Yes, of course.
SailsJS provides interchangeability of HTTP or socket.io connections. In your case I think sockets would be a better fit than AJAX.

Client-side MVC frameworks for ClojureScript

I'm trying to choose a library for client-side MVC in ClojureScript. Here's are the ClojureScript libraries I've found so far:
WebFUI (https://github.com/drcode/webfui)
Enfocus: (http://ckirkendall.github.io/enfocus-site/)
Pedestal (http://pedestal.io)
Ducttape (https://github.com/hozumi/ducttape.cljs)
C2 (http://keminglabs.com/c2/) It seems this can be used as a DOM framework.
How should I choose between them? Also, how will they compare to using AngularJS or Backbone from ClojureScript?
This is not exactly a complete framework, maybe just the V of the client side MVC but it worth to keep an eye of it.
https://github.com/swannodette/om
A ClojureScript interface to Facebook's React
Om allows users to represent their UIs simply as EDN. Because ClojureScript data is immutable data, Om can always rapidly re-render the UI from the root. Thus Om UIs are out of the box snapshotable and undoable and these operations have no implementation complexity and little overhead.
Please don't miss this read http://swannodette.github.io/2013/12/31/time-travel/
Ganelon (which I am author of) is a Clojure web microframework built on top of Ring/Compojure.
It is not exactly client-side MVC, as in general it provides a simple mechanism, that allows us to:
invoke XHR request from a thin JavaScript layer (e.g. on link click or form submit)
return JSON response containing operations to be performed (e.g. update DIV, display modal, etc.)
perform operations from step 2 through a thin JavaScript layer
Docs & demo are available here: http://ganelon.tomeklipski.com.
I am the author of Coils, another Client Side Clojure framework:
https://github.com/zubairq/coils

Resources