Using components as building blocks for a website is very popular these days because of tools like @angular/cli, @vue/cli and create-react-app but all these tools can only be used from the command-line.
This is acceptable because the syntax these libraries use is not supported in browsers and need to be compiled but what if we could use these building blocks without the need of a compiler.
I personally created a proof-of-concept library that does this and I want to know if such an approach needs to be taken to solve the issues that compilers bring like unreadable minified code, complex build processes, and poor debugging experiences or even if compilers bring issues to begin with.
Really hope to hear from the community.
My proof-of-concept contains some documentation
Top comments (5)
Hi Mainsara, I had a look at your library and I think the reason that brought you to create it is super valid, I feel like though the rationale that brought you to create the POC misses some info (at least with Vue and probably React, because they can both be used as UI rendering libraries, don't know about Angular).
In the project you state this:
If, understandably :), the goal is to simplify the adoption path without going down the rabbit hole of tools and compilers, there are already ways to do it (I'll speak about Vue because that's what I know).
Vue allows you to render itself right from the HTML page, without a build step. The documentation itself discourages beginners to start with the CLI tools but start with a simple page with the embeddable version of Vue.
By using Vue directly from the HTML page you have access to declarative rendering, looping and conditional controls and... components with templates.
You can go quite far then.
The CLI is suggested for large scale apps or SPAs, which make sense.
Your rx POC is cool! I see it contains a simple CSS parser, it uses mutation observer for the life cycles and so on. Basically a JS rendering library 🔥
Thanks and I agree, Vue runs perfectly well in a browser but react and angular are the "some assembly required" type of libraries, react is in this group because its method for making apps without jsx is not as easy as what Vue offers and in most cases it is easier to use the command-line than to try it without JSX
React could also totally run on browsers, the documentation also explain you how to do it
Load the code from a CDN, create your component using React.createClass and render it, JSX is a nice add-on but is not required, and if the syntax of React.createClass is too verbose you could use htm to use a pseudo JSX syntax using template literals (the docs mentions Preact but it works with React too).
I'm happy to find others who agree with me on this. We don't always need build tools. It's all HTML, CSS, and JS in the end.
I wrote an article recently about how to do this with ES6 modules.
dev.to/arswaw/create-a-lightweight...
Wow, your method is great and similar can be achieved without ES6, although it will mean no more import statements ☹