Single Page Application Organization

Question

Coming from the world of rendering views on the server-side, I can't quite get it to click in my head how to organize the CSS of a single page javascript application. I'm using AngularJS in this particular case.

When doing server-side rendering, it's relatively easy to divide out and organize your CSS files, you can have something like the following:

/css
    /layouts
        home.css
        account.css
        ...
    /components
        buttons.css
        forms.css
        lists.css
        ...
    /modules
        account-bar.css
        shopping-cart.css
        ...

and for a given page, say a shopping cart page, you can just include the layout file you need, you can pick the component files unique to the page, and include the shopping-cart module. This results in close to the exact CSS the page needs being delivered.

When it comes to the single page javascript application, I'm a little confused on a few points:

1. How do you make, say layouts, for each page of the application pages, without having it mess with other pages? Since the page doesn't reload, it seems difficult to make layouts using the generic html elements such as header, nav, section, article, footer, etc. Do you just have to avoid using those elements and instead make divs with separate classes for each page?
2. I guess this relates to 1, but when you're delivering the CSS (and the JS really) do you just concatenate it all into one giant file? Doesn't making a giant CSS and a giant JS file for a decent size application result in a huge loading time upfront?

Answer 1

I recommend organizing your app by feature, where each feature is an Angular module. See here for an example https://github.com/angular-app/angular-app:

+ src
  + admin
    + users
      . admin-users-add.js
      . admin-users-add.tpl.html
      . admin-users-edit.js
      . admin-users.edit.tpl.html
    . admin.js
  + home
  + posts
  . app.js # bootstrap with requirejs or browserify
+ assets
+ common
. index.html

To answer your 2 questions:

1. The header and footer would go in index.html (may be imported). For re-usable markup in Angular you'd build a directive that may be common or related to a particular feature. Think of views instead of pages; think of directives instead of containers and selectors.

2. Yes, for production, everything concatenated in one file, app.min.css and app.min.js

You need some tooling too. With Browserify the workflow is simple, require regular Common modules, then build your browser script.

Answer 2

1. Separate classes for each page sounds ridiculous :) Look at Twitter Bootstrap - see how they use css classes.

2. It's faster to create 1 connection and load 1 file than create few connections for loading few small files. New connections opening is a very time consuming thing.