How to access Java information in Javascript - javascript

I'm still learning programming, and for one of my assignments I need to create a web page for displaying the positions of some vehicles in a map. While I know Java and a little bit of Javascript, and I'm going to use a data base that I already know (ArangoDB), I'm not sure how to communicate the Java side with Javascript. On Java I created the repository for the data on the DB, with functions like insertEntity, getEntity(key), etc, and I have the structure for those entities in Java too (Vehicle class, BaseEntity class, Position class).
I need to access that information inside of Java with Javascript for displaying it on the map I got (Leaflet, works using JS).
I never created a complete application using different languages, so I'm lost on how to proceed here. While ArangoDB has a JS driver, I wanted to use the Java driver because I like more how you can strcuture objects in that language.
Currently I created a Maven project (first time using it) and I'm using ManagedBean from JSF for accessing some specific data and displaying it on a xhtml page. But I'm just messing around with this, seeing what works out of the box and what doesn't.
Even a reference to a resource for doing this (I'm guessing this falls under web developement) would be appreciated, as until this point the only things we've done are console programs.
Edit 1:
For clarification, the information in the database is being retrived by Java (backend) and I need that information in Javascript for displaying it on the map (frontend).

Related

Cache - How to use it? (in firebase for a beginner)

I as a beginner struggle a lot to figure out how you can save reads of data which is constantly queried. Does anybody has some good resources to learn about this. Currently I have a list of exercises, which is frequently refreshed, but the reads are much more compared to the writes. I set it up on firestore and always serve it through ejs (template engine) to my modal. Instead of always querying the same data all the time to my template, can I save the results and just serve them? I could also serve it statically, which wouldn't be so dynamic as it's made by hand. But I could then save a lot of reads and just query the newly added (creation Date after I implemented the data static),or?
In my project I am using just plain HTML and plain JavaScript (Cloud Functions with express)
Is there no common practice for this kind of situation? You could also save the data like every hour on Google cloud platform as a JSON tree and then read it from there? Would save a lot of reads or you could make something like a load more button, where only the first 20 results are loaded ( but this would make the user experience a little tricky and not so likable..)

Where should I place my JS code that interacts with the database

Alright, so ive been fiddling around with Spring Boot recently and built a pretty cool backend. I got a pretty good hang of it, I want to start to mess around with the front end more. So, I want to create a main feed that dynamically updates based on whats in my sql database. It will load a few objects/comments as I get closer to the bottom of the page. Something like the function of reddits system of its main feed. So I know I need to use JavaScript to implament the objects and I cant just use thymeleaf because thymeleaf creates the html on startup. I noticed JQuery and it seems cool but I was thinking, it seems like people put their calls to the server get requests in the public/resources folder. This includes the connection to the database. That just doesnt seem right to me at all, why would you want it to be public? And if it doesnt have to be public how do I do so.
So in summery: How do I server JS files that connect and use my database that can dynamically update my webpage. Also any recomendations on what to use?

What is the purpose of template engines in Java?

I'm an android developer and about two years and recently I've been thinking about building web applications. So I started researching about spring boot and everything is great. Then, I came across this thing called template engines (thymeleaf) which by definition separate your code from presentation.
What is confusing me is how can a backend server have html? should the presentation be handled by html, css and javascript in the front end? I even saw tutorials where they actually type in html code in their controller as return values.
My understanding is that the backend server exposes APIs for the frontend to use by using AJAX and the frontend will manipulate this data and present the information on the screen, why would a backend provide html code?
THank you
the frontend will manipulate this data
What front end? You mean the JavaScript code in the HTML page? Where did that come from? Oh yeah, the server.
It is the server that serves the HTML pages to the client, as well as any .js and .css files.
The server could provide static pages, and anything dynamic is handled by JavaScript. Or, the server could dynamically build the HTML page, using ... you guessed it ... a template engine.
You generally don't want JavaScript to build the page initially, just to use JavaScript for handling any dynamic behavior. Some pages don't even need any dynamic behavior.
Unless of course you're thinking about single-page applications (SPA), where there is only one root HTML page, and everything else is built client-side with JavaScript and AJAX calls, but most web applications are not SPAs.
Thymeleaf replaces JSP by providing HTML pages using a template engine. The controller requests the HTML file and Spring Boot provides that template after building it using the Model provided.
Thymeleaf is great because it allows you to rebuild templates on the fly. Lets say for example you're showing a users points to them on the front end, but maybe the points increase or decrease.
What you can do is build the template in the background using a Model. The Model reference is magically provided to the template provided which parses it.
#RequestMapping(...)
public String request(Model model) {
model.put("points", 5);
return "my-template.html"
}
Then use the Thymeleaf language to provide your object to the HTML file to be processed in the engine during runtime.
<html..>
<head>...</head>
<body>
<h1 th:text="${points}"></h1>
</html>
Spring Boots Template engine will build this in the background and present it to the user, but it will show the actual points to the end user! Hope this helps a tiny bit.
I know this question has been answered pretty effectively so far, but I want to add my two cents in as I work with Thymeleaf often.
The easiest way to think about a template engine is that it allows some dynamic development of html based on information passed to it by the controller method. This allows you to put logic in that normally wouldn't exist, or say display a certain section if a user is perhaps logged into admin.
If web pages were houses, html is the frame, css is the walls, Javascript is the lights and electricity, and a template engine would pretty much just be the architect designing the plans on the fly before the frame was built based on desires of the buyer of the house (user inputs).
OK, newer Apps and websites may just load/boot/open once and then pull or push data via AJAX requests, this is good, it saves traffic and it is fast.
But it has not always been like this and some Frameworks still don't build everything on small requests. Spring in Java or Symfony in PHP are MVC Frameworks and use template engines to build pages. This may sound a little outdated but there is still a lot of websites using this.
And if you build a web app for a customer with slow PCs or other devices and the page contents are performance heavy you might want to do as much work as possible on the server so that the user does not have to wait for long. And also you can cache the rendered pages. There is even server side rendering of react pages to e.g. make the initial page load faster...
With Java and Spring I did just use JSP I don't know thymeleaf. Just use what you like and maybe what is most supported/documented.
And building websites like this does not mean you cannot use AJAX, but if you use templates you need to think about what makes sense.
What is confusing me is how can a backend server have html?
The "back end" must have HTML, because that's what's delivered to, and rendered by, the client.
It may just be that the back end "server" is just a CDN delivering, say, an HTML/JS SPA, but there's still something delivering content to the browser.
That said: server-side rendering is still a thing, and has had a resurgence lately--a React app may have its initial rendering done on the server so again the client gets a page rendered with both HTML and associated data, and then starts acting like a normal SPA.
My understanding is that the backend server exposes APIs for the frontend to use by using AJAX and the frontend will manipulate this data and present the information on the screen, why would a backend provide html code?
Because something needs to run the JS to access those APIs.
Some history:
Browsers used to suck. JS used to be a neat add-on, sites were relatively static, and essentially all rendering was done on the server. The back end would get data from wherever it got data from and generate complete HTML pages, and there was little happening on the client side other than some form fields, maybe some validation, and that was about the extent of it.

Using JS Charting Libraries with NodeJS

I've got a question regarding JavaScript charting libraries (Flot Charts, to be more specific).
At the moment, every library I've come across requires an HTML document in order to work (where the chart/graph would be constructed, in a canvas element, for example), but my problem is that I'm not creating a traditional web-page/application that requires an .html document, I'm creating a bot.
The reason I'm using the chart library is to generate an image that the bot can render to the user. In order to generate the graphic, do I need to create some generic html page where I can generate the graphic and then grab it and store it with JavaScript in my NodeJS project? Or perhaps there's something that I'm missing entirely.
Any and all help is really appreciated. Thanks a lot
Since Javascript runs on the client and node runs on the server, you're going to have a hard time getting the server to save a snapshot of your generated graphic. That's typically done on the server side of things.
I would switch your library to Plotly (http://plot.ly) and utilize it's Static Image Export feature:
https://plot.ly/nodejs/static-image-export/

MVC3 - How to dynamically set facebook app Id in javascript?

I have an MVC3 web app that uses a number of the facebook api calls. When I am testing I am using one facebook app Id but will use another in prod (this will be swapped in during the build).
Ideally I'd like to put the app Id in the web.config file to make swapping it during the build easy and so that the id is only in one place. However, I can't see an elegant way to get the id from the app.config into the multiple javascript functions that need it. I looked at reading it into a variable in the _AppStart.cshtml file but not sure that this is right as it means reading the value into a c# object and then passing that as a string to a javascript function that is called before each page loads and that smells a bit wrong.
I'm still learning javascipt so I'm not sure how this thing "should" be done. Any pointers would be great.
Matt
So, I've just come across this which deals with my question. I thought I'd exhausted google before asking this question but obviously not ;-)
integrating-facebook-login-button-in-aspnet-mvc-4-application

Categories