[question/research] provide Vue.js components and explorer frontend bootstrap project

GlenDC commented 5 years ago

Since the start of tfchain we have had a pretty plain frontend explorer. In general it did do the job, except for the fact that is written in javascript and suffered quite frequently from errors in the code making it not work due to some type-mismatch related issues.

On top of that there are now other Rivine-based chains up and coming, so these chains also require such a frontend website. We can copy paste but it is not an ideal solution.

So a question I've been having since a while is how simple it would be to provide a kind of bootstrap project (similar to https://getbootstrap.com, perhaps even based on it, but than really focussed on getting an explorer frontend website up and running that can be easily updated.

In order to allows projects to easily update their frontend explorer we want the common code to be available as Vue.js components. Note sure how far we can go with this, but I imagine that we build up from very primitive components (unlock hash address, currency value, ...), on a slightly higher layer have condition and fulfilment components, to build up towards coin outputs, block stake outputs, inputs, transactions, blocks, and so on...

These rivine-specific (including extensions) can be available as one big component library, that people can hopefully easily include in their project and will also be used by the bootstrap website. The bootstrap website would then use these components to build the most simple, yet modern and good, version of a frontend explorer website, using no extensions or anything.

In order to know if this is desirable and doable we'll need to answer some questions first.

Q: What is a component in Vue.js? What can it have, and how is it created? What kind of input can you give it, how flexible can you make it?
Q: Can you make a library of Vue.js components and have it be available as a library (via NPM or whatever Vue.js developers use?)
Q: What components are already available out of the box and provided by the community? The less we have to provide ourselves the better I imagine. E.g. a currency component is pretty generic that it might already exist for us;
Q: How would such a bootstrap Vue.js explorer frontend website look like? Is it easy to make? How will it be packages including the components such that people can simply deploy it as is with "the push of a button"?

LeeSmet commented 5 years ago

We might also want to couple this to a rework of the explorer module, to add some more statistics, improve the behavior, and most importantly, to support websockets so we don't have all of this archaic request spam when doing even the most trivial tasks

DeanVerjans commented 5 years ago

Vue Components

A component in Vue, is a component with his own properties, attributes, components and functions. The created component can be used in the root of the Vue instance or inside other components. The created components can be reused over the project and will use their own instance after creation.

By creating a Vue-component you will have a template, script part. In the template you add the hmtl and the Vue-attributes and used variables. The Vue-attributes can be used to bind variables or functions to the template parts.

There is also a script part where you import extern scripts/components. In Vue you have predefined keys (data, methods, components, computed, watch...).

Key	Function
Data	used to store variables
Methods	used to store all defined functions
Computed	will be executed when a re-render happens
Watch	allows us to perform an asynchronous operation

More information in the vue documentation.

Libraries

It is possible to publish your component library on NPM and have it available for everyone to use it easily by installing it and importing them where they need it.

Community

There are many components on npm that are available for public use. you can find a useful list of libraries via awesome-vue. there you can find popular and interesting libraries for u to use in Vue. Not 100% sure if there are a lot of libraries that are useful for the Vue explorer. Most of the popular libraries for other frameworks are also available in Vue.

Using Vue

You can easily create a Vue project via the Vue/cli. Via that way you can set up a GitHub repo that people can use to pull from and start from there by installing the node modules. The can then just use the Vue-UI or the command line to run their explores. And start creating their own components to extend the functionality.

Bootstrap

The frontend when using bootstrap will look like every other bootstrap website I suppose. The only difference is the way of implementing it into the Vue project.

Bootstrap has their own specific library for Vue. They will use predefined components just like the semantic-UI in the tfchain wallet. You install this via npm/yarn by using this command: npm install Vue bootstrap-Vue bootstrap and import the CSS file in the app.js. You can use the predefined components then inside your own created components. This is very similar to the implementation in react.

threefoldtecharchive / rivine