DEV Community

Cover image for Building a Single Page App without frameworks πŸ”₯

Building a Single Page App without frameworks πŸ”₯

Dom (dcode) on August 24, 2020

In today's post we'll be building a Single Page Application using only vanilla JavaScript - this means we don't need to use any frameworks! Framew...
Collapse
 
fagnerbrack profile image
Fagner Brack • Edited

Basically if you remove the javascript code and get the html fragment from the server using the "get html" function then everything still works.

Progressive enhancement at its best.

This is a proof that you don't need a front end framework to build an spa that can track states through the Url using the history API. No state on client side therefore no need for a "setState all the things".

Great post, rare to see such quality around the Web these days.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
fagnerbrack profile image
Fagner Brack • Edited

[...] you want to write your front-end code all in a separate project and keep your back-end unaware of it

Why? They are still coupled but now with a weak layer between them with a home-made protocol to interpret the response body. Views should still be sent from the back-end systems unless your business logic is in your front-end code and back-end has no business logic. If that's the case you have a service that returns data, and that's called a database. If that's the case then well... use a database query language not HTTP.

HTTP is for hypertext/hypermedia state transfer, use the tools for what they're optimised for, don't try to repurpose them to something that makes absolutely no sense.

Collapse
 
catinhocr profile image
Cato

is that a node.js function? cant find any reference to it after a couple google hits

Collapse
 
fagnerbrack profile image
Fagner Brack • Edited

It's a reference to the code examples in the original post. There's a custom "getHtml()" function there.

Collapse
 
michaelcurrin profile image
Michael Currin • Edited

Thanks for sharing!

I enjoyed going through the repo. I forked it and updated how the routes are handled so it works on GH Pages πŸš€

github.com/MichaelCurrin/single-pa...

Also I added instructions for serving as a static site without Express.

Collapse
 
frarus profile image
fra-rus

Dear author, why you didn't use the hash part of the URL with the hashchange event to navigate around the app?
I've checked around 5 similar articles and all of them are recommending to use hash. It's much simpler and convenient.

Collapse
 
aderchox profile image
aderchox

It might be simpler, but it's a different thing. It depends on your preference based on your use case.

Collapse
 
metalmikester profile image
Michel Renaud

I'm interested in this. Do you have some links you can share?

Collapse
 
bassforce86 profile image
James King • Edited

Just a side note: Express is itself, a framework.

I don't mean this as an inflammatory statement, just for those that may not know.

Collapse
 
michaelcurrin profile image
Michael Currin

Express is more of a dev dependency here for local dev convenience and can be swapped out for other approaches, including VS Code Live Server or Python builtin HTTP server.

Or http-server for NPM which can be installed globally and run in the project root.

Collapse
 
michaelcurrin profile image
Michael Currin

BTW In production you would use Nginx to serve your static assets (HTML and JS). Or upload them to GitHub Pages and let that serve it for you. No NPM server needed.

Using Express in production is suitable if you want to build an API or maybe do frontend templating (like Python Flask does). That you can make your content dynamic like with get data from a database. Instagram is a single application which does something like this.

Collapse
 
dcodeyt profile image
Dom (dcode)

True - more accurately I probably should have mentioned "front-end" framework

Collapse
 
seymamuratoglu profile image
seymamuratoglu

Hi I am new with the javascript node etc. and I have a big problem :( How can I add script event to following HTML page
async getHtml() {
return
<h1>Welcome back, Dom</h1>
<p>Hi there, this is your Dashboard.</p>
<p>
<a href="/posts" data-link>View recent posts</a>.
</p>
;
}

I am trying to create forms in each page and I have to add script events in order to collect data and display current time on some forms etc. Thanks :)

Collapse
 
devin_dickerson profile image
Devin Dickerson

Did you ever have any luck adding handles for the html in the views? Im trying to add event listeners to some input box I have in the html but have had no luck retrieving user input

Collapse
 
wewill profile image
Wewill

Dear dom,

Thank you for your great article. I'm looking for a proper way to get totally ride of any server side framework. Imagine a project you cannot install anything in server. There is only an API to provide content.
Is there a way, to simply route to html pages and call some js to fill them ( statics, content .. ) ? What will be "bad" to do like this ?

Best regards, Wil

Collapse
 
roco profile image
RΓ΄mulo Costa

I had a problem using this pattern, which I still don't know how to solve.
While a page is loading and a user clicks on some link to go to another page, the next page starts to be assembled with the requests that were still happening on the previous page and creates a page with the mixed content.

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€

Sombody might find this useful for a frame-workless SPA. Please note I wrote it.

GitHub logo adam-cyclones / reactive-css-properties

Set css custom properties and react to changes in realtime from JavaScript

Reactive css logo

Reactive CSS Properties

A tiny library to supercharge your styling workflow. With Reactive CSS Properties (re.css) you can set css custom properties and react to changes in realtime from JavaScript

Website - Report a bug - Supported frameworks

Table of contents

The case for re.css

You can think of modern JavaScript having two main responsibilities, updating business logic and updating styling, The trouble with the latter is that this adds extra overhead and new problems to overcome, re.css sets out that it is css's responsibility to update styling and JavaScript should…




Collapse
 
325designs profile image
Drew Stephens

Single Page App without frameworks, but you're using React which is a framework. I also wouldn't call it vanilaa javascript either, but that's just me

Collapse
 
crtdaniele profile image
Daniele Carta

React is not a framework, but it is a library.
In this article, I don't see React.

Collapse
 
alin11 profile image
Ali Nazari

I hate people saying "React is not a framework. It's a library".
Yes, officially it's true. But what do other frameworks offer that React doesn't?

Collapse
 
artydev profile image
artydev

Hello Drew,

Can you point me where you see React stuff in it ?

Collapse
 
shanwshaw profile image
shawnshaw

How to do simple state management with this approach?

Collapse
 
allenarduino profile image
Allen Jones

Thanks for sharing.
How do I deploy the static website together with the node on firebase or github pages?

Collapse
 
ravgeetdhillon profile image
Ravgeet Dhillon

How do I write JS for each route and then inject it to the app when the route is loaded?

Collapse
 
dataserver017 profile image
dataserver017

If I click on Posts, then I want to load a JS script file (click Handler). How I make it?

Collapse
 
shanwshaw profile image
shawnshaw

github.com/Graidenix/vanilla-router is a simple router for self-made SPA

Collapse
 
abinashparhi profile image
abinash

how to create separate html files to run javascript return code

Collapse
 
abinashparhi profile image
abinash

how to add a separate error document