I’m working on an app with some friends in college and I notice that they have already designed the front end so that all the html is on one page. They hide information on the page using javascript, but all the html is in the same file. I had never heard of it being done that way before. Is this a common practice in web development? What are the pros and cons?
Hi Alioune,
Having everything on a single page means more coupling, it will be harder and harder to debug as your page goes bigger and bigger.
Depending on backend technology, you may have separate controllers, but at the end, you get together tham as one page for target(user)
Also note, when you have one page containing too many stuffs, you need enough memory to keep them too. This may slow down your page, but depends.
One good practice in this one page form design is not loading data unless is required. For example, by default you may not load contact section unless user ask for contact, then using an Ajax call grab the form from server and show the contact form.
About the HTTP/1.1(which is still common) devs tend to respond as much as data they can with one request. Please note, if your page has 20 images, it means 20 requests to server from client. So devs use a CSS technique called clipping for image resources(but not good for large files)
The issue is about not all data types and content could be merged! for instance no way about mpeg files, but about scripts, this may work.
Hopefully HTTP/2.0(still a little hard to coding for some backend langs) comes with one request multiple result in heart, and dev may provide as much as resource she/he likes to provide with one request/response(no any duty for UI/UX devs at all, it’s a back-end thing)
I’m not thinking about any major pros about all in one page, except no any refresh when user asks for new content. But this could be done with Ajax I believe more better I believe.
The cons as I stated, it makes the work complex! I don’t say it’s bad, but I don’t think if it’s common unless you like to code obfuscated for some reason.
Keep going on great work, happy coding.
1 Like
Single-page doesn’t mean loading all the data at once. Most single-page apps already make extensive use of AJAX to request data and resources. What they don’t do is reload the whole page.
This forum is an example of a single-page app. During normal use, you won’t ever see the whole page reload, but you’ll sometimes see loading spinners (e.g. when switching between the main page and a topic). This is because the app is waiting for an AJAX request containing the required data to resolve.
Compare how fast that is with pressing F5 and refreshing the whole page.
Hello Lionel,
Yes I understand. the Ajax calls may not be dependant on page structure anytime you make a call. For instance you may call an Ajax and load the content as HTML content and add them to the current page. This way is good, also known as lazy loading, to not load any section unless it’s required later.
But some pages may come with eager content, I think the OP may talking about it. Technically and logically loading every possible thing with a page could make issues.
About this forum you mentioned, this is logical and great to load some content(eager) may be used regularly and related to each other, such as the section to show a thread, or a session for user. But as you see the FAQ section is not with this page, since it’s not required, it’s better be in another page.
I would call this forum main page as one simple page that grabs content from server using Ajax and shows them, but I think the thing OP mentioned is about multiple pages with different functionalities inside one page I think not good idea.
Upon rereading the OP, I think you may be right. In any case, “single-page app” shouldn’t be confused with “load all content at once”.