Architecture for single page application (JavaScript)

P

8

11

I wanted to understand the overall architecture for designing single page application (mainly through JavaScript)

Let's say I have a login page (Usernam/Password) and on successful authentication, I am shown the homepage. Now both the login and homepage screens should actually be part of a single page.

How can I design such kind of page?

Protection answered 6/3, 2013 at 11:19 Comment(3)

This is way too broad a question to answer. Where exactly are you having problems? – Induce 6/3, 2013 at 11:21

I just wanted to understand the overall architecture.... – Protection 6/3, 2013 at 11:27

"the overall architecture for designing single page application" — There isn't one. That are multiple approaches you could take. – Cornfield 6/3, 2013 at 11:39

O

6

This is such a broad question that entire books could be written to answer it in detail.

Basically what you need to do is to use AJAX instead of page reloads. You still need to connect to the server to authenticate users but instead of reloading the entire page every time you do it, you need to make an AJAX call to your server and depending on whether the login was successful or not change some parts of the content on the page (like changing the Login button to a "Logged in as user xxx" message etc.).

Oversubtle answered 6/3, 2013 at 11:36 Comment(3)

This is one approach, but you don't necessarily need to load full/partial pages with AJAX. You could have everything in the main page's JavaScript and just load the data with JSON or whatever. – Induce 6/3, 2013 at 11:43

Yes @Juhana and this is pretty much what I said. :) I've never said anything about loading full/partial pages with AJAX, let alone that it is necessary. :) I've said to use AJAX to connect to the server and then to change some parts of the page - so I can only agree with your comment. :) – Oversubtle 6/3, 2013 at 11:52

Thx a lot...I know it's a broad question...But could you please explain how after making the AJAX call, I can update the page content partially... – Protection 6/3, 2013 at 12:12

M

4

If you haven't seen it already, John Papa has a very popular course on designing Single Page Applications on Pluralsight: http://www.pluralsight.com/training/Courses/TableOfContents/single-page-apps-jumpstart

It does require a Pluralsight subscription, but you can get a 10 day free trial to confirm the content is valuable to you. (I am not affiliated with Pluralsight, btw.)

Moment answered 25/3, 2013 at 18:32 Comment(0)

S

2

You may want to look up this free Single Page App book. I found it when I Googled "Single Page Apps".

Snipes answered 23/3, 2013 at 1:55 Comment(0)

A

1

You may take inspiration from existing solutions that you can find over the web :

Allerus answered 6/3, 2013 at 12:44 Comment(0)

I

0

I Just added a project to SourceForge that may help. I've been developing this library for about a year now, and I think it's ready for prime-time. This project allows for you to reference asp.net MVC from within JavaScript.

https://sourceforge.net/projects/peachajax/

This library generates dynamic JavaScript code to use for AJAX operations. The library requires jQuery. For example, if you use an Action Method within a Controller for AJAX operation, you can quickly access this via the dynamically generated JavaScript file as follows:

peach.ControllerName.ActionMethodName(parameter1, parameter2, parameter3); // javascript

The mapped parameters are directly associated with the ActionMethods parameters.

Customization features include:

Custom parameters
Custom callbacks
Custom client-side processing functions for parameters (for serializing specialized model types)
Custom pre-request processors
Custom post-request processors

Innuendo answered 6/3, 2013 at 15:37 Comment(0)

A

0

If you're more an MVC guy, I personally have been using chaplinjs.org, which is based on backbone, and hbs for single-page app glory. I have a few modifications to use websockets instead of long-polls, but it's pretty quite extendible, and if you're familiar with mvc, easy enough to get into (you'll run into more problems with backbone than with Chaplin)

Antimalarial answered 25/3, 2013 at 18:40 Comment(0)

L

0

You need index.html page like below

<html>
  <body>
    <div id="header"><!-- something cool here --></div> 
      <div id="login" class="view"> ... </div> 
      <div id="home" class="view" style="display:none;"> ... </div>
      <div id="page3" class="view" style="display:none;"> ... </div>
      <div id="page4" class="view" style="display:none;"> ... </div>

     <div id="footer"><!-- something cool here --></div>
  </body>
</html>

When application loaded, all views (divs with view class) are hidden (display:none) except login view. Login view should have login form on it, when it submitted by user it initiates ajax request. When ajax successful application hides login page and displays home page instead.

You may structure your code next way. For every module you will have model, view and controller files.

For example, for login module you may have loginModel.js, loginView.js, loginCtrl.js. In model file you will connect to DB and check credentials provided. In view you will bind listeners to controls. In controller you will react to user pressed Submit button.

Landlord answered 30/9, 2019 at 17:34 Comment(0)

G

0

I set up a basic SPA using jquery like this:

<script src="jquery.js"></script>
<script>        
            // SPA with JQuery? Hold my beer!
            
            // Handlers
            function LoadAbout(){
                $("#content").load("about.txt");
                $("#page").html("About");               
            }
            
            function LoadHome(){
                $("#content").load("home.txt");
                $("#page").html("Home");
            }   
            
            // Run on document ready
            $(document).ready(function() {
            
                // load the home page
                LoadHome();
                
                // Assign nav handlers
                $("#about").click(LoadAbout);
                $("#home").click(LoadHome);
            });         
            
</script>

if you need to attach handlers to elements inside your modules, you can attach inside your nav handler like so:

function LoadAbout(){
      $("#content").load("about.txt", function(){
          $("#contactusbutton").click(ContactUsClick);
      });
      $("#page").html("About");             
}

I <3 callbacks

Gusman answered 7/10, 2021 at 19:40 Comment(0)

Recommended topics

Hot tags