redom/redom

RE:DOM – Tiny turboboosted JavaScript library for creating user interfaces

Juha Lindstedt

@pakastin

you can do for example setChildren(elem, ['some text', var, 'more text'].map(text))..

import { text } from 'redom' I mean..

import { text } from 'redom';
...
setChildren(elem, ['some text', var, 'more text'].map(text));

Mikko Ahlroth

@Nicd

well my point was that I had to change a text that had dynamic content inside it

so I made my element with el('li', this._getChildElems()) and the child elems function returned a dynamic list of strings and elements. like ['Some text', el(...), 'some more text']

and that worked with the el but not setChildren, but I will use that text function :)

Mikko Ahlroth

@Nicd

aaand simplified: https://gitlab.com/code-stats/code-stats/compare/ac150fba720ef5b62c857efe2d3f79b1635a4765...74fb1fa448ba3bdb80d5072e1c5ced2802abdf45 :)

thanks!

Juha Lindstedt

@pakastin

👍

yeah, setChildren and mount are helpers for appendChild/insertBefore, so they need Node / component..

el is a bit different, since it's document.createElement helper..

Juha Lindstedt

@pakastin

you could also do a list of <span> components..

however it's quite fast to just use text nodes and setChildren as well..

Mikko Ahlroth

@Nicd

I know I can give list elements context in the list update, but can I give context right at the start so it goes in the constructor?

Juha Lindstedt

@pakastin

Yup!

Mikko Ahlroth

@Nicd

like: this.topLangList = list('div', CombinedLevelProgressComponent); -- can I give CombinedLevelProgressComponent constructor arguments that are given to each item?

Juha Lindstedt

@pakastin

list(View, key, initData)

Mikko Ahlroth

@Nicd

ah, obviously

Juha Lindstedt

@pakastin

new View(initData, item) 😉

Mikko Ahlroth

@Nicd

like list('div', new View({data}, CombinedLevelProgressComponent));?

Mikko Ahlroth

@Nicd

https://files.gitter.im/code-stats/Lobby/aBOs/Screen-Shot-2018-02-19-at-22.43.23.png -- first working thingie on profile page, live updates, made with RE:DOM :)

lots more to come

thanks again for the quick help!

Juha Lindstedt

@pakastin

No worries! 😉

Mikko Ahlroth

@Nicd

can a RE:DOM component return two DOM elements without nesting them inside a wrapper? :P I guess not

MrSorcus

@MrSorcus

can a RE:DOM component return two DOM elements without nesting them inside a wrapper? :P I guess not

redom/redom#93 - Did you read this?

Mikko Ahlroth

@Nicd

cool, not directly related though. I just refactored my code and then noticed CSS Grid doesn't work like I wanted it to

so in the end I don't need the feature anyway :P

I thought I could hide DOM elements with CSS Grid template-areas, but it doesn't work that way

Juha Lindstedt

@pakastin

I've thought about that (multiple elements inside this.el), but let's see..

nawfalhasan

@nawfalhasan

I am totally new to web development. Was doing some basic internet research on js frameworks to choose from. It's a hobby project, so I can expermint. Have a question on redom

Is it suitable for SPA? Redom looks pretty basic view library and I am not sure if it gives my application an architecture. Also, what about routing, state management etc in redom?

Juha Lindstedt

@pakastin

I’ve used RE:DOM to create the whole iDiD digital signage system (idid.fi, idid2.fi), which is single page application

So yeah, it’s very well suited for that purpose as well 🙂

I use it so that I build component hierarchy, where I pass api along. Then I use that to trigger updates to the state.

I also have a requestAnimationFrame throttle, but that’s not required

But you can use whatever state management you like

I used to use native DOM events, that was also good

Components have constructor and update methods, so that you can efficiently update the state, usually even no diffing needed, since browser keeps care of that

Juha Lindstedt

@pakastin

lists, router and places are good tools to use, too

router is basically a view router, but it’s easy to use with push state or hashes:

const path = location.hash.slice(1).split(’/’);
// i.e. #/info –> [’’, ’info’]

router.update(path[1], state); // ’info’, state

Juha Lindstedt

@pakastin

It’s almost identical to use pushstate..

nawfalhasan

@nawfalhasan

@pakastin thanks, though I dont follow all that technical stuff you say. I am just starting on this whole front-end stuff

Juha Lindstedt

@pakastin

I should make an example app..

nawfalhasan

@nawfalhasan

Yup :)

Mikko Ahlroth

@Nicd

congrats on the 10000 stars! :star: ;)

my service pivoted into the cryptocurrency world: https://twitter.com/code_stats/status/980374287713492993

Juha Lindstedt

@pakastin

Mikko, it’s April 1st 😉

Oh, haha didn’t check out your link first 😄

That’s good one! 😄

Where communities thrive

People

Repo info

Activity