Bootstrap Treeview | Hacker News Reader

Bootstrap Treeview

github.com

104 pointsschniter29 comments

I recently used html5 sumary/detail to implement a treeview and it was the best experience ever solving such problem on the web. Very simple and easily customizable via css, and if you render it on the server, you don't need javascript at all.

Thank you for posting about this. Never heard of that element combo. Learn something new everyday.

> and if you render it on the server, you don't need javascript at all.

I find it amusing how things have changed. We've almost come full circle.

Server-rendered HTML: the once and future king

https://pbs.twimg.com/media/ENnKCr2U8AAw4Bf?format=jpg&name=...

I was about to say still not supported on Edge, then I realized Edge has become Chromium.

Any example?

Unfortunately I didn't find an example that was simple enough on the web, and the work I did is not open source, so here is the best link I found, which was by the way what I used to derive my implementation:

https://codepen.io/dsheiko/pen/MvEpXm

This is a bit fancier than necessary and that makes it not so good as an example for learning, but hopefully it will be enough to give you the idea.

edit: this one is a little bit better to understand the basics: https://medium.com/metaphorical-web/javascript-treeview-cont...

In short, summary/detail has the native hability to collapse the details and you can explore that to implement a tree by nesting them.

Scratch my post above, I made a better example:

https://pastebin.com/raw/9D02J80s

Thank you, that's enlightening.

Unfortunately, this is missing the semantic metadata about the fact that it's a tree. It might be fine in some cases, but in general you would want to add some Aria attributes. But i'm not sure whether you could generate the entire thing server-side.

Here's some examples of this lovely element. I can't believe I hadn't heard about this before! I shared it with several web designers/developer friends who all had the same reaction.

https://css-tricks.com/quick-reminder-that-details-summary-i...

^generated, not rendered, the browser renders.

I was surprised to see the markup generated by JS but after initial page loading the markup doesn't get re-rendered again in any scenario. Seems a shame to throw away accessibility for a single pass render when the markup could just already be there.

For anyone interested in rolling their own, nested UL/OL's and jQuery's slideToggle will get you most of the way there but with better accessibility.

For complex tree views I can recommend FancyTree:

https://github.com/mar10/fancytree

Looks good, Sam! I'm going to tuck this away and use it next time I need a tree view.

I had to do such a thing recently and ended up rolling my own mostly server side rendering in order to avoid loading it all at once.

No. Just no. Don't install a library and two others just to show a tree view. Make your own with whatever features you need and just those features, nothing else. Less than 200 lines of code and one day's work for a competent developer. Don't install three libraries in your webpage just to show a tree view.

I don't have an opinion one way or the other, but isn't a day of a competent developer's work usually worth quite a lot compared to the integrated maintenance effort of looking after two (one of which is almost universal) library dependencies?

Normally I'd disagree, but not this time. There's 0 test coverage. For simple feature libraries at minimum I'd expect it to have tests to be worth considering.

There are many cases where what you need is instant soup powder, not home made velouté.

And this will save me from writing tests for those lines. With all major browsers. And documentation. And maintain all that, of course, for the next 5 years.

And when new devs will arrive in the team to provide the training for the custom code. I may even not be here anymore

So yes, it can be overkill, or just what you need.

E.G: some server side dev need a quick fix for his personal web site.

Besides, even a lib with zero tests like this one will have enough users and tickets open that it will be better tested that the server side dev code that don't know JS much.

There is a good chance you already be using 1 if not both of the requirements already if you are building a reasonably responsive web UI that requires a tree view.

One day's work for a competent developer can be as expensive as $1000 for some locations.

If you're in the market for a Bootstrap Treeview you're likely already using Bootstrap and therefore jQuery.

Your comment reflects exactly the kind of attitude that puts people off doing open source work. No one is forcing you to use this project, someone put effort into making this and released it to the world for free, what does your criticism add?

It's a problem with HN - Since the average user can't downvote, these trash troll comments stay at the top and derail any conversation, when they should just be insta-downvoted into oblivion.

You're totally right, but everyone should just ignore the idiot troll and move on.

There is no way to know if its a troll or a noob or just a kid trying to learn web development who doesn't know what bootstrap is and has probably heard that external dependencies are typically bad.

> If you're in the market for a Bootstrap Treeview you're likely already using Bootstrap and therefore jQuery.

Is that true if you are using it as part of a react or vue application? I know, for example, that bootstrap-vue replaces the jquery dependency with Vuejs[1]. I'd guess the react equivalent is similar.

[1]: https://bootstrap-vue.js.org/docs

It's an addon component to bootstrap. Typically whoever wants to use this would already be using bootstrap in their project.

to your point, of course its not advisable to introduce bootstrap and jquery to your project just because you want to implement a treeview

Seems like you have never really worked on a large web app with lots of complex UI requirements, or else you would know what bootstrap is and when to use it and how much developer hours it saves. I am not saying it's the best library out there but it's pretty neat and gets the job done.

No just no to NIH syndrome ?

Reply on news.ycombinator.com