What is the new NPM site built with? A look under the hood
NPM is the backbone (eh, eh) of the JavaScript ecosystem. The packet manager originally meant for distributing Node.js modules has grown to be a universal tool for distributing JavaScript code for the server and client, TypeScript type definitions, CSS frameworks and a whole lot of JS tooling.
In short, npmjs.com is a big deal. This is why it is interesting to see how the service itself is built. The NPM site was kind of long in the tooth as it had been around for quite a few years. With the pace that the JavaScript ecosystem it seemed downright neanderthal.
Parts of the site had been revamped, with the Next.js Universal React Framework powering the package search. However the team chose not to go with Next.js, Nuxt.js or any off-the-shelf Universal JavaScript Frameworks. Instead they assembled the whole site out of industry standard components.
The stack news comes from NPM developer Chris Dickinson, who lists the following technologies as their choice of weapons for the March 2018 renewal of npmjs.com. Here's their amazing tech stack to power the mightiest JavaScript site of all:
- Webpack with Babel and Natch: Webpack and Babel continue to be the standard tools for JavaScript module bundling and code transpilation, but Natch is a more unusual tool. The library offers natural pattern matching aking to Clojure multimethods.
- React: React.js is the worlds favourite (as of 2018) declarative UI library. It's Virtual DOM implementation continues to be popular from startups to corporate giants.
- Redux: The functional state management that library blew our minds in 2015. It has since received some criticism, but remains a solid choice for complex apps.
- Tachyons and CSS-Modules: A UI framework fro creating fast loading, readable responsive interfaces with minimum amount of CSS, used together with standard CSS modules.
- Spife: A jshttp based microframework that handles routine tasks like routing, database access, sessions, ORM, monitoring and logging.
- Joi: For defining and maintaining validity of data scriptures, offers and abject schema description language and validator for JavaScript objects.
- NPM CI: Continuous integration platform the NPM crew is dogfooding
- Jest: A comprehensive testing solution for JavaScript. Easy to set up and plays nice with React.
- Sentry: An error tracking tool that helps developers monitor and fix crashes in real time.
Source: Twitter
Tweet