5 ms·

How is this news? React SPAs have been around for years, and SPAs existed long before React too.

by gigel82 5y ago

jolmg 5y ago
The difference compared to SPAs is that this doesn't use javascript.
TrevorAustin 5y ago
Also, those SPAs are loading the React literary off of a CDN. It’s not inlined into the page.
- gigel82 5y ago
  I have definitely built React SPAs with inlined JS and CSS as far back as 5 years ago, it even inlined some SVGs for icons; it was literally a single HTML page (unlike the discussed page, BTW, which loads the CSS and the images with separate network requests).
Dma54rhs 5y ago
This thing is fast unlike anything built as a spa nowadays that make your laptops fan spin so fast it wants to take off.
- LAC-Tech 5y ago
  It's fully possible to build fast SPAs. Though almost no one is able to do it. Which is weird, as it's objectively easier than writing enterprise react crap.
jcpst 5y ago
No, not a SPA. There is a concept of a single file app (SFA). You can share an html file, and that is the application. It can have inlined micro js/css frameworks, or hand-rolled everything. An SFA should be human readable though- viewing the page source is useful. I think it’s a concept worth exploring.
- xwdv 5y ago
  But what is the benefit?
  - est 5y ago
    less Co2 emissions
  - jcpst 5y ago
    Showing the capabilities of the web browser as an application target, directly. You have HTML, CSS, and JS available. No build tools required. Take this file and open it with a web browser. Then modify it, and refresh the browser. Distribution and Development for applications is about as straightforward and accessible as it gets.
    - xwdv 5y ago
      But what benefit is there for the end user?
      - jcpst 5y ago
        Source code that is readable. Viewing the source on web pages in the 90s was how I learned to make my first web pages.
- dredmorbius 5y ago
  I prefer the denotation of a single file site (SFS). Perhaps alternatively a multi-paged file (MPF), as there might still be multiple such pages on a site, or a site comprised of a mix of MPFs, SPAs, and traditional static single-page URLs.
  - jcpst 5y ago
    MP-SFS
dredmorbius 5y ago
SPAs display in a single HTML URL, but are themselves (typically) comprised of multiple elements, including many CSS, JS, and data elements which are fetched dynamically. The example URL is a complete website within a single HTML document with no external dependencies and no further round-trip requests. It is a single-page site (SPS) or perhaps a multi-page file (MPF). https://john-doe.neocities.org/ https://john-doe.neocities.org/ You can open that URL, disable networking, and browse the entire site to your heart's content in any browser supporting CSS. If you open the file in a terminal browser (lynx, w3m, elinks[2], etc.), you'll see the full site presented at once, as a single page, without needing to specifically navigate between them (you can scroll the full site). Though the intra-site navigation itself still works --- it just doesn't reveal or hide sections.
- gigel82 5y ago
  I've built React SPAs with inlined JS, CSS and SVGs in 2017, which is why I'm still entirely clueless what's special about this. BTW, the discussed page is not at all a single-page site; it makes separate network requests for CSS and PNG files.
  - dredmorbius 5y ago
    The point of this demonstration is that single-file provisioning is specifically the point. And specifically, using only HTML and CSS. The concept of an "SPA" refers to the appearance rather than provisioning of the app, and inherently relies on Javascript (or an equivalent scripting capability) to interactively rewrite the display. It's possible to single-file an SPA. The characteristic isn't central to the SPA concept, and in practice implementation is typically anything but. SPAs are not accessible without Javascript, and don't render at all from a terminnal / console-mode browser. (Ask me how I know this...) This is not an app. It's a website, or at least, multiple web pages, provisioned from a single HTML file. Yes, this instance has several external references. I've noted CSS in an earlier comment, you mention image assets. The concept could be further optimised for portability by incorporating those inline. Note that optimisations are also trade-offs. Inlined assets would mean duplication for a larger site. Which of those trade-offs are preferable or unwanted really depends on the specific goals. But as a demonstration of an idea, this really is pretty elegant.

How is this news? React SPAs have been around for years, and SPAs existed long before React too.

jolmg 5y ago

The difference compared to SPAs is that this doesn't use javascript.

TrevorAustin 5y ago

Also, those SPAs are loading the React literary off of a CDN. It’s not inlined into the page.

gigel82 5y ago
I have definitely built React SPAs with inlined JS and CSS as far back as 5 years ago, it even inlined some SVGs for icons; it was literally a single HTML page (unlike the discussed page, BTW, which loads the CSS and the images with separate network requests).

Dma54rhs 5y ago

This thing is fast unlike anything built as a spa nowadays that make your laptops fan spin so fast it wants to take off.

LAC-Tech 5y ago
It's fully possible to build fast SPAs. Though almost no one is able to do it. Which is weird, as it's objectively easier than writing enterprise react crap.

jcpst 5y ago

No, not a SPA. There is a concept of a single file app (SFA). You can share an html file, and that is the application. It can have inlined micro js/css frameworks, or hand-rolled everything. An SFA should be human readable though- viewing the page source is useful. I think it’s a concept worth exploring.

xwdv 5y ago
But what is the benefit?
- est 5y ago
  less Co2 emissions
- jcpst 5y ago
  Showing the capabilities of the web browser as an application target, directly. You have HTML, CSS, and JS available. No build tools required. Take this file and open it with a web browser. Then modify it, and refresh the browser. Distribution and Development for applications is about as straightforward and accessible as it gets.
  - xwdv 5y ago
    But what benefit is there for the end user?
    - jcpst 5y ago
      Source code that is readable. Viewing the source on web pages in the 90s was how I learned to make my first web pages.
dredmorbius 5y ago
I prefer the denotation of a single file site (SFS). Perhaps alternatively a multi-paged file (MPF), as there might still be multiple such pages on a site, or a site comprised of a mix of MPFs, SPAs, and traditional static single-page URLs.
- jcpst 5y ago
  MP-SFS

dredmorbius 5y ago

SPAs display in a single HTML URL, but are themselves (typically) comprised of multiple elements, including many CSS, JS, and data elements which are fetched dynamically. The example URL is a complete website within a single HTML document with no external dependencies and no further round-trip requests. It is a single-page site (SPS) or perhaps a multi-page file (MPF). https://john-doe.neocities.org/ https://john-doe.neocities.org/ You can open that URL, disable networking, and browse the entire site to your heart's content in any browser supporting CSS. If you open the file in a terminal browser (lynx, w3m, elinks[2], etc.), you'll see the full site presented at once, as a single page, without needing to specifically navigate between them (you can scroll the full site). Though the intra-site navigation itself still works --- it just doesn't reveal or hide sections.

gigel82 5y ago
I've built React SPAs with inlined JS, CSS and SVGs in 2017, which is why I'm still entirely clueless what's special about this. BTW, the discussed page is not at all a single-page site; it makes separate network requests for CSS and PNG files.
- dredmorbius 5y ago
  The point of this demonstration is that single-file provisioning is specifically the point. And specifically, using only HTML and CSS. The concept of an "SPA" refers to the appearance rather than provisioning of the app, and inherently relies on Javascript (or an equivalent scripting capability) to interactively rewrite the display. It's possible to single-file an SPA. The characteristic isn't central to the SPA concept, and in practice implementation is typically anything but. SPAs are not accessible without Javascript, and don't render at all from a terminnal / console-mode browser. (Ask me how I know this...) This is not an app. It's a website, or at least, multiple web pages, provisioned from a single HTML file. Yes, this instance has several external references. I've noted CSS in an earlier comment, you mention image assets. The concept could be further optimised for portability by incorporating those inline. Note that optimisations are also trade-offs. Inlined assets would mean duplication for a larger site. Which of those trade-offs are preferable or unwanted really depends on the specific goals. But as a demonstration of an idea, this really is pretty elegant.