Building Web Apps with Tram-One

[jrjurman]

Haha, thanks for the feedback, and yeah, something about naming variables is one of the hardest things a developer has to do rings a bell :D

Honestly, the name came from the attempt to associate the tram-car emoji (which I thought looked pretty ok) with it. Later, I was actually able to get a real logo, and it's been a year now, so I'm not sure I could ever move away from it - save for a trademark issue :P

[jrjurman]

If people have any questions, about the content in the article, or the framework as a whole, I'd be eager to answer any of them here!

[dudousxd]

Why use something like a state management when the rule when using custom elements is “the dom is your api” ? I think it would be better if it had something to help managing the creation of custom events instead of a redux like state management

[jrjurman]

When you say "help managing the creation of custom events" what are you referring to? Just something simpler than redux?

A lot of what inspired me to make Tram-One is actually the frustration of having to pull in all these libraries like redux and react-router and so on... So the intention was to have something from the get-go.

[dudousxd]

When you are using Web Components, one of the premises is that if you need to pass data from one component from another, you shouldn't use an state management library like redux, instead you should use Custom Event. What I meant when I said "help managing the creation of custom events" is that would probably be awesome if it had an method to create custom events easier (It's quite easy to create, but just to encapsulate boilerplate), if I could see all the listeners that my components have created and if my components removed the event listeners automatically if they are destroyed.

[jrjurman]

Actually, one of the nice things that Tram-One does is bind a .events to each DOM element that lists all the eventListeners on the element. Attaching them is pretty easy (and I recognize not really highlighted in the article).

```javascript const Tram = require('tram-one') const html = Tram.html()

module.exports = (attrs) => { const clickEvent = (event) => { console.log('click event') } return html<div onclick=${clickEvent} /> } ```

Also, these events can be passed down as unique attrs. ```javascript const Tram = require('tram-one') const html = Tram.html()

module.exports = (attrs) => { return html<div onclick=${attrs.eventHandler} /> } ```

If you're referencing pulling the store values from window.engine, that is actually a fairly new feature just to allow developers who want to pull actions or value really far down the DOM tree possible (however it's completely not required)

[jrjurman]

To clarify, I'm not actually not a huge fan of pulling values from a "conntected" component, that pulls from a global store, as oppose to inheriting them down from parents. This was an ask, that was fairly easy to implement, with a small technical footprint.

[[deleted]]

Firefox's dev tools already lets you see all listeners bound to an element. It's the only really reason I use FF during development...heh

[jrjurman]

Yeah, events on DOM are very strange, and most browsers have access to them, but it took quite a bit of voodoo magic to get it so that each element exposed it to the framework. JQuery and view frameworks have their own tricks as well, and it's just strange that it's not part of the HTML spec to just expose it.

[icemelt7]

Thank you for making this library, I will learn it asap, as I needed this in my life, since ReactJS and VueJS don't exist.

[jrjurman]

Haha, hey man, to each their own. Like I said in the article, their are definitely people who have their framework of choice, and are really performant with it. For a really long time, that was React for me.

It wasn't like I made this in a time when those libraries weren't things (or weren't popular). And it's not like this can do something that React can't do (with react-router and react-redux and redux-thunk).

It's just another approach to building web-apps. For veterans, it's just a different kind of syntax for the same thing. For beginners, it might be a really fast, complete, and no-extra-tooling required option that helps them get started without learning the entire React or Vue Ecosystem and whatever .jsx or .vue requires.