gliechtenstein's comments

You guys should check out https://www.celljs.org if you like this type of approach

It can transform anything that's written in JSON, which means both model and view and anything else.

One of the use cases for ST.js in Jasonette is dynamic client-side rendering, where it takes dynamic data and renders it against the template, after which it becomes native components.

Another use case is implementing actual functional programming. This one is not as straight-forward since it involves maintaining another separate state machine for function call stack. But this is also achieved using ST templates. Here's a blog post that talks about it in detail http://blog.jasonette.com/2017/02/15/functional-programming-... but it's a bit involved.

Also Jasonette has something called mixins, which you probably can guess based on its name. It lets you mix in JSON objects into another, so that you can make the app modular. That's also achieved internally using ST.

Overall, I believe even I'm just scratching the surface of what this can do, which is why I decided to take some time to clean things up and prepare and open it up as its own repo, because I think there's tons of other things that can be done by taking advantage of the fact that all that's happening is:

JSON A + JSON B = JSON C

Hope this makes sense!

> That's more human readable, but also slightly inconsequent - you wouldn't be able to validate such a template with json schema for example.

Could you elaborate?

Thanks! I actually built this library for my own usage (Jasonette) and decided to open source it because I realized it can be powerful for all kinds of other purposes.

In essence ST.js is a finite state machine implemented purely in JSON. So I can imagine it being used for things I haven't thought of, which is why I open sourced it. Would be really cool.

Please feel free to reach out at ethan.gliechtenstein[at]gmail thanks!

Hi, my name is Ethan. I'm the creator.

I thought I would provide some context on why I wrote this library, and how I'm using this right now. So here it goes:

Other than ST.js, I also work on another open source project called Jasonette (https://www.jasonette.com), which lets you write an entire native iOS/Android app in nothing but JSON markup.

And when you can express the entire app logic--from model to view to controller--in JSON, you can split them up whichever way you want and load them from anywhere (from a file, from cache, from a remote server, or from local memory).

But the biggest benefit of all is: you can load an entire ios/android native app from the server in realtime, just like how web browsers load HTML/JS/CSS in realtime.

When working on Jasonette, implementing model and view was relatively simple. For model it's natural since JSON is all about describing data. For view i just needed to come up with a syntax to describe layouts and all the standard mobile UI components in JSON.

However the biggest challenge was how do i actually describe functions in JSON. Without a function, it's just a mockup and won't really do anything meaningful.

Which brings us to ST.js.

When you think about what a function is, it takes one value and turns it into another. So basically what I needed to do was build something that will take one JSON, and turn it into another JSON, but most importantly I would have to do it using JSON. Basically I needed to implement a finite state machine in purely JSON.

And this is what templates do. So I set out to build a JSON template engine that turns one JSON into another using a template which itself is written in JSON.

What's really cool about this is, since the template is JSON (As far as I know there doesn't exist any prior art that uses JSON as a template, otherwise I would have used it instead), it has all the benefits of the JSON format itself:

1. You can store it anywhere (Most DBMS nowadays support JSON natively)

2. You can send it over the Internet

3. You can compose them easily

4. You can validate them using JSON schema

5. etc.

To use a more specific example, I use ST.js in both Android and iOS versions of Jasonette as the template engine. And a JSON template is absolutely necessary in this case.

For example, if I want to take a piece of device-generated data and render it, I need to be able to somehow parse it client-side (can't send it back to server to re-generate a JSON) http://docs.jasonette.com/templates/#3-device-api-generated-...

This also applies to many cases where the client-side data contains privacy-sensitive data. The only way to dynamically parse something that happens on the client side is by writing the template itself in JSON and sending it over as data.

Anyway, I hope you guys take a look at the examples on the homepage to get a glimpse of what makes ST.js powerful. Each example is almost its own library, except that you don't need a separate library for those purposes since all you're dealing with is JSON.

Creator here. Yup, in fact you can check out something like that here https://github.com/SelectTransform/JSONQL

Basically you can send the JSON template over JSON to the server, and let the server transform the raw data using the template before returning.

The most important benefit here is that, since everything can be expressed in JSON, it can be stored or transmitted over the Internet, which enables interesting cases like this.

Thanks! :)

Hey guys I know this post will be one of the most meta things to post here and probably a lot of people will say "what's the point?" but I thought it was cool so thought I would share.

For background, I am working on a JS library called cell.js (https://www.celljs.org), which turns a JSON object into a dynamic web app.

Anyway, this particular app (HTML to JSON to DOM) takes any HTML, parses it into JSON, and feeds it to cell.js, which then turns it back to DOM again. I built it because sometimes I just want to take an existing HTML and transform it to JSON, so I can turn any existing website into cell, and it works pretty well for that purpose.

You can try copy and pasting any website HTML into it to see the effect, as shown at https://github.com/gliechtenstein/HTML2JSON2DOM. Hope you find it cool as well!

This looks awesome! I believe being able to express an entire app logic as data can be super powerful.

BTW shameless plug: If you're interested in this type of ideas, please also check out Jasonette (an open source project I'm working on) Just like this project uses "list" to describe an app, Jasonette uses JSON to describe an app. https://www.jasonette.com

Thanks! I'll be honest, cell is only a couple of days old, and I myself can't say what The best practices are.

And this is by design because the goal was to create complexity out of simplicity.

I believe this bottom up approach can be much more scalable in the long run than some frameworks that dictate every single detail you need to implement, because all organisms are basically built that way (cells make up body) and they seem to be working fine.

Personally the more I use this the more I find creative ways of using it, which is the beauty.

But I also do realize sometimes it's good to have some sort of "best practice" structure and I think people will figure it out eventually.

TLDR: I think you should be able to build all kinds of sophisticated apps with it because I believe emergence is the best way to construct something. if that's not the case, that doesn't mean the framework is a failure but just needs some tuning, which I believe is totally possible just because the library is so minimal. So please feel free to play with it and share if you run into trouble, we can evolve cell just like cells evolve in the real world.

sorry about that, yeah i meant to add fetch polyfill but forgot to.

But rest assured, the library itself is 100% es5.

btw could you share the link that's not working on IE11? I will fix it right away. Would appreciate it!

I hope these are enough (They're on the homepage as well if you want a more readable version):

How it has a different architecture: https://github.com/intercellular/cell#so-how-does-it-work-ex...

What these architectural decisions mean and how they make a difference https://github.com/intercellular/cell#how-does-this-make-a-d...

Sorry about that!

I'm using some in-house library I built myself to run the webpage but hadn't realized it fails on an IE. Will fix it!

I think the first reaction when people see Cell is to compare with existing frameworks and existing best practices.

And when you come from that direction, Cell is a terrible framework that doesn't follow any best practices and does things in a weird way. But the thing is, Cell is fundamentally different from other approaches. That's why a lot of "best practices" don't apply and don't make sense for Cell.

If you go back in history, people hated angular because it went against the general wisdom of "separate view from logic", and react was shunned because it had some weird way of doing things. But I think they solve problems in unique ways that make peoples lives easier in different ways, and that's what matters at the end of the day.

And I am confident that Cell can make people's lives significantly easier in another different way. So I suggest you actually play around with the examples at https://play.celljs.org

Words don't mean anything really because the problem we're trying to solve is come up with a dead simple easy way to build web apps, which is not really easy to grasp when just thinking about theories. Hope this helps!

Cell has a fundamentally different architecture than other frameworks, so I don't think it's fair to compare it with how you would use other frameworks.

The whole point of cell is to build the simplest building block you can compose to build complex structures, and a lot of the problems faced by other traditional approaches can be tackled in a different manner using Cell.

From my experience I can build fairly complex apps without having to worry about all the problems you mentioned, they are just structured differently.

If you have time, I really suggest you try playing around with it, If you still don't like it you don't have to use it, but I'm sure it brings some interesting ideas to the table that cannot be experienced by just reading the homepage.

You'll see how to do this at the end of this section https://github.com/intercellular/tutorial#a-creating-a-simpl...

Hope this helps!

Thank you. i built it because I believed things can be much simpler.

The inspiration was from real life cells. It's amazing how small autonomous cells bind and interact with one another to form a complex organism.

Cells have genotypes which manifest themselves into phenotypes. And a nucleus that self-controls the cell cycle.

I thought by creating a completely autonomous structure that mimics how cells work it will be possible to create complexity from simplicity.

i hear a lot of people saying this will never scale because it doesn't look like react or angular, but I think the point is not about what's missing, but what you can do with these by combining these self aware elements. I believe this approach is much more scalable because it builds on top of simplicity.

Again, thanks for the comment!

Yes, cell itself has a decentralized architecture but that doesn't mean you need to do everything in a decentralized manner.

Just like you can build spaceships, police station, cars, and all kinds of complex things using lego blocks, you can build complex architecture using the simple building block that is cell.

I myself have been experimenting with different approaches of structuring apps using cell, and there are really a lot of different ways since we become free from having to inherit classes and instantiate objects from them. I don't want to be constraining about how one uses cell so I don't talk much about what a "best practice" is (yet)

But maybe sooner or later people can share some nice approaches for structuring "traditional apps" using cell

Thank you so much! So glad to finally run into a positive comment haha. You totally nailed it!!! You made my day :)

Thank you! You are right about everything. It's intentionally built with es5, it was pretty challenging to do so. Initially I used es6 proxy to handle all the state synchronization and message dispatch without touching the DOM but since my main goal was to build something that works on ALL browsers today, without any transpiling, I instead used Object.defineProperty. It was tricky but got it to work!

Also yes it is component based but it's a different type of component than other frameworks. Since cell has no classes to inherit (to get rid of dependency) you can write the entire app with stateless functions only. This scales better than class based approaches since functions don't have overhead and you can "componentize" anything.

Hope this makes sense! I did my best to explain these on the homepage but if some of them are not clear enough please let me know, I'll correct them!