Including html files


#1

While creating websites i split my content in multiple html files and included
them with php <?php inlcude('html-content.html')?>

i seperate the files, so i can dynamically include it 1 or more times.

now i cannot use php in electron and i dont find some similar with javascript.
How do i load dynamic html content with electron??

Ty for responds,
DrTosh


#2

What’s your level of experience with JavaScript? Are you familiar with MVC architecture and front-end frameworks?


#3

low level experiences, can u explain me how the mvc pattern can help me with my problem?


#4

Modern JavaScript apps are structurally not too different from PHP apps, especially if you have the server rendering your page (in Electron, there’s no distinction between server and client, though some libraries might make you write code like there is one). The difference is that they get there in a completely different way, like two houses that look similar on the outside but with completely different floorplans. You can understand one of them in relation to the other one, but you can’t just follow the same practices you’re used to. You’re going to have to clear your mind of how PHP works in order to navigate the world of JavaScript for a time.

Now, I’m not going to tell you everything, but I hope I can point you in the right direction to research this for yourself. Back in the Bad Old Days of the 1990s and the early 2000s, the only way to change a page with JavaScript was to use document.createElement() and manually append the element to its parent. That’s not hard to do, but it’s also not very friendly for visualizing the results, and when you’re trying to build a whole page, it gets really tedious. That’s not to mention the tedium of trying to locate an element so that you can change it. If you look at the document API, it has more than enough functionality to write a whole web site, but the barrier to entry of complexity and repetition meant that few people (and mostly just professional dev teams) were able to produce anything of much scale.

Then in 2006, jQuery hit the scene. It made everything easier, by abstracting the granular DOM manipulation to higher-level functions that behaved a bit more intelligently and didn’t need to be told literally every detail (since a lot of the details are repeatable enough that they can be implicit defaults). Over the past eleven years, many additional frameworks have been created in this same vein, and the Model-View-Controller paradigm became prevalent.

At its most basic, MVC is a separation of concerns. You have models, which provide data that should be displayed, views, which structure the data, and controllers that sit behind the scenes and do all the business logic that’s not specific to a single model. All of these are JavaScript files or classes, and there’s really nothing that sets them apart except from their function in your app. Now, MVC is not gospel. There are frameworks that heavily use the distinction, and ones that don’t, but it will get you started on thinking about the different parts of your app.

To get back to your original question, you can split parts of your page into different files if you use a JavaScript framework that makes use of components. Each component corresponds directly to an HTML element. Think of the rendering process as a tree. You have index.js (or html.js, or whatever it’s called), which accepts information about which files represent its children, and then calls each of those files, passing along the data you tell it to. Once you’ve finished working down the tree, each component script returns its computed value and at the end you have a perfectly well-formed HTML page. If you want, you can make a page with just the components you’re used to from WordPress (header, sidebar, post, page, footer), or you can make every button and td a component if your heart desires.