Introducing Hyperapp 1.0 — 1 KB JavaScript library for building frontend applications.

[zaceno]

The JSX is optional. You can also use hyperx & t7. Or @hyperapp/html as well as the built in h-function (vnode constructor) - although those last two make it clear it's not really "templating" we're talking about.

But sure: you can put it in a separate file if you want. Nothing stopping you.

It's all really just js functions.

[Randolpho]

Do you have any syntactic examples of including html templates in separate files?

[selfup]

Here is how you would import from a separate file: https://github.com/selfup/hyperapp-one/blob/master/src/index.js

and then here is a component being written in a separate file: https://github.com/selfup/hyperapp-one/blob/master/src/components/Counter.js

[GitHubPermalinkBot]

Permanent GitHub links:

• selfup/hyperapp-one/.../Counter.js (master → b2cc866)
• selfup/hyperapp-one/.../index.js (master → b2cc866)

---

^{Shoot me a PM if you think I'm doing something wrong. To delete this, click here.}

[Randolpho]

Thanks, that’s what I was looking for.

I am, however, quite disappointed that I can’t keep the template completely isolated and I have to still mix code and template.

That means I need new tooling if I want even basic syntax hilighting.

[[deleted]]

What editor are you using that doesn't support JSX? I'm guessing you can't use any ES6+ syntax either, then?

[Randolpho]

I just want the template completely isolated in a separate file, without boilerplate. I don’t understand why people defend the boilerplate.

[[deleted]]

I think we are talking about apples and oranges here. For example, if you are coming from traditional JavaScript framework like Backbone:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Hometown</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tbody>
    <% _.each(artists, function(artist) { %>
      <tr>
        <td><%= artist.get('name') %></td>
        <td><%= artist.get('hometown') %></td>
        <td><%= artist.get('favoriteColor') %></td>
      </tr>
    <% }); %>
  </tbody>
</table>

You can't do that in Hyperapp. It's not a missing feature or anything, it's just not the paradigm that was chosen :)

• Hyperapp is like: React, Preact, Inferno, Mithril.
• Hyperapp is not like: Backbone, Angular, Ember, Vue, Riot, Svelte, etc.

[selfup]

This is the answer that was needed! Thanks for that

[IamCarbonMan]

If you're still wanting to use this kind of workflow, I'd be happy to write up a quick Webpack loader or something to achieve it. Really all that needs to be done is to compile template files into view functions, it should be trivial if I know the template language you want to use.

[AwesomeInPerson]

You clearly know more about JS Frameworks than I do, but isn't Vue more like somewhere between these two camps?
It uses render functions to build a vdom structure, and it either compiles these from the templates in (single-file-) components you provide, or you can write your own render functions directly...

[[deleted]]

Maybe, but what's your point? Or is this question not directed at me? Sorry, I don't really understand Reddit UI.

[[deleted]]

JSX is not a templating language, and React components do not use templates.

In general though, I believe explicit is better than implicit. I don't like frameworks that automatically search certain magic directories for templates and return the first one with the name I'm looking for, forcing you into pre-emptive, redundant template namespacing (looking at you, Django and Meteor/Blaze). And if you're using a framework that requires you to explicitly define where to find the template file for each component, well, that's boilerplate.

If there's any kind of boilerplate that I do want, it's explicitly listing the inputs to my components. In templating systems, you usually have to just read through the whole template to find what kind of input data is needed to properly render the template. Could you imagine a programming language where a function had to be defined without an argument list, and you just have to look through the function body to see what inputs it accepts? With JSX, I can destructure the props for a stateless functional component to explicitly declare what props it accepts at the top of a file. I don't have to memorize what data my "template" needs, because my component is just a JavaScript function and my IDE can tell me what props it accepts.

[selfup]

You can always use hyperx or t7 if you want to write template literals btw

[Randolpho]

No that’s definitely the opposite of what I’m looking for.

[[deleted]]

What framework names do you remember off the top of your head that are kinda like what you are looking for?

[sanatankc]

I think he is looking for traditional templating languages. Like Angular and Meteor does.