search

ksquareincmx / project-proposals

Repository for discussion and approval of internal projects
0 stars 0 forks source link

HJSON #2

Open isaaclfelix opened 5 years ago

isaaclfelix commented 5 years ago

Summary

HJSON means Hypertext Javascript Object Notation. It aims to represent the same as HTML, only on a JSON object structure.

How does it work?

HTML builds layouts by nesting tags in an XML based syntax. Each tag consists of:

  1. Name
  2. Attributes
  3. Children or Text

An identical representation can be done with a JSON object. That is HJSON, a standarized HTML like representation on JSON.

The simplest tag with the simplest representation, for example a <span></span> , only a tag name, with no attributes and no children, can be represented with this HRJSON string:

{"tag":"span","atts":{},"children":[]}

Complex blocks can be easily represented by replicating this atomic structure, like so:

<div>
    <p>This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:</p>
    <blockquote class="wp-block-quote">
        <p>Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)</p>
    </blockquote>
    <p>…or something like this:</p>
    <blockquote class="wp-block-quote">
        <p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p>
    </blockquote>
    <p><a href="https://cms.lobodeguerra.test/wp-admin/">your dashboard</a></p>
</div>

Would be represent with a HRJSON string like this:

{
    "tag":"div",
    "atts":{

    },
    "children":[
        {
            "tag":"p",
            "atts":{

            },
            "children":"This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:"
        },
        {
            "tag":"blockquote",
            "atts":{
                "className":"wp-block-quote"
            },
            "children":[
                {
                    "tag":"p",
                    "atts":{

                    },
                    "children":"Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)"
                }
            ]
        },
        {
            "tag":"p",
            "atts":{

            },
            "children":"…or something like this:"
        },
        {
            "tag":"blockquote",
            "atts":{
                "className":"wp-block-quote"
            },
            "children":[
                {
                    "tag":"p",
                    "atts":{

                    },
                    "children":"The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community."
                }
            ]
        },
        {
            "tag":"p",
            "atts":{

            },
            "children":[
                {
                    "tag":"a",
                    "atts":{
                        "href":"https://cms.lobodeguerra.test/wp-admin/"
                    },
                    "children":"your dashboard"
                }
            ]
        }
    ]
}

Considerations

As any feature that aims for implementation on current browsers despite being composed of futuristic features, parsing protocols are considered to transform the HJSON objects into classic HTML. It is the goal to perform at least the following operations:

Motivation

Storing, retrieving and manipulating huge HTML strings can become a hassle on the modern visual website building ecosystem. Visual site builders create huge and complex HTML string based layouts that end up saved on the DB, cluttering it. Not only that, but that information is not easily shared across different development environments (local / staging / prod), since it comes from the database.

HJSON aims to become a way to transform complex HTML structures in JSON strings that can be parsed into JSON objects, which then can be used by modern frontend libraries like React, Angular or Vue, to create layouts dynamically without querying the database by saving instructions to build a dynamic layout on JSON files.

In other words, its a project aimed to change the dynamic-content-based websites paradigm, from pulling dynamic content (which nowadays can extend, but not limit to visually built layouts that are saved --and served!-- as huge HTML strings) from databases, into a JSON file based storage system that can even be commited into the repository and pushed / pulled to the different instances of the project.

Not only that, but in the long term, HJSON could become a JSON based, more efficient way to parse websites, that competes with the XML based HTML, which is significantly slower in parsing.

Team

Estimated time

Completing a finished distributable HJSON module is essentially easy. Since this was a personal project, I already built the initial prototype and published it here: https://www.npmjs.com/package/@lobodeguerra/hrjson

It would take about a year to complete it to a really high quality standard. However, if everything is planned properly this could be one of the most significant projects on our experimental side, if we complement this project with a web browser project based on this protocol instead of HTML for layouts.

Internal Adoption strategy

We could use HJSON as a way to kick up our credibility on the open source community, as if well planned it can escalate. Also it will speak about our web development level of understanding and applied science.

Contributing to the foundations of how the web browsers display contents is a way of saying that we're really deep in the matrix. This is a project where the theory behind HTML will serve as a way of finally having an alternative to the XML based notation to represent web documents.

mishelashala commented 5 years ago

@Rodmg @mendoza1024 what do you guys think?

Rodmg commented 5 years ago

Sounds similar to what React does with JSX behind the scenes, the difference here is that this would be JSON and not a JavaScript Object.

However the use case you are giving for visual website builders makes sense. @isaaclfelix Could you take a look on what React does behind the scenes to see if we can reuse anything there? I know that JSX actualy compiles to a JavaScript object that looks similar to what you are proposing here but for JSON.

isaaclfelix commented 5 years ago

JSX and visual site builders is worth a try. A React and JSX based visual site builder for Wordpress could be proposed in that case.

El mar., 26 de feb. de 2019 4:12 PM, Rodrigo Méndez < notifications@github.com> escribió:

Sounds similar to what React does with JSX behind the scenes, the difference here is that this would be JSON and not a JavaScript Object.

However the use case you are giving for visual website builders makes sense. @isaaclfelix https://github.com/isaaclfelix Could you take a look on what React does behind the scenes to see if we can reuse anything there? I know that JSX actualy compiles to a JavaScript object that looks similar to what you are proposing here but for JSON.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ksquarelabsmx/project-proposals/issues/2#issuecomment-467635468, or mute the thread https://github.com/notifications/unsubscribe-auth/AI3kSNdzYpMwrsdxnGRQ1lTdTTUN5xZLks5vRbFDgaJpZM4bNkPp .