I am trying to build some UI in front of an existing java code base. The UI needs to change/update dynamically as the user interacts with it.
I am familiar (no more experience than that) in writing javascript / jquery based UIs. React appears to be very intuitive and I did a quick (and almost complete functionality that I need) prototype in the last two days - I guess seasoned React developers might only take a few hours to build what I came up with so far.
However, I don't like the fact that I need to run this React app on Node.js (on the server-side).
Did I get that right?
I read about Babel standalone, but it is not recommended on production envs.
Since I already have a backend (to be honest, even if I had to build it afresh, there's at least a 70% chance that I will choose Java)
From the current app, all I need is a dynamically updating user interface that interacts with my java backend.
The question
Is it possible to pre-compile the current React app I built into a bunch of pure javascript files?
However, I don't like the fact that I need to run this React app on Node.js (on the server-side).
This is only true if you're deliberately using server-side rendering instead of the (more common) method of simply compiling the code to plain JavaScript and serving that compiled code. Once the code is compiled, that's it - you don't need to use Node anymore.
It'll be perfectly fine to have a Java backend for the live server while also using Node only when you need compile the React code (which can be completely separate from the live server). A common framework for beginners for compiling React to plain JS is create-react-app.
Related
I'm in the process of updating an old piece of software (running Apache2, PHP, MariaDB, HTML, CSS) to use a React frontend. I'm completely new to React and I'm between beginner and intermediate with vanilla JavaScript so I've been researching this the last few days.
My confusion is about backend with a React web app. If I want to keep the existing architecture in place aside from frontend, will I be able to painlessly have my apache2/php integrate with my React app? And I'm also confused about the role of Node.js. Some places describe it as just extra libraries, and some places describe it as an Apache2 replacement. I think the source of my confusion is that so far in learning React and Node it always requires me to run npm start. Which feels very much like running a server like apache.
I guess in a nutshell my question is - what will my project structure look like when using a React frontend? Will I have just javascript files and host that on Apache? Or will this need to be run on Node? And where does my PHP fit in, will this need re-written in JS?
EDIT : For further clarification. I'm asking about the differences between a Node.js server and Apache2 server. That's the focus of my issue. Additional points of discussion to help me understand the problem are how PHP and React fit into all this, and whether my understanding of Node as an Apache-like tool is correct. Hopefully that makes this question less broad
For the purposes of building a React app against an existing set of web services: Node.js is used only at build time. It is used to execute the build tools which generate static files which are deployed on your Apache HTTP server.
Node.js is also used to run the development server for the React application that hot reloads it as you save changes to the source code.
Node.js can be used to run an HTTP server which hosts web services written in JavaScript (which which case it either replaces Apache or sits behind Apache (which is configured to act as a reverse proxy) … but that isn't your use case.
In the last few years, I’ve been working with an old fashioned stack, but pretty effective for my use case. The stack was Node + Express.js + Angular.js 1.x.
Basically, the backend made the rendering of the view (via dot.js or Handlebars, any template engine) and then, in the Frontend side, the Angular app was mounted.
The use case needed to be SEO friendly, so the content must be generated at the backend and served directly. Also, the UI has its functionality, forms, etc. It’s not just dummy text.
Currently for a new project with the same use case, I want to update my stack (using SSR aka server side rendering) where the app does not need to be a SPA (single web app). The base stack is still the same (Node + Express.js) and the only thing I want to update is the frontend library / framework.
I am looking for a framework / library with a big community and an easy way to share component and codebase across project. That’s why my first thought was React.
The first thing I found was Next.js and while I was reading and investigating, it goes beyond what I need. It is a quite big framework that has too much stuff I don’t need and I do not want to add overhead to my application and I cannot customize it as I desire.
I continue researching and I found an express package called "express-react-views" that is a template engine for express but it does not allow to mount the React application at the client side.
Browsing through the Github issues of the package, I found many people asking for these and they all end up being answered that Next.js was the way to go.
My doubts / concerns are the following:
Is React the right tool / library for this use case?
In case of not being, what do you recommend?
Being the right one, is there any package / tool on top of React and Express that helps me out with SSR that allows me the customization I need?
I don’t want to rely again in old or antique tools like jQuery or Angular.js 1.x because the maintenance and code sharing across projects is complex and annoying.
The easiest solution, without going deeply into Next.js, is using the native React feature ReactDOMServer:
https://reactjs.org/docs/react-dom-server.html#reference
It's actually pretty easy to use, you just serve the HTML as a string and mount your React App Client Side if you want then to handle requests with React Router.
I'm working with an existing old web project, and want to start using angular 7 in the project from now on, mostly in order to not stay behind with old tech. The server side is php 7, and client is html + javascript (using jQuery). Server is Apache.
I want to continue using php for server side, and start using angular for client side.
I've tried to find information but couldn't find anything useful.
My question is: Is it possible to add angular to the code from now on, while the old pages continue working using their current code (regular js and html pages)? can I add angular to my project and work with it from now on, without making too big changes in the existing code? If so, how can I do that?
Thanks
Unlikely
It will be very tough.
Angular is a complete full-fledged web framework that includes a bootstrapping process which makes it very difficult to integrate with an existing project.
You could consider using something like React instead. Because it is not a framework (just a view library) it is easier to integrate with existing code and has support for gradual adoption.
React has even included a small tutorial that adresses this issue
Use case
I've got an existing project developed in C# using WinForms with custom controls for the GUI. We are amazed by the approach to write GUIs using HTML/CSS/JS and we are looking for the best way to write a GUI for our desktop application using the above mentioned languages. We only need to support Windows devices.
My worries:
It doesn't take long to come across recommendations using electron-edge. While I am not so worried to get everything working, I am worried about:
Debugging my C# code (I still want to be able to start my whole application right from VS and debug it look I am used to it). I read that I would need to attach to the node.js application in order to debug my C# code afterwards. Since the whole program language is written in C# that sounds like a pain?
As far as I got edge will let it run as just one process. Can I consider the electron application as an own thread which would still run while my C# code is stuck somewhere?
My option:
I am still positive I want to write my desktop GUI with HTML/CSS/JS. What I considered instead of using electron-edge is writing an own electron application which does communicate with my C# backend using named pipes. I wonder if there are larger roadblocks why I wouldn't want to do this and use electron-edge instead?
My question:
I would like to get feedback for my two concerns mentioned above and I also would like to get input about my option to create the GUI as own electron process, so that I have two processes (GUI+Backend) when someone runs my application.
Electron.NET may be a option for you. You can write c# code with electron.
You can do it in many ways
1) COM. Create C# COM DLL. Create wrapper functions for the DLL using N-API (Native node module) or use FFI. You can access the functions from JS.
2) Create a .Net web server and include your functions as REST endpoints. From UI make http request to communicate (Clear separation of UI & BEnd)
You can checkout my github repo for a few alternatives to electron.
I think a most import question would be how your frontend interacts with the backend? Is there any notifications need push to the frontend?
WebSocket could be a good option for two ends communication.
I want a javascript framework which has features like below:
MV*
Well structured
Html file as template
Rendering fast(maybe virtual dom?)
Combine and compatible with other plugins or libraries
Edit on tablet IDE apps and view in browser immediately by refreshing page after I changed code
When I am at home, I use PC to develop my client-side(or front-end) applications.
When go out, I use my tablet(I have no note PC), so I want to develop my applications outside.
*There are some excellent IDE apps on the Android Market.
Before I know Ember, I have been using pure javascript(jquery) + css + html to develop client-side application for daily practices or work.
But recently, when I began to learn EmberJS, a Javascript MVC framwork, I am lost.
It seems that EmberJS have to get its own server up to compile something, which generate static contents for browser rendering.
I just want to get my client-side code(files) rendering in the browser, but why I have to 'run' it as if I get apache started to serve as a php back-end.
I have googled hundreds of pages to find a solution, nothing expected result discovered.
Including Angular, backbone or any other popular Javascript MV* frameworks, they all must compile there applications.
Is there anyone who has encountered this situation?
Then any advice, please?
Increasingly most Javascript frameworks are shifting to doing a "compile step" as part of using them. This allows you to do a variety of changes to your Javascript files, which in turn makes it easier for you as a developer. An example of this is that you can use ES2015 classes and then have your compile step "transpile" them to older Javascript that will work in all browsers.
The side effect of this though is that you need to have npm running on your computer to be able to do this well.
If you really don't want to have the compile step, then I would suggest looking at VueJS. It's the only recent Javascript framework that allows working with simple non-compiled JS files. But you'all be missing out on some of the best changes to Javascript as a result (ES2015 has made life much better)
Finally, I found a nice solution(framework) that is Durandal.
Really, pure HTML+Javascript without built and server up(anyhow, a web server needed if I wanted to publish it in my hosted web server).
.html extension and designer friendly.
I can upload its source files directly in to S3 and browse the html pages.
Just found some nice examples with well structured project on github is here.
And I can work smoothly with my dear designer friends.
Though its next generation Aurelia will also be built and serve it up like Ember or others, but the current generation is enough for me.
Hope those one got help from this;)