npm Blog (Archive)

The npm blog has been discontinued.

Updates from the npm team are now published on the GitHub Blog and the GitHub Changelog.

npm Convos: open-wc

Q. Hi! Can you state your name, what you do, and/or what your company does?

A: `open-wc` (Open Web Components) is an open collective of volunteer developers interested in web components and the web platform in general. Late last year we got together with the idea to publish some community-sourced recommendations and tools for building apps with web components. So far we have published generators, a testing framework, and lots of documentation.

How’s your day going?

@bennyp: Pretty good, thanks! Had some really nice hummus for lunch. You?

@dakmor: Busy but the open source drive and the community keeps me motivated :)

@lars: With the LitElement 2.0 release I don’t think my day could get any better :)

@passle: Excellent, thank you, very productive day!

Tell me the story of npm at your company. What specific problem did you have that npm solved?

We needed a way to make all our tools, configs, and recommendations available to the frontend community, and because basically everyone in that circle already has npm it was a perfect fit. Using npm also gives us access to a huge amount of community-produced material, which we can curate and absorb as needed, and tools like like Lerna, which helped us easily achieve full continuous integration.

To people who are unsure what they could use npm for — how would you explain the use case?

For us, we use npm for two things:

1. Acquiring community packages for use in our own internal processes as well as for redistribution within our packages

2. Publishing our tools, libraries, configs, and generators so that the community can benefit.

We love #1 but we’re especially grateful for #2.

How’s the day to day experience of using npm?

We mentioned above some of the great things that npm brings to the table; however, with npm we also face challenges specific to front end code. For example, there is currently no reliable way to make sure a certain package is unique within your dependency graph, which is a hard requirement for any module which relies on the global state — a common pattern in front-end. This is a common occurrence in our day-to-day workflow, and we’re excited to have solutions like the singleton RFC in our hands soon.

So for the moment, it still can be a lot of manual work or extra plugins for our build tools. Still, even with these troubles, using npm is worth it for us. Just the amount of useful tools (like `lerna`, `eslint`, `prettier`, …) we use ourself is worth it, even before talking about publishing our own packages.

On a very direct level, we also use the `npm` command *constantly* when working on our packages — it’s a great task runner for tests, CI/CD, linting, commit-validation, and all sorts of other day-to-day tasks. We highly recommend that more developers start using npm that way.

Would you recommend that another org or company use npm and why?

Especially for startups, where runway is really important, it’s super helpful to have access to all this great community code. We’re confident that in 2019, there will be a lot of growth in the number of packages on npm which support browser-centred workflows for front-end, and we’re really excited to be a part of that.

At `open-wc`, we are pragmatic enough to offer advice and recommendations built upon Node-only tooling, but we still look forward to the day when the browser itself is more widely adopted as the development runtime. We think that day is coming really soon and we’re excited to see the npm registry developing in that direction.

Any cool npm stuff your company has done publicly that you’d like to promote?

Check out our packages!

`generator-open-wc` — Web Component project generator `yo:open-wc`

`@open-wc/testing` — Test helpers for your web component project

`owc-dev-server` — A simple web server for simple web developers. It does the minimal amount of work required for web development on modern web browsers.

…. and there is more :)

All related documentation you can find on http://npmjs.com or https://open-wc.org/.