I am happy to introduce the new application I built: bestof.js.org.
bestof.js.org is a place where front-end engineers and node.js developers can find the best components to build amazing web applications.
A bit of history
1995 - 2015... JavaScript is 20 years old!
In the beginning, JavaScript was just a way to add some dynamic features to static pages generated by a web server. It was often considered as a "toy language".
Now browsers are no longer just document "renderers". Developers create single page applications that deliver rich user experience.
Browsers can do things like:
- communicate in real-time (WebSockets)
- play audio and video (without any plugin),
- render 3D (WebGL)
- run tasks in the background (Web workers)
- ...and so many other advance things!
But JavaScript is not only the browser language, JavaScript is the cornerstone of what is called the web platform.
JavaScript can be found everywhere:
- on the server-side with the rise of node.js
- on mobile applications with hybrid frameworks and solutions like React Native
- on devices of the Internet of Things (IoT)
The future is bright with ES6, the JavaScript next version, already available with tools such as Babel.
The open source community is very active, new interesting projects are released almost everyday on Github.
Recently, major companies have opened up their projects: Facebook with React for example, but also Twitter, Google, LinkedIn, Netflix...
Why bestof.js.org
There are so many open-source projects to follow that it is difficult to stay up-to-date about the latest tendencies.
I used to take notes about the interesting projects I found but I was tired of searching through my notes and my bookmarks.
I thought that a tool was needed to help us follow what is happening in this everyday changing world.
This is why bestof.js.org was born!
Concept
Checking the number of stars on Github is a good way to check project popularity but it does not tell you when the stars have been added.
bestof.js.org takes "snapshot" of Github stars every day, for more than 300 projects, to detect the trends over the last weeks.
A project can have been popular a while ago, collecting a big number of stars... but a new contender may have made it obsolete since that time.
Now with bestof.js.org you can see which projects are hot in more than 50 categories (including MV* frameworks, React components, node.js CMS, CSS tools...).
Features
The application homepage displays 2 types of ranking:
- The top 20 most popular projects (by total number of stars on Github)
- The top 20 hottest projects (by number of stars added yesterday)
The project focuses on speed providing 2 search features:
- Filter projects by "tag" (Check the "Framework" tag for example)
- Search by entering keywords in the search box
In both cases, results are displayed instantly.
Technical overview
I tried to create a decoupled architecture, as flexible as possible, taking advantages of micro-services concept and some free cloud services.
As a result, there are 5 repositories on Github:
- bestofjs-webui: the front end web application, a single-page application built with React components
- bestofjs-keystonejs: the web application used by admin users to manage data. Built with KeystoneJS, a node.js CMS.
- bestofjs-batches: Scheduled tasks that generate every day data used by the web application.
- bestofjs-microservices: microservice used to retrieve project information from Github, when a project is opened in the webui application
- bestofjs: repository used to deploy content to Github pages, linked to js.org domain. Generated from bestofjs-webui repository.
Cloud services I use:
- Mongolab: mongodb database that stores project data
- SemaphoreCI: Continuous Integration service with an amazing "Build scheduler" feature
- divshot: Static web hosting, used to deploy static JSON data consumed by the web application
- webtask.io: node.js microservice
What I learned
It is not easy to find the right architecture since the start.
First I thought about a more classic architecture, with a back-end listening for user requests and serving data. So the first version was a Single-Page-Application connected to a web application running on Heroku.
Later I realized that data displayed by the web application is almost "static", it only changes every morning when I take snapshots from Github. So all I needed was to build application data every morning using a Continuous Integration server.
The last piece of the puzzle was to build a "micro-service" that retrieves readme data from Github, when a user opens a project in the application. It has been done using webtask.io.
It takes time to build an application on one's spare time but it is a great experience to release an open-source project!
Show your support!
If you like the application, please star the project on Github.
We are all made of stars
!
Thank you for your support!