Jump straight to Usage
With inspiration from State of JavaScript, the assignment was to choose a framework from that list and create a data visualization that displays framework data across different years as shown in the image below.
Image of what our webpage should look like.
- SolidJS
- TypeScript
- Vanilla CSS
- Git
After setting up the project and creating issues to keep it agile and to deliver small working software frequently, I started working with the overall basic layout and added a header component with h1, a main element that contained the chart component and the footer component that contained the links.
With that in place I moved on to decide what type of element I should use to present the data. Should I go with the <table> HTML element, or using the <ul> HTML element or perhaps just using <div> HTML element? After some consultation with my teacher I went with the latter one using <div>, mainly because <ul> is used to define an unordered list of items and <table>is a bit tricky to style.
From that it was easy to set up and follow the SolidJS-way for coding class and style, components, list rendering and data binding and create the gridlayout using CSS Grid together with grid-template-columns and repeat.
Apart from some minor styling challenge, for example how to set the framework names och each side to align inwards (I love CSS Grid and justify-self), the major challenge was about how to handle the empty data-cells not collapsing making the survey-data aligning to the left rather than keeping its place in the grid. But after some deep dive into Solid Docs about createMemo together with <For> and joining the SolidJS Discord channel for additional information, I managed to solved that issue.
Study the documenation and ask people for guidance! I like having some AI to bounce ideas off, especially when completely stuck, but they usually give you a different or more complex solution that you did not want nor understand.
Since this is my first time using SolidJS and in a fairly limited time my thoughts will be a bit short and maybe shallow. However I find that SolidJS is a simple and pragmatic framework, that has a bundle size of 6.4kB (Minified + Gzipped), uses similar syntax like React,has a great documentation and from what it seems a great community around the project itself with 170 contributors and 33k stars on SolidJS Github. Also want to mention their Discord with a great Support-channel were you can get help on some issue or give a hand to someone else or just searh and find some previous solution.
At the moment I cannot see any real problem with SolidJS. What is interesting is that it still has a fairly small usage even though it has been around since 2020 and has been ranked number 1 (in retention) the last four years. But then maybe not surprising since the big dragon React has above 80% of the usage and has kept that percentage since 2019. In other words, it's tough to break into that ecosystem that React have since most people (both developers and customers) are very familiar with that framework and what it can deliver.
$ npm install # or pnpm install or yarn install or bun installLearn more on the Solid Website and come chat with us on our Discord
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:5173 to view it in the browser.
Builds the app for production to the dist folder.
It correctly bundles Solid in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
Learn more about deploying your application with the documentations using Vite.