hyperHTML Starter Project

[navalpatel384]

I recently discovered hyperHTML, visited the website, started reading the documentation, and the blog posts about it. This project is amazing and I am really interested in building new web applications with hyperHTML. The only thing that is an obstacle for me to use it is the lack of a hyperHTML starter project that has best practices, such as routing with lazy loading routes, state management, custom components, webpack, and Babel. Please consider adding a starter project that is maintained side by side with hyperHTML because it would really help new developers with using hyperHTML.

Before I wrote this, I was looking for a solution to migrate my existing web application (which uses Vue) to another solution. I found both hyperHTML and Lit-Element. I really wanted to try hyperHTML but I don't have enough experience to create a completely new project with best practices and I found the PWA Starter Kit on Polymer Project's website which has a beginner friendly project that helped me learn how to use the framework. Unfortunately there were some breaking changes with the new Lit-Element update and my new project doesn't work anymore.

I am looking again at hyperHTML, which appears to be more stable with amazing documentation, and hopefully there will be a starter project so new developers interested in hyperHTML can get started. I am a high school student and this is probably the first time I have ever written an issue on a GitHub repository that I do not maintain so I apologize for writing an entire paragraph in this issue but I think it is important enough for me to write one. Thanks for considering this suggestion.

[WebReflection]

Nothing to apologize @navalpatel384, you've already posted an issue better than many experienced devs that usually rant or, in the worst case, accuse OSS developers about not providing this or that, so thanks for your kind tone and your will to give _hyperHTML_ a chance.

I'll try to answer piece after piece to hopefully give you some hint.

Starter Kit

_hyperHTML_ comes with a Server Side companion called _viperHTML_. I've created (long time ago) some sort of pre-made starter kit called create-viperhtml-app. It's unfortunately not updated, but it should give you a basic idea on how to share resources between client and server, in case you need it.

Lazy Loading

The easiest part to lazy load with hyperHTML is the definition, and the render, of each view, loaded through dynamic import(...) and show-cased in viper-news, the Hacker News PWA which is one of the fastest out there.

Routing

A very simple and lightweight approach to routing, fully inspired by _Express_ for NodeJS, is hyperhtml-app which, despite the name, work well standalone too.

Please bear in mind, differently from lit-html where updates can break surrounding parts, hyperHTML doesn't lock you in so that all the pieces around will always work no matter which version of hyperHTML you use 'cause these use just the DOM, whenever the DOM is needed.

Custom Elements

I am developing myself Custom Elements (without Shadow DOM in my case 'cause I don't need it) through HyperHTMLElement, which I think is the equivalent of LitElement or LitComponent, just 1 year ahead (everything lit did was 6 months to 1+ years after hyperHTML and friends).

You have few examples in the doc site too.

It's basically a glorified Custom Elements definition with a lot of useful common cases baked in core.

Isomorphic / Universal

If you are interested in using one package to rule them all (client and server) you can check examples in the hypermorphic project, where the linked one showcases how to configure with WebPack so you don't ship server side related code to the client.

Add the usage of dynamic import to have lazy load on the client, and you should have all the little pieces to create whatever you want.

State Management

Inspired by Preact, hyperHTML _Component_ gives you a setState functionality out of the box, and so it does HyperHTMLElement. In both cases you set a state, or part of it, and the live DOM updates right away.

If that is not enough, and you are after complex state management, you can use any state management that is not locked in with 3rd parts software, but I'm afraid I don't have out of the box an example to use, but I might create a specific section in the examples part of the doc site.

My apologies if the documentation, or surrounding projects, are not nearly as good and well maintained as Vue.js one, since you come from there, but please try to understand I am full time employee and also mostly alone, beside few awesome contributors, in maintaining all these projects, few of them born to showcase hyperHTML and its friends at their best.

I will keep this open hoping to find the time to create an out of the box experience or start-kit like project whenever I'll find the time to do so.

[k-j-kleist]

As for state managment of a complex web form, we have succesfully been using HyperHTML-Element with "Final Form" https://github.com/final-form/final-form/.

Note the very useful method HyperHTMLElement.intent(...), which makes it possible to use the same attribute for both reading and writing the form state: https://github.com/WebReflection/hyperHTML/issues/256#issuecomment-415374184

[pinguxx]

Im writing this blog
https://medium.com/easy-apps-with-hyperhtml
I will hopefully get to a full application with routing and everything, so that may help with this requests

[navalpatel384]

I began working on a project using hyperHTML, hyperHTML-Element, hyperhtml-app, and webpack. I didn't need Babel because I believe the last few versions of the popular browsers already support most of the features I am using. The only issue I experienced and am trying to solve is the routing with hyperhtml-app. Using the internal routing as suggested by the documentation works great but directly entering the url path in the address bar doesn't work. For example, entering the '/' url path in the address bar works but using any other url path will result in Cannot GET /route.

[WebReflection]

@navalpatel384 to handle that you need a server able to render such route, the client can only read and fake url changes, but not handle any manual request.

Luckily the hyperhtml-app approach is identical to the Express JS one, it uses indeed the exact same routing/matching library.

https://expressjs.com/en/guide/routing.html

[navalpatel384]

Is there an approach to routing in hyperhtml-app that does not require a server? The project I am trying to migrate from Vue to hyperHTML uses serverless functions and the routing was handled by the client.

[WebReflection]

You can use app.navigate(...) as shown in the README but that's different from writing manually a URL on the browser bar and expect the client to handle that.

With JavaScript (again, this is not about hyperHTML but how the Web works) you can intercept that via clicks, or synthetically configure that URL but you cannot avoid or capture a user that manually entered a different url, not in Vue, not in here.

Maybe if you have an example I can also better understand, but I'd like to also underline this is not Stack Overflow, this is an issue or a request for enhancing the docs, it's unlikely a good idea to have any extra conversation in here until that is done.

[WebReflection]

Also probably relevant: why did you abandon Vue, exactly?

[navalpatel384]

I am not sure how Vue handles routing but my project's router configuration is here. The two router modes are hash mode and history mode. I use history mode. It works on the local development server and on the project's website. I am rebuilding the project because of several reasons.

1. The development server takes a long time to start and builds take a long time.
2. Debugging the application is difficult.
3. A lot of the project's components are dependent on one another and computed getters, which can cause a lot of problems.
4. The web application is a little heavy and slower on mobile devices. I spend a lot of time improving the performance of the web application, checking the PageSpeed scores, checking the Lighthouse scores, reducing the number of network requests, and reducing the amount of code by moving reused logic into functions.
5. I don't want to use a virtual DOM.
6. I like the structure of custom elements.
7. Using certain UI libraries for Vue can create conflicts with other UI libraries.

[WebReflection]

@navalpatel384 I'm a full time employee and I don't have much extra time. Whenever I'll have such time, I'll try to create a step-by-step guide but until then I won't be able to assist you.

[WebReflection]

until then I won't be able to assist you.

That's not going to happen before a month, to give you a possible minimal ETA

[pinguxx]

from this example
https://stackblitz.com/edit/hyperhtml-app
looks like going directly to the julia page for example does work, isn't this what you were expecting?
main
https://hyperhtml-app.stackblitz.io/
going user julia directly
https://hyperhtml-app.stackblitz.io/user/Julia
also works

[WebReflection]

@pinguxx I think @navalpatel384 is expecting that typing https://hyperhtml-app.stackblitz.io/whatever in the url would magically show something, which if not registered, won't happen.

[pinguxx]

is there a way to have a default/error route and default to that one?
from his ts file looks like he has all the routes defined that's why i thought the thing was the same but maybe i didn't follow correctly

[WebReflection]

is there a way to have a default/error route and default to that one?

a server must answer to a request in order to produce any meaningful answer. The reason the live demo works is that the server listen only to / and serves the same page no matter what, so that hyperhtml-app takes over once the page is loaded and a handler has been registered.

No server able to serve a page, no party.

You either have a server that servers, no matter what, same page whatever request arrives, which won't work on a static, file system based, server, or you're out of luck 'cause the client cannot take over a server, it can only handle after it's been served.

[navalpatel384]

Thanks @WebReflection for your explanation of the routing. I was able to configure routing by adding redirect rules for a static website hosting service.

[navalpatel384]

Sorry to post questions here. It would be nice if there was a Discord server or Slack channel for hyperHTML.

I have getters and setters for element attributes that are sent to an API, used to write HTML, and then rendered. I get a maximum call stack size exceeded warning for get _citationHTML() in the Chrome DevTools console. Is there anything that doesn't look correct in this code?

[WebReflection]

@navalpatel384 there is a gitter chat https://gitter.im/viperHTML/Lobby

About that code, this is super wrong.

Once you bind the shadowDom you can never use that inside a wire or something else ... that is where you render content, not something to put elsewhere .... like .... never.

I'm closing this issue since it's completely useless now as it is, and I will block comments too.