How do I divide tasks between frontend and backend properly? - javascript

I have an idea to make something similar to Workflowy but with some new features.
(Workflowy is basically a note-taking app which beautifully organises all your notes as an endless tree)
At first, I implemented the logic in Python. It works in a terminal by printing notes line-by-line and then waiting for the command.
Is this a good idea to keep all the logic at the server and use JS only to render items and to send commands to the server?
For instance, if I want to move the entire folder into another folder, there are two ways of doing this:
Way 1: With Python which receives a command from JS 'move folder x to folder y', processes it and sends back a result to render.
Way 2: With JS which then has to understand all the folder structure and logic. In this case, the app will use a server only for storing data.
I have a feeling that way 2 (using JS to understand all the logic and Python only for saving data) is more appropriate, but this means that I have to rewrite everything from scratch.
Is the way 1 also reasonable?
Many thanks in advance!

It depends on the application you are making.
Like if you want to display thousands of data in html file, and data are stored in a json file. If you send html file and json file to the client from the server, then on the client side, you run a script that reads json file and displays it in html, then it will be slower, because client device may not be that powerful as the server is.
So for performance, use heavy tasks on server side, this may cause little more internet usage because as the client has no data in formatted manner, whenever new task on data is to be performed, you have to request the server again.
But for opposite case, you can save internet and little low performance. Here you can do some heavy tasks on client side.
It also depends on which device is used at client side.

Related

How to get data from web form into a file on the server [pm2]

So- I have some python scripts running permanently on my VPS and I want to be able to send them data to chew on via a simple web interface.
I do not mind how it gets the data. It seems to me that the simplest is probably to write the data to a file, and the python script automatically reads from this file every X seconds for changes. Then the solution need not involve python in any way.
From reading elsewhere, I believe the simplest solution is a simple php script. The problem here is that I'm running a pm2 server on the VPS. Pm2 does not support php I believe- and I can't install LAMP as this would presumably interfere with pm2.
I've looked into trying to do this with JS but that saves files client side and I need it server side.
I've also looked into cgi (I have zero experience with this) but pm2 doesn't seem to support this either?
Is there some fancy solution using node js?
What is the best way to tackle this problem!?

Where do I put front-end code in my backend project and how/when to run it?

The question is, say I have written a backend REST service using Python, and then some other guy wrote some frontend code in Angular JS. Is the typical workflow putting them into two separate folders and run them separately? So the process will look like below
python manage.py runserver
in Python colder and then probably
# in the angular2 folder
npm start
Or should I place all the JS code into some assets folder and when I start my server, all the JS code will run automatically with them? If so, how should I do it?
Another question related is, when is all the JS code sent to users’ browsers? If the app is a client-side rendering app, is the code sent to browser at the first time of server requesting? How does the server know it should package your JS code and ship it?
Q)The question is, say I have written a backend REST service using Python, and then some other guy wrote some frontend code in Angular JS. Is the typical workflow putting them into two separate folders and run them separately?
Both Angular and Python can be run differently as well as together.
You could choose to place the Angular files (which qualify for all practical purposes as public files) in the public (or related folder) depending on which framework you're using - Django, Flask, Web2py or so on.
You can also choose to run them independently as standalone apps.
Depends on your requirement. Honestly, there are so many ways to answer this question.
Q)Or should I place all the JS code into some assets folder and when I start my server, all the JS code will run automatically with them? If so, how should I do it?
If you place everything in your assets folder, then as soon as the home route or any other route is made a request for [from a browser] , the public folder passes on to the browser.
Although I'm not sure if it is the case with server side rendering.
If you're using Angular 1, I do not think it fits server side rendering although you could use some libraries out there.
Q)Another question related is, when is all the JS code sent to users’ browsers? If the app is a client-side rendering app, is the code sent to browser at the first time of server requesting? How does the server know it should package your JS code and ship it?
All the files in PUBLIC folder on the server are accessible by a browser.
All of your questions seem to essentially ask the same question.
There are many approaches to this problem.
If infrastructure management is difficult for you, than maybe it's easier to place them in the same server. You can create another directory and place your html that is served to browser with your JavaScript code.
In case you have a good pipeline (which I think it pays for it self) than having another server that serves your application is better. You can do more things without affecting your service, like caching etc. And your server that runs your service wont be busy serving assets as well.
I have a case where we run a node server, which serves the html and javascript to our users, because that way we can do server side rendering.enter link description here
The flow of code execution will be this : Once the browser of your user hits the server that is serving html and assets, it will download it locally and it will start with JavaScript execution (Parsing, Compiling and Executing). Your JavaScript app might do some API calls upon initialization or it might not, but your service will be executed only if frontend makes a request.
As for CORS it is irrelevant how you serve them, because you can keep them always in the same domain.

Machine Learning on web, PHP connection with python

I'm currently working on a ML project with geo data...
In my web I let the models parameters of the machine learning algorithm to the user, then I send those to an Apache server where PHP gets the parameters... In js I use Ajax to make the POST request.
My ML algorithm is made with Python, right now is working with the library argparse to read the parameters that PHP sends (after of a verification) as command trough the function exec()
I have 2 problems with this:
If the ML model takes time to calculate the results, the exec function does't wait for them and returns null after some time, but if it's fast everything is ok. I already have the function set_limit_time(0); in my PHP file.
In my local machine it doesn't take so much time to calculate results like on the server, but the server has better hardware, so I don't know what is going on there.
PHP 7.0.15
Python 2.7
Server Apache/2.4.18 (Ubuntu 16.04.1 LTS)
Also, is there a better way to do this?.
I'd like to suggest another approach.
Whenever you call your algorithm from the command line, you have a bootstrapping time: importing libraries (such as numpy), loading datasets, etc. Then you perform your calculations, return a response and clear the memory. So the next time you need another result, you have to go through all the process again.
I'd suggest embedding that algorithm inside a small Flask application (you already know Python and know how to use PHP for web, it shouldn't be that hard.
Since your python web server will have all the libraries and the datasets already loaded, it would be much faster in answering your questions.
And you can access it from PHP doing an HTTP request with curl (it has timeout!).
I think this would be much easier and scalable.
Just my two cents!
I ended up opening a Python Socket and connecting PHP trough it, now the process it's still slower than my local machine but the timeout is not longer a problem.

How can I use Node.js Offline/locally?

Maybe i'm misunderstanding how Node.js works but, I would like to use it just as a server backend for a web app, without it running as a service/listening a port.
I'm willing to hear ideas to better solve the issue, this app will only be available on our intranet.
Example of what i'm thinking :
backend server.js :
function connectDb(usr, pwrd){
//Some npm package code to connect to a db
return console.log("Sucessfully connected")
}
frontend javascript.js :
require("server.js")
$(".connect.button").on("click", function(e){
connectDb($(".connect.user").text(), $(".connect.pwrd").text())
})
There are two different aspects with your question and code example on which you could work to get a better understanding of the ecosystem.
Client / Server
When a client wants to get some resource from a server, it connects to a specific port on that server, on which the back-end application is "listening". That means, to be able to serve resources coming from a database, you must have a Node process listening to a port, fetching the requested resources from the database, and returning them. The perfect format for that kind of data exchange is JSON.
To get a better understanding of this process, you may want to try and write a simple Node app sending a piece of JSON over the network when it receives a request, and try to load it with an XHR in client code (for example with JQuery's AJAX method). Then, try and serve a dynamic piece of JSON coming from a database, with a query based on the request's content.
Module loading
require("server.js") only works in Node, and can't be used in JavaScript that is running in a client's browser (Well, at least for now. Maybe some kind of module loading could be normalised for browsers, but that's another debate.).
To use a script in a client browser, you have to include it in the loaded page with a <script> tag.
In node, you can load a script file with require. However, said script must declare what functions or variables are exposed to the scripts that require it. To achieve it, you must export these variables or function setting module.exports.
See this article to get some basic understanding, and this part of Node docs to master all the details of module loading. This is quite important, as this will help you structure your app and avoid strange bugs.
For one thing, node itself isn't a web server: it's a JS interpreter, which (among other things) can be used to write a web server. But node itself isn't a web server any more than Java is.
But if you want things to be able to connect to your node program, in order to do things like access a database, or serve a webpage, then, yeah, your program needs to be listening on some port on the machine it's running on.
Simply having your node program listening to a specific port on your machine doesn't mean that anyone else can access it; but that's really a networking question not a programming question.

Write PDF files from Web-App to USB-Stick

I am concerned with the feasibility of this:
On a pre-configured machine I will have a Web-Application pre-installed, next to an Apache-Suite. So client and server are the same!
In this Web-Application Users can drag and drop PDF-Files to an USB-Icon.
Then the Web-App should write the dropped PDF to an attached USB-Stick.
I have never done something like this (writing to USB), so I am fairly insecure.
And I am well aware of the browser-restrictions concerning JavaScript and Filesystem-Access, but...
after researching a bit I found out, that there might be some possible and
relevant (I'm a Web-Platform-Guy) solutions to this:
Make a "Chrome App" with USB-Permission (does this really work?)
Use PHP to find the USB and then write to it (how would that work under Windows?)
Use some Flash as middle man (not preferred)
Now I'd like to know:
Has anyone some good experience with before mentioned possibilities?
Has anybody ever done something similar? Did it work? Which path did you choose?
How would I know which drive the USB is mounted, and how would I get sure?
What other possible solutions to this problem are there?
You have a website ('client-side' user interface) and a back-end server ('server-side') running on the same machine. This gives you 2 options:
Client-side: Download a file through the browser via HTTP GET and let the user choose where they save it.
Server-side: Build your USB interactions into the back-end (Node.js) code, as #mcgraphix suggests.
Interacting with the USB on the server-side provides the most flexibility. Furthermore, there are a number of libraries that you can leverage. Head to npmjs.org and consider, among others, the following Node.js server-side packages:
usb-detection
usb
With the server-side approach, initiate a Webservice request when the user completes the drag & drop action on the client, and implement the USB interaction within the server (Express.js or similar) method which services the request.
If the letter of the stick is known then writing a file from PHP will be simple
file_put_contents( 'E:\\folder\\file.pdf', $data );
Update
You can read a list of drives into a dropdown and allow a user to select a default drive to write to
https://stackoverflow.com/a/8210132/696535
Your question is more an architecture question than a code specific question.
Your web app (if you insist on a web app) should have two major components, a server side component that can be given arbitrary commands, and a client side component (javascript using XMLHttpRequest) that can make requests to the server side component to execute said arbitrary commands.
So your server side component, the component that serves your web page should have some server side code that can write your pdf to the file system, it should probably generate the pdf file as well rather than doing that on the web browser.
Which technology you use is up to you, whether that's PHP, .Net, Node.js etc...
The general gist is you want a server side framework that deals with HTTP requests, in your case probably a post request from the client side containing the encoded pdf, and responds accordingly. Bind a particular http route to trigger your save logic.
Your http post request to the server will contain your payload which is the pdf file to a particular path, e.g. http://localhost/savepdf that whichever technology stack http listens to (you'll need to configure that)
Your server side component should read the incoming data, decode it as appropriate then make a file system request to write the received payload to disk.

Categories

Resources