NPM As A UI Component Registry

[azer]

NPM started allowing front-end assets and it's possible to push "modules" that only has front-end assets like stylesheets, fonts, images, icons, etc... It allows us to compose our UI components from NPM, in addition to bring us new challenges to build software from small pieces...

I've been experimenting it for a while on both backend and front-end, using tools & libraries such as Browserify, Hyperglue and NPM-DOM and virtual-dom.

During my experiments, I built an app for Radio Paradise using only UI components from NPM, you can check it out at; http://listenparadise.org

It uses a font component named playfair-display, and a CSS component named centered-cover-background which makes it easy to create a minimalistic UI with a background image and have a centered content on it.

The source code repository of the Radio Paradise app is at: http://github.com/azer/listenparadise.org

I'd like to speak about how I started to work on this idea, and the story of the rest experiment of building both NodeJS and client-side apps from UI components that are hosted in NPM.

[terinjokes]

Browserified event?

[mikeal]

@azer is this generic enough to be in NodeConf ONE-SHOT or should it be considered for Browserified?

[azer]

@terinjokes @mikeal hmm, not sure... mostly about experimenting composing apps from small components that are hosted in NPM (HTML, CSS, JS, fonts, icons, images, etc)

some other examples are;

• pt-serif font https://github.com/bricks/pt-serif
• infinite-scroll component (a.k.a brick) https://github.com/bricks/infinite-scroll

and a new app I made using these is http://circle.photos

it's source code is at https://github.com/azer/circle.photos