Hacker News Reader

Comment by dieulot | Hacker News Reader

Could you link to a site where you’ve rolled your own SPA? Or ideally the source code. I’d like to take a look as not many people do that, even less do so with enough attention to detail not to cause UX regressions (not that third-party solutions are brilliant either).

View on HN

I'm an enjoyer of anonymity online and would rather not doxx myself. However if you have a specific question, I'd be happy to answer. I use js/jq for the front-end and php for the backend. Once you have your own CMS, turning it into a SPA means turning your index.php into a index.html that is php free and relies on ajax calls to change the content. So at minimum you need a mainbody.php and a head.php that accept inputs. After that it's just onclick actions on buttons that trigger the ajax function changeMainbody(targetPage). Or changeHead() after a user loggs in. On the phone app side you use the regular WebView, to avoid any cross-origin blocks and problems. Alternatively you can run it locally and pass the cookies as inputs - depending on the app needs. Should be safe using https, right? I fully expect to be scolded by someone with 20years more experience, but I guess that's how you learn.

Of course there's more to it, depending on the app needs. In my case it also auto refreshes the contents on a js timer.

What UX regressions did you have in mind as troubling? Things like resetting one's password if forgotten? Well all those things need to be turned into their own ajax calls and php scripts as well and sometimes reworked to fit mobile users needs. For resetting passwords specifically I just copied what Twitch.com does.

(Not OP) The kind of regressions I'd think of would be things like:

- updating the URL state when someone clicks on a button

- proper back-button support in the browser that takes me back to the prior 'page'

- being able to navigate to any URL deep in your app and get a valid response (ideally rendered server-side so there's no client-side loading delay).

Things like these are hard, and the reason why it's common advice to use a framework and not hand roll. If you hand roll but don't support these things gracefully, you're making a case for not hand rolling.

True. One needs to build it's own "router" if you will. But in practice that means writing functions that modify the URL (some pushState(url) and scrollTo(top) stuff) and make them part of the primary function, so you can forget about it (I'm a functional programmer). Same with adding/substracting from the history stack. 1h of work each. Is that too much?

It really just worked without much troubleshooting. Most trouble I've had was with cookies and cross-origin problems (or weird client requests).

Reply on news.ycombinator.com