How would you use a template?

#1

I've had a quick look at Vue.js and wonder if we can do templates

<div id="app">
    {{ message }}
</div>

<script type="text/rebol">
  js-do {document.getElementById('app').innerHTML = "Goodbye"}
</script>

So what type of page setup would this work?

#2

The juxtaposition of the two bits here kind of defeat the point of templating.

The point of templating would be that in Rebol there is a variable message and it's filled in automatically.

So it would be more like:

<div id="app">
    {{ message }}
</div>

<script type="text/rebol">
    pagevars/message: "Goodbye"
</script>

...and then there'd be some automagic process by which it knows to go through and substitute variables from your code into the page.

The only kind of this I know about is server-side. This would let you do things like:

<a href="{{ somelink }}">

I'm not sure if that would make a page invalid in a way that would trigger errors, but this certainly would:

<{{ span-or-div }} id="broken">

If you're doing templating on the server side, you start from the "augmented HTML" format and are doing substitutions in flat text before it is sent to the client, and hence before it becomes a DOM. You can thus template CSS or any other text file, substituting variables from your language.

On the client side you'd be searching the text content of DOM elements for patterns to replace. I don't know how common this is, or what it would be used for.

It seems dialects that use Rebol proper...as BLOCK!s and instructions to build HTML, would be more interesting.

#3

Well, Vue.js seems to be one of the up and coming JS frameworks and this is all done in the browser and is not a server side extension.

I took the simplest sample possible to show how it works, and I like that the display is separated from the programming side of things whereas in VID, everthing is mixed up thoroughly.

A more complete example is my power form which I have yet to finish. It does data validation on all the form fields before it allows it to be submitted. At present the rebol function that gets the submit data just sums it all up and places the result in a div. But I want to see if we can take out the vuejs templating language altogether and do it Rebol.

Here's that simplest of Vuejs https://scrimba.com/p/pXKqta/cQ3QVcr

#4

Vue.js is a framework like React or Angular, where you can do the rendering/composition on the server or the front-end.
I think things are headed toward using Web Components, where individual UI widgets are packaged and managed with their own assets (images/js/css) and call their own microservices on the backend. Or something.


https://www.polymer-project.org/

1 Like
#5

This Jimmy Bogard presentation was helpful to me in understanding how the "fullstack" space is evolving.

It focuses on the backend stuff (& microservice architecture), but provides a nice Amazon eCommerce example which ties it to front end.

A similar talk of his is good too - Avoiding Microservices Megadisasters.

Although Rebol is focused more on programming-in-the-small, these presentations show the challenges that devs are trying to overcome in corp/ecommerce shops.

#6

Required background reading for any discussion that involves microservices - https://martinfowler.com/microservices/
:slight_smile:

2 Likes
#7

"If it hurts, do it more often." - Martin Fowler :grinning:

#8

I get the impression skimming the material that uservices are more like AWS lambda. Whereas we are talking about packing components into the browser??

#9

@gchiu you might want to look at Imba, the language used to build the site Scrimba. Imba does direct DOM manipulation unlike many other frameworks (React, Vue, etc.) which use a virtual DOM that needs to be reconciled with the real DOM whenever state changes. Imba's performance is way, way better than these. Imba, besides targeting web development, is also a general purpose language, inspired by Ruby.

This Scrimba presentation, talks about how Imba achieves it's performance in it's compilation step to JavaScript, by building in memoization (caching) behind the scenes. Ren-C in the browser might be able to use a similar approach and make use of parse in doing so.

1 Like
#10

Looks like IMBA is a Ruby VID for the browser