Angular Libraries:

from zero to

Open Source

William Grasel

@willgmbr

William Grasel

What is Open Source?

First of all...

Open Source

!==

Freeware

Open Source

NECESSARILY 

needs a License!

"So my projects on github without license are not Open Source??"

What does a license needs to say?

  • Who can use your code
  • How they can use your code
  • If it can be redistributed
  • If it can be used in closed sources
  • Who have responsibility or not for it

GPL: General Public License

  • Used for Linux and big companies that works with open source
  • Can be distributed and used for comercial proposes
  • But derivative source needs to use the same license
  • Derivative source must be open
  • The distributor must inform the user about the license
  • No garantes about the use

MIT License

  • The most simple and used license out there
  • The source can be used for anyone for any reason
  • No viral, the license must just be published with the source
  • No garantes about the use
  • Do whatever you want on your own risk

🍺 Beerware License 🍺

  • Looks like MIT
  • Encouraged to either buy the author a beer 
  • Or drink one themselves 
  • Avoid it to serious projects! 😂

https://choosealicense.com

A brief history about

JavaScript Modules

It could be simples, but it isn't:

  • In the beginning there was caos: Global Scope
  • AMD: Asynchronous Module Definition
  • CJS: CommonJS, pushed by NodeJS
  • UMD: Universal Module Definition
  • ESM: Oficial ECMAScript modules

Can it get worse?

Of course it can!

Bundlers like webpack and rollup support different module types

What about the ECMAScript version?

main browser module es2015
ES version ES5 ES5 ES5 ES2015
Module format CJS UMD ESM ESM
webpack ✔ ✔ ✔ –
Rollup (✔) (✔) ✔ –
jspm ✔ – – –

Some combinations...

But how do I publish all this things at the same time?


  {
    ...
    "main": "index.js",



    ...
  }

package.json conventions!


  {
    ...
    "main": "index.js",
    "browser": "bundles/index.umd.js",


    ...
  }

  {
    ...
    "main": "index.js",
    "browser": "bundles/index.umd.js",
    "module": "module/index.js",

    ...
  }

  {
    ...
    "main": "index.js",
    "browser": "bundles/index.umd.js",
    "module": "module/index.js",
    "es2015": "es2015/index.js",
    ...
  }

Let the AngularCLI build it for you!

Angular Package Format (APF) v8.0


  $ ng generate library my-lib

  $ ng generate library my-lib

  $ ng build my-lib

  $ ng generate library my-lib

  $ ng build my-lib

  $ npm publish dist/my-lib

Let's publish it!

Semantic Versioning

X.Y.Z

Path Version

Minor Version

Major Version

You can do it by hand...

But that's why so much people do it wrong!

What if we automatize the whole thing?

https://github.com/semantic-release


  $ npm install -g semantic-release-cli

  $ cd your-module

  $ semantic-release-cli setup

Here is the secret:

You don't even need to memorize it!

Just use a wizard:

Last hints for your project

Write automated tests!

Document your lib!

Run automated builds for Pull Requests

Run the semantic release tool automatically when a Pull Requests merges

References

Questions?

Thanks! =)

@willgmbr

Angular Libraries: from zero to Open Source

By William Grasel

Angular Libraries: from zero to Open Source

Have you ever had an interest in publishing an Angular library to NPM? But then you were in doubt on how to manage the versions, how the software licenses work, what kind of files needs to be published, how to generate the build correctly? Let's learn with the experience of big open source cases out there and automatize everything as possible! So you can publish your next projects quickly and without worries!

  • 2,362

More from William Grasel