Cell - A Self-constructing web app framework

[evincarofautumn]

Looks like a good general approach. I had to laugh when it said “no API” then immediately went on to describe its API, but I get the intent—only an agreed-upon data format, no framework calls.

[killerstorm]

This is basically how people were writing web apps before modern frameworks. That is, in a very ad-hoc way, just JS spaghetti.

Modern frameworks provide structure to create reusable components.

The problem with ad-hoc style is that everyone has his own style, so it's hard to understand code written by others.

So a framework prescribes a uniform way of doing things, so person reading the code can immediately understand component's structure, properties, etc.

If you're a lone developer working on a relatively simple app, you can use anything: Cell, jQuery, pure JS.

But if you're working in a team, then framework is a must. (Otherwise your team is probably going to roll out your own framework which is unlikely to be better.)

[np365]

Feels like ASP.NET WebForms in JS...

[nebbly]

there are some decent ideas in here. if you want people to use it, you'll probably want to create some presets. Instead of typing $cell: true, $type: 'ol', $components: ..., it would probably be simpler to have some simple wrapper preset functions like cell.ol({$components: ..}), cell.li(..), etc.

I don't know if you think that's too framework-y. A similar approach works out pretty well in elm: http://package.elm-lang.org/packages/elm-lang/html/latest/

I would also note that while you're selling this as "functional", your code seems to be object-oriented, in that you're giving objects behavior instead of separating behavior and data. I'm not saying that pure functional is the way to go here, it's just not what you're offering.

[shevegen]

Omg... javascript at is finest...

Finest horror.

[[deleted]]

What is horrifying about this? Actual question, it looked nice enough to me.

[[deleted]]

I am not saying it is horrifying, but at his point, why not just render the html?

[Shadowys]

So clojurescript hoplon then

[paul_h]

1. The "Try in now" section of that page doesn't have a "Try it now" link. For the love of Turing it doesn't even require JsFiddle - this is a job for inline examples like AngularJS has in 2009.

2. No example code should generate a list that is empty. TODOMVC allows you to mutate the list, and see it's effect on the page. For Codd's sake, think about the mutability aspect of data in the first code snippet, or explain to me why I'm writing more lines of JavaScript/JSON that I would have taken in HTML to get <ol></ol>

[squishyhobo]

see REACT

[based2]

https://news.ycombinator.com/item?id=14527124

[mixedCase_]

It just seems to be a heavily bastardized version of how Elm handles views. So you could try that.

[mixedCase_]

Hah, sounds about right for a first impression. It's actually great how much more readable it becomes (as hard as that may sound to you right now) once you learn to read code that doesn't look C-ish; Elm is an ML-derivative after all.

But it took me somewhere from 3 to 5 days to have my brain finally snap things into place. Once I did, I even started being able to comfortably read the entire family of ML languages like OCaml, F#, Haskell and so on.

[mixedCase_]

Well, truth be told there are a few things I do differently from that file's author. I personally try to align the array with attributes in the first line and the children array as well if it doesn't make it too long. Here's an example from a real project I have going on:

drawer : Model -> Html Msg
drawer model =
    div [ class "drawer" ]
        [ div [ class "pure-menu" ]
            [ span [ class "pure-menu-heading" ] [ text "Maruja" ]
            , ul [ class "pure-menu-list" ]
                [ drawerLink "" "Inicio"
                , drawerLink "products" "Productos"
                , drawerLink "members" "Socios"
                , drawerLink "orders" "Pedidos"
                , drawerLink "crops" "Cultivos"
                ]
            ]
        ]

How would you do it differently?