Website File and Folder Browser: Should I use Static or Ajax? - ajax

Question

Subjective question time!
I'm coding a website that hosts a large amount of files and folders for an open organization that must post all documents online for public scrutiny. I have not yet began coding the actual viewer, as I'm wondering what the standard, most accessible approach is.
The site must be easy to access and available to all devices from desktops to phones. That said, I don't have to code in mind of older, outdated browsers. The previous site used a static approach on Python and Django. This is my first real node.js + Express job, and I'm not sure of performance differences.
At present, I see two ways to accomplish my task:
1. Use Ajax
I know I can shove everyone onto a generic /documents page, and allow them to navigate through the folders themselves. However, I want document links to work if shared, so I'll have to be changing the URL manually as users move around, and submitting plenty of Ajax requests back to the server
I like this approach in that it will likely give a nicer user interaction. I don't like the amount of Ajax requests, and I fear that on less powerful devices like phones and tablets, all that Ajax and DOM manipulation will slow down or not work. Additionally, I'd have to parse the url to a resource with either the back end or front end for retrieval.
2. Go 'Static'
I'm using node.js and Jade on the back end, so I know I can just break apart a url, find the folder hierarchy, and give a whole new page to the user.
I like this approach because it doesn't require the user's machine to do any computation (and will likely be faster on slower devices), and it means not doing a ton of url work. I don't like that desktop users will end up waiting for a bunch of synchronous operations that I'll have to use to prepare the pages with, nor the server load or responsiveness.
Currently
I'm looking into the static approach right now for what I perceive to be a bit more accessibility (even at the cost of page load times), but I'm here for more information to guide the right choice. I'm looking for answers that explain the why of which way to go will be better, and are impartial or share experiences. Thank you in advance for your help!

Answer 1

Right. So no one else responded yet, so I just went ahead and made the file browser anyway.
I ended up doing a static method. It turned out to be relatively easy, besides having to manipulate a bunch of strings, and I can only imagine that twice the work would have been necessary for Ajax.
The response times are fairly long: a generic static page that does no computation on my site takes about 40-70ms, while the new documents one takes twice that at ~150ms. Although in practice 150ms isn't anything to get upset over for my needs, in a large scale environment I'm sure my glob functions in the documents folder would just bog down the system.
For anyone wondering, here's what I did
Code
The hierarchy looks like this
|app
|controllers
|-document.js
|views
|-document.jade
|public
|docs
|
|//folders
|
documents.js
var express = require('express');
var router = express.Router();
var glob = require('glob');
module.exports = function(app) {
app.use('/', router);
};
router.get('/documents*', function serveDocsHome(req, res) {
//this removes %20 from the requested url to match files with spaces
req.originalUrl = req.originalUrl.replace('%20', ' ');
//fun string stuff to make links work
var dir = '/docs' + req.originalUrl.substr(10);
var url = req.originalUrl + '/';
//for moving up a directory
var goUp = false;
var folderName = 'Home';
if (req.originalUrl != '/documents') {
var end = req.originalUrl.lastIndexOf('/');
folderName = req.originalUrl.substr(end + 1);
goUp = true;
}
//get all the folders
var folders = glob.sync('*/', {
cwd : 'public' + dir
});
for (var i = 0; i < folders.length; i++) {
folders[i] = folders[i].substr(0, folders[i].length - 1);
}
//get all the files
var files = glob.sync('*', {
cwd : 'public' + dir,
nodir : true
});
//attach the files and folders
res.locals.folders = folders;
res.locals.files = files;
res.locals.loc = dir + '/';
res.locals.goUp = goUp;
res.locals.url = url;
res.locals.folderName = folderName;
//render the doc
res.render('documents', {
title : 'Documents',
});
});
documents.jade
extends layout
append css
link(rel='stylesheet', href='/css/docs.css')
append js
script(src='/js/docs.js')
block content
.jumbotron(style='background: url(/img/docs.jpg); background-position: center 20%; background-repeat: no-repeat; background-size: cover;')
.container
h1= title
p View minutes, policies, and guiding papers of the [name]
.container#docs
.row
.col-xs-12.col-sm-3.sidebar.sidebar-wrap
h3= folderName
ul.no-style.jumplist
hr
if goUp
li#go-up: a.message(href='./') #[img(src='/img/icons/folderOpen.png')] Up One Folder
each val in folders
li: a(href='#{url + val}'): #[img(src='/img/icons/folder.png')] #{val}
.col-xs-12.col-sm-9
h3 Files
ul.no-style
if files.length != 0
each val in files
li: a(href='#{loc + val}')= val
else
li.message No Files Here
And heres part of the page