Generate React components in PHP and then render in client - javascript

I'm trying to use React to simplify the way I build UI for an app I'm writing. I've got a good proof of concept working in a single HTML page, but I need to split out the JS into individual modules to make it easier to maintain.
I know how I would structure the app if every piece of the puzzle is known at build time. Something like this: https://github.com/jordwalke/reactapp. However, the UI will be built up dynamically in PHP, nesting various components which I want to pass into the app.
My initial thought of dumping the generated code into a script tag and having the Javascript find it has led me into a horrible dependencies hell.
My primary question is:
How do I pass something like <panel><group><field /></group></panel> into the app so I can call React.render() on it?

As #llernestal and #MikeDriver suggested in the comments, I used PHP to build a JSON representation of the UI and had React build the components needed to render the UI.

Related

Should ReactJS be used in conjunction with an HTML file?

If I were to use ReactJS to build a website, should I add the javascript source code to an existing HTML file or should I just write it all and render it in the javascript file? How do most developers go about using React? Are .html files ever used during development or is it all done using .js files? Sorry for the basic question, I am just trying to figure out the best way to use React. Thanks!
depending on how you create your project you can either have 0, 1, or more than 1 html files - this will depend on how manually you create the project (see the bottom of this answer for more context regarding create react app). most projects have 99% of the code as .js/.jsx files. most projects also use webpack to bundle the code into 1 final js file but that's not a requirement, you can just load react and your code each into a <script /> tag in your html file.
99% of the time react will generate the html for you. there are instances where you want to inject pre-written html but that's a different topic and a small use case.
another use case where you may need multiple html files is if you have different application entry points, but it all really depends on what you're doing and the structure of your project, there's always more than 1 way to do this.
as #Mellet points out, you can also use Create React App, which allows you to not have to even create the html file. again, it all depends on your needs and wants

Best way to structure reusable code using Node.JS, EJS, and front end JS?

Evidently the 'Software Engineering' exchange was the wrong place to ask this:
I'm more or less learning the MEAN stack (have yet to start on Angular, so currently using straight vanilla JS for front-end) and part of what I'm building for my portfolio is a drag-and-drop form builder.
Currently the form has sections, which contain questions, which can contain multiple options as well as multiple follow up/sub questions (which can then contain their own options, but not follow ups).
EJS helps me with the original render of the stored form using nested for..of loops, however my question comes into play when adding new elements to the form.
Currently, I have vanilla front-end JS that is looking at some template tags within the page, then filling those in for new sections, questions, and options.
However it doesn't seem very DRY because I'm using essentially the same logic in EJS when initially rendering the page (albeit multiple times).
To make my code more reusable, should I write functions on the back end which are cast into the EJS render call both for the initial render and then available to the front-end JS, or cast the EJS variable containing the form (from MongoDB) into the front-end JS directly and use functions in there to both draw the page initially, as well as add new elements? Both of these, hopefully, would make use of template tags in the HTML. Is one faster and/or safer than the other?
Another option could also be to use EJS partials for sections, questions, and options to render the page, but I wouldn't know how to incorporate that into the front-end JS to add new elements without using templates, which is essentially what I'm doing now.
I'm going through the same ordeal right now.
From my understanding, your scenario requires using both the server side rendering (using EJS) and front end rendering using HTML templates and you want to know what's the best approach to go about it.
The short answer: cast everything on the front end and do the heavy lifting there.
I've used EJS components (includes) and they are simply not designed to be interactive. Data flow is basically one way and there is no state management that I know of.
You don't have to do this for the entire project mind you, this can be done for certain pages only where interactivity is very heavy.
Just import Vue or any other SPA framework on the said page and act as if it is a single page App. That way you don't miss out on server side benefits when you need them on other pages of the project.
Of course going into complete code split (API/SPA) would be the more traditional way but I'm sure there is a reason why you're forced to use server side rendering.
It helps that both (server/front end) use JavaScript which might not lead directly to code sharing but will surely make it easier to write the needed functions in similar ways on the back end and front end.

Angular 7 configuration or alternatives?

I have been struggling with how to implement Angular 7 into my .NET Core 2.X project keeping the best of both frameworks without success. The main problem that I am facing is that Angular wants to control my frontend and how it receives it. By this I mean it forces you to use static templates for everything, I get the concept but for my project, this is going to generate an insane amount of templates/components or templates with a bunch of unused display elements. It makes much much more sense to have more of a generic frontend component that receives the templates from the server then handle all the binding, DI, updates etc.
I have looked at several options and questions about Dynamic Components, Dynamic TemplateURL's, Custom Elements and lots of other topics. But the problem I see with most of these answers is that none of them actually have a dynamic template, they might use Dynamic Components but the actual loaded control still has a static template in the end.
This question seems to be pointed to most
I did run across a solution that seemed to be an option but then I realized that it had to be run with the JIT Compiler. That again adds unnecessary load on the client when everything could be compiled ahead of time.
There was also one about using Angular Elements but this has its own problems apparently and really doesn't fix the issues without allot of rewiring or other workarounds to keep everything working.
The Dynamic Component Loader sounded very promising, From the Angular site it states
Component templates are not always fixed. An application may need to
load new components at runtime.
That implies that the templates may be set dynamically but at the same time, it implies that loading a new component at runtime will fix that. But the component loaded has a static template. Nowhere is the template generated or changed, or am I simply missing something?
I have looked at Angular SSR and that almost handles it but I can't seem to figure out how to go through the Controller or otherwise utilize any of the benefits of .NET Core/ASP.NET or dynamic server-generated content. It seems to just offload the compiling from the client onto the server but still uses the same static templates. Is there a way of using Node.js to render a MVC Route then send the module?
There used to be a way to set the TemplateUrl of the Component to a Route on the Server but that is now not allowed, making a lot of the answers I have found obsolete but the exact way I would like to set this up.
The only real option I have been able to figure out is using MVC to generate Dynamic Modules/Components then load them in the Angular App. Would it be feasible to compile the .cshtml view via a controller to create an HTML string that is then used to Compile an Angular Module/Component then send that out to the Client and load it into the Angular App?
I understand how to compile my View into an html string but I am not sure how to go about Compiling the Angular Module or even if this is the right idea or if there is a better way of handling this?
It seems to me that this should be a fairly easy thing to do, all the tools seem to be there but not sure how to get things working right.
I recently started with Angular (After working with .net, jquery, javascript, react) and my first interaction is directly with angular 7. The first thing I noticed was how quickly I can develop in angular, but there are a lot of files which I am not even sure about, however are generated compare to react, but the learning curve was higher in react then in Angular definitely.
If you need something really lightweight, you should definitely go for libraries then framework. react is a good option, however it's not MVC driven and you will find it very different then Angular (I am realizing it from sometime).
Other than that, if most of my code is static, I could have chosen some kind of HTML template frameworks (i.e, nunjucks) which can be pre-compiled.
For components created in .net, I don't think that is possible to have them pre-compiled in angular, as you will only create something in .net if you need those component having dynamic data.

New to React, questions/benefit/disadvantage about using all JS instead of HTML?

I am starting to play around in React and I noticed that the simple app I am making is all in JS. My html page is only an empty body tag!
So I had a few questions because I am new to this framework.
Is my whole app supposed to be essentially all JS?
If it's not supposed to be all JS, when do I decide that something belongs in my html file vs creating it as a react component in JS?
What are the benefits / disadvantages that my html is in all JS?
Am I supposed to set up my server to compile the JS to html to serve html re: Server Side Rendering to maximize performance benefits?
React brings a new way of seeing things: components.
There are two approaches when using React:
AMD (Asynchronous Module Definition): your javascript files are loaded under demand; https://en.wikipedia.org/wiki/Asynchronous_module_definition and in http://requirejs.org/docs/whyamd.html
CommonJS: in this case your app is bundled into only one file (or a few 'chunck' files) - it seems that people have been preferred this way because the app is loaded only one time and it goes to the server only for loading and writing data (i.e. JSON); it helps in reducing charges over the server;
The page is really an empty body tag.... hehe
But with some considerations:
Please take a look at React-Router (or even Angular Route if you use AngularJS):
To move from the current 'page' (view) to a new page, the browser's URL is 'pushed' (changed) without going to the server and the entire new page is mounted according to that URL. This is made by React-Router or Angular Route.
Yes, you are supposed to make your server to output html: you can search for Isommorphic Javascript if you want your client html to be mounted dynamically (useful when you need search engines like Google to scan your page) More info at: http://isomorphic.net/ and this can help you: https://strongloop.com/strongblog/node-js-react-isomorphic-javascript-why-it-matters/
I know there is a lot of new technologies to study, but it's worth...
A little tip I can give you is looking for "Flux". It's a design pattern that helps structuring your application better, that allows you to scale and grow it.
You can take a look at webpack and babel too. Great stuff!
Hope this helps you.

extjs application architecture

I am developing a extjs application, and I am just a starter.
It's quite different develop mode for me, and I feel puzzled.
My first question is about client-end architecture, I'm developing a little app now, so I wrote all js codes in only one html file, what if I need to develop a huge app?
like this: [Article Manage(leaf in tree)] -> [CURD List(Data Grid)] -> [Edit Article(Dialog Box)]
There will be lot of leaf in my tree, so there are many XXX Manage.
What should I manage my client-end js files(file structure or something else), and how to load these files dynamically? Is there any exists demo?
um.. maybe what I really want to ask is:
How to put my code for every module into different js files and 'include' the dynamically?
I've got the answer, just use loader property of a container component, this method fit me well. Thanks to all of you.
There are no patterns set in stone, but here's one way to Write a Big Application in Ext 3.x.
Another good resource for ideas, generic to JavaScript, is Nicholas Zakas's video on Scalable JavaScript Application Architecture on YUI Theater.
In my mind the big things to do are:
Write standalone components (think: UI container, data structure, etc) with no dependencies to other components on the page.
When you want to two components to interact, have their parent container wire them together.
Have some kind of logical directory structure for development (doesn't matter what exactly), splitting out each of your "components" into its own file -- even if you plan on combining them into a single file for deployment.
Not sure if I correctly understood your question, but I'll try to answer. For bigger applications use MVC pattern which allows you to split your application to components such as Stores, Controllers, Views etc. Then you can easily send data from server in JSON for example (using server-side technologies - php, java,...) and read it by Stores proxy. If you look into Samples & Demos they're also loading some bigger structures using php script which returns JSON.

Categories