Although I don't have much experience with component frameworks, Open Web Components stands out as an open way to develop a component based website. Because OWC is not attached to any sort of framework, it makes it much easier to pickup on any project you are working on and it can be completely independent. I'll show off how to use OWC, so you can start adding different components to your website.
1. Install NodeJS
You'll need to start by downloading and installing NodeJS at https://nodejs.org/en/. I would recommend downloading the LTS version, so you don't run into unnecessary errors.
2. Initialize your OWC repo
Once you have Node installed, you can go into your command line and run: npm init @open-wc
This will then prompt you with a series of questions about whether you want to make a component or app. You can also add linting, testing, and storybooks if you choose to, but it is not required. Lastly, you'll have to give your project a name, install dependencies and then cd <project-name>
3. Getting familiar with the file structure
Once you're in the component directory, if you're using VS Code you can run code . to open the project in VS Code. You'll find a couple of useful files. First check out the demo\index.html. This will show you the html that will run when you start the project. Secondly, you'll find src\<project-name>.js. This is where you will build out your component and import any components you would like to use.
4. Install some components
Before we start the project, we'll need to download a couple of components that we want to add to our demo. You could also pick any you want to use from https://www.npmjs.com/. In your project directory, run npm install @lrnwebcomponents/meme-maker and npm install @lrnwebcomponents/moar-sarcasm. Then to import these components to our project you'll need to add
import '@lrnwebcomponents/meme-maker';
import '@lrnwebcomponents/moar-sarcasm';
to the top of your src\<project-name>.js file.
5. Start the project
To get things running all you need to do is go to your project directory and run npm start. This will automatically open your project in your browser. It will also automatically update whenever you save changes in your files.
6. Begin using the components
Now depending on the components you imported, you can use them in the render function of your src\<project-name>.js file. For the examples we downloaded you can paste this code inside the render() function.
<meme-maker
image-url="https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg"
top-text="Maybe I Should Buy"
bottom-text="More Doge Coin">
</meme-maker>
<moar-sarcasm>
"maybe i should buy more doge coin"
</moar-sarcasm>
Once you save the file your page should look something like this:
And you're done!
Although this is a simple introduction to Open Web Components, I like it more than using JS Frameworks like ReactJS or VueJS since it's independent and open source. You can also get a simple project running and install other components to mix and match together. Lastly, you also don't have to worry about how OWC works with everything else in your dev project, since it is basically read as HTML when it's ran in the render function.
Check out this video if you want to see how it's done rather than read!
Top comments (0)