umbrella

@danpeddle already pointed out the important part, but just as an addendum... It all depends what one wants to do with a browser, doesn't it? For some of my projects the browser is merely a sandbox for delivering design tools and I really don't care about the HTML aspects of it at all. For other projects, I only care about HTML generation and use hdom's sister library to generate static HTML from the same components: https://github.com/thi-ng/umbrella/tree/master/packages/hicc... If a user has JS disabled in the browser, fine. If not, then the browser app can hydrate the static HTML and add interactive features and cause cancer :)

The commit table has a 100ms throttle on key press, but I think might have a bug, need to inquire more... :) There's also a stress test here which updates several hundred nodes each frame: https://github.com/thi-ng/umbrella/tree/master/packages/hdom... E.g. each cell shown requires 3 DOM updates per frame, so in the 256 cells config it updates 768 DOM nodes. On my MBP2016 this config runs at ~35 fps, 192 cells (576 real DOM updates) at 59-60fps

just wanted to point out that the joy of these approaches is that you can render on the server with the same components. the method for feeding it data obviously differs, but that's (when done right) pretty minimal. my favourite way of demonstrating this was actually to turn js off and still see everything working. the progressive enhancement flag is still flying, and tools like this make it easier by far. in this case, the server could be (soon!) java/clojure, which is insanely hard to do in an idiomatic, pleasant way with react components. really looking forward to getting this all wired up, and if anyone is interested we're discussing how to get hdom talking to CLJS here: https://github.com/thi-ng/umbrella/issues/36

That's because that demo is using SVG for graphics and hence updating 300+ DOM elements every frame will of course start stuttering... Once I've updated that example to use the hdom-canvas support lib (https://github.com/thi-ng/umbrella/blob/master/packages/hdom...) this will be a non-issue. E.g. here's another demo which draws 10k rectangles @ 60fps. Only once I go >25K, I'm starting to loose framerate (MBP 2016): https://demo.thi.ng/umbrella/hdom-canvas-shapes/#points-10k https://demo.thi.ng/umbrella/hdom-canvas-shapes/#points-50k

Thanks! The estuary package started in Java[1] back in 2011, but after years of learning from mistakes, several attempts in Clojure & endless refactoring has now morphed in this TS package[2], which I'm slowly getting more happy with... That demo will need to be refactored too and the plan is to extract those SVG components into their own package sometime during the winter break... [1] https://www.flickr.com/photos/toxi/albums/72157627351329656 [2] https://github.com/thi-ng/umbrella/blob/master/packages/rstr...

I actually did mention Reagent in the readme in this section (below the diagram): https://github.com/thi-ng/umbrella/tree/master/packages/hdom... Quote: "The syntax is inspired by Clojure's Hiccup and Reagent projects, which themselves were influenced by prior art by Phil Wadler at Edinburgh University, who pioneered this approach in Lisp back in 1999. hdom offers several additional features to these established approaches." However, Reagent also still relies on React under the hood whereas hdom is completely standalone. Also, hdom has a lot more features in terms of what kind of values are supported within an hiccup tree and additionally, in this latest version (5.0), hdom already has been extended to support non-DOM targets to update. Currently, the only user of this feature is the hdom-canvas package (https://github.com/thi-ng/umbrella

Nice visualizations. I particularly liked https://github.com/thi-ng/umbrella/tree/feature/estuary/pack.... Where can I find more stuff like this? :)

Thanks for sharing and Kudos for TypeScript! This question is not aimed at you and certainly not at your work. I used to be a game developer from an OOP background. I find this really hard to read. https://github.com/thi-ng/umbrella/blob/master/examples/hdom... Would anyone be able to give 2 cents about where the industry is headed in this regard? Will I be looked down on that my codebase is OOP in the future? Also for those who were cut from my cloth, did you find the transition difficult?

Did you miss it somehow? https://github.com/thi-ng/umbrella/blob/master/packages/hdom... https://github.com/thi-ng/umbrella/commits/master/packages/h...

https://github.com/thi-ng/umbrella/blob/master/packages/hdom... Lightweight UI component tree definition syntax, DOM creation and differential updates using only vanilla JS data structures (arrays, iterators, closures, attribute objects or objects with life cycle functions, closures). By default targets the browser's native DOM, but supports other arbitrary target implementations in a branch-local manner, e.g. to define scene graphs for a canvas element as part of the normal UI tree. Benefits: - Use the full expressiveness of ES6 / TypeScript to define user interfaces - No enforced opinion about state handling, very flexible - Clean, functional component composition & reuse - No source pre-processing, transpiling or string interpolation - Less verbose than HTML / JSX, resulting in smaller file sizes - Supports arbitrary elements (incl. SV

You also have hdom & co. coming from the i-am-not-a-framework side - https://github.com/thi-ng/umbrella/ Production size and evaluation times are a thing with react apps.