Question about large templates and JSX


(Jon64digital) #1

Oh look, a newly registered user asking a question about something which has probably been discussed to death already, yeah, yeah, yeah, I know, but please don’t hate me for this, I really have looked for a solution for quite a long time but Google has got nothing!

Basically, I’ve spent a few years writing a really large Angular application and I’m trying to work out whether to re-write it in React or VueJS. I much prefer the look of Vue to be honest but React does seem to be more popular so I’ve been researching how I would do this for a while, there’s just one thing I can’t seem to get past and it’s the use of JSX instead of HTML.

I do understand the benefits in certain situations and I can totally understand how it would work for small components with small templates., like a form field, a button or a drop down menu. The trouble is that my current application is divided into “pages”, not components and the router loads pages one at a time as you navigate around the site. Those pages contain lots of components but the pages themselves but can get pretty massive (one is over 1500 lines of html).

In Angular, pages are HTML files (with an accompanying JS controller file) and components are “directives” which normally have a smaller embedded HTML template.

Anyway, getting back to react, if everything has to be a component that means all of my pages have to become components too, including the massive 1500 HTML row pages, which presumably I would have to re-write as JSX? What if I need to generate the HTML template for a page using a server side language (e.g. what if I want asp.net to generate the template in the users language before the front-end takes over? This is fine in Angular).

So, How do people work with large amounts of HTML in JSX? Without any of the benefits of HTML editors like syntax highlighting etc. Is this even practical? Or is there a solution I’m missing?

Apologies for the rambling post. If anyone is still reading then help would be massively appreciated.


(JSharp) #2

I am using ReactJS.Net in a .Net MVC environment. It all plays together fine.

First, you have the option of using _Layout templates and Index.cshtml views as well. If you want a pure React UI, as I’d recommend, then the page does not necessarily have to be a component–it all depends on how you architect it. The only condition for a valid JSX is that it have a parent wrapper element. A

is a valid parent, for example.

Next, when you say 1,500 lines of code, a red flag should go up.

You should pause reading this any further and take a look at this excellent article: https://reactjs.org/docs/thinking-in-react.html

Let that sink in for a long moment…

I think understanding all of that is the first step in answering the question: “Is React the right tool for this project.”

You have to break that 1,500 lines of html into smaller, reusable components. If for some reason that was not possible, which I highly doubt, then it doesn’t seem like you are getting any benefits. The slick part of React is that it can update components based upon its knowledge of what has changed. Only the pieces that need updated are updated. That’s where you really see the performance gain.

I have used Angular 1 and 2, and it seems like we have a .Net environment in common. I use Visual Studio 2017 and all of the Intellisense works great with JSX files.

React is a very different way of thinking. If you want to go down a philosophical rabbit hole, then follow the thread about Immutable state. Begin the journey here: https://facebook.github.io/immutable-js/ There is a lot of discussion on whether state should always be immutable. This goes against the more established MVC paradigm of our .Net backgrounds. It may seem like crazy talk, but there are a lot of points about challenging “object orientation” or what that even means in this new day and age.

Hope this helps


(nate) #3

My first question would be: are you sure you want to rewrite it? Think about that long and hard. If you have all of this time into a huge app, why do you want to rewrite it? The great thing is that your answer to that question may help you answer the question of which framework to choose in doing so (if you decide you need/want to).

For example, if you’re basing it solely on popularity, you may have already picked the most popular.

That said, assuming you want to continue, let’s rapid-fire some of your questions:

  1. “if everything has to be a component that means all of my pages have to become components too, including the massive 1500 HTML row pages, which presumably I would have to re-write as JSX?”

That is correct. Unless you just wanted to inject some massive, static HTML blob. In which case, you could import that HTML and inject it (even using React’s own dangerouslySetInnerHtml).

But the bigger point is that once you start breaking things into components, particularly reusable ones, these “massive” pages become much more granular and manageable. You could even have a “pages” directory that contains page-level components, which then bring in other, more granular components to build them.

  1. “What if I need to generate the HTML template for a page using a server side language (e.g. what if I want asp.net to generate the template in the users language before the front-end takes over? This is fine in Angular).”

You can render React apps server side (“universal” or “amorphous”), but the way you’ve described it isn’t really how React works, at least as I understand it. Or said another way, React intends to do the rendering for you, so if you’re already doing that on the server, maybe you don’t need React? How do you draw the lines for when you need it? If these aren’t just big static blobs (think “About Page” type stuff), why split the logic for rendering that between the server and the JS? Seems like it would get really complicated really quickly.

  1. “So, How do people work with large amounts of HTML in JSX? Without any of the benefits of HTML editors like syntax highlighting etc. Is this even practical?”

Many (maybe even most?) code editors do have syntax highlighting for JSX.

I would encourage you to go try to mess with React and JSX for a small project. Go build a to-do app or something. It took me about 4 hours to go from hating the idea of JSX to basically being unable to turn back from it now. It’s revolutionary (especially, in my opinion, when compared with something like Vue’s templating solution).

Good luck!