Modular approach to client-side applications

Question

This is a follow-up to my previous question .

Suppose there is a single web page with a login form and sign-up link. When a user clicks on the link a new sign-up form is displayed. Suppose also I create separate HTML , CSS , and JavaScript files for both forms for modularity.

Now the web page should contain some JavaScript code to load the login form, when the page is loaded, and load the sign-up form upon click on the link.

Does this approach make sense? Are there any frameworks/libraries, which implement this approach? How would you suggest implement it?

Answer 1

I think the idea has some issues. First you should know that there are some old fashion ways to load another completely separated page in the main document. Using "iframe" tag is one of the most popular and unsecure ways to do such a thing. Showing popups and use "window.open" is another way that can show a new window and load the specific url completely separated. BUT...

There are many reasons that I'm now gonna suggest you not to do that in any of mentioned ways. You can simply use some libraries like "JQuery" to load another html in the current page without any need to load new resources that cause performance issues for you. I believe you should search for "JQuery $.get" and you will see how easy it would be.

Hope it helps. Cheers

Answer 2

Yes that makes sense to me. I really like this approach as I think breaking an app into smaller chunks will make the development & maintenance much easier.

Basicly you need to load the css and js files by appending a link and script tag respecticly into the head section of the html. For loading the html part of the module you can simply use jQuery.get() method as suggested by other answer.

I have tried to implement it. I recently released my work on this. a small code base. actually in my approach each module has its own folder with its js, html and css files and optionally a server-side file too like a php or aspx file that will be called by javascript to query the server.

here is the project page in github called Yuva

take a look and let me know if this makes sense to you.