Inspiration

I recently really got into ReactJS, Redux, functional programming, etc. and I'm in love with the concepts that world brings. Built this mostly to see if I could - to see if I could emulate something like Angular's data binding, and ultimately make a moderately useful tool for prototyping or building nice interfaces quickly.

What it does

Allows the user to structure their web app user interfaces with a JSON api I created. The api describes various UI widgets I've defined and styled. Additionally the user is exposed to a rudimentary data store API to be able to connect various widgets together, respond to data changes and build rich applications.

How I built it

A lot of JavaScript. No sleep.

Challenges I ran into

I originally wanted to be fancy and implement this in ES6, splitting my code nicely into different modules and bundling everything together; generating a Webpack library. For some reason none of the boilerplate projects for that workflow worked for me; so I was forced to - for time's sake - to revert back to ES5; plain, old vanilla js. Also making the logo was a pain - I'm not a graphic designer per-se so it was a lot of trial and error. It's based on the typical HTML/CSS/JS/AngularJS logo theme.

Accomplishments that I'm proud of

As far as my research goes, I haven't found anything quite like this - so I guess I'm proud of coming up with a relatively unique concept, venturing into uncharted territory, learning something new, and having fun all along.

What I learned

I've increased my knowledge of various DOM APIs, CSS flexbox, and gained more insight into what kinds of considerations take place when building something like a front-end library. My next shot at this will be even better.

What's next for DataUI

As it is, it's functional, but nowhere near what would be required or expected of a real JS library. It needs support for more widgets, it needs more robust validation/checking, I'd like to expand more on the data store api/feature, and I'd like to figure out a way to define effective generic styles that work in most circumstances so the user doesn't have to.

Share this project:
×

Updates