While I was building a reactjs package and just after finishing it. I wanted to test it in browser - not just unit test! I was lazy to install webpack dev server or other tools to compile my code and run dev server with hot-reload, so I went to try running it directly in the browser! and yaay it worked! and here is few things I learned:

• UMD - Universal Module Definition
• AMD - Asynchronous Module Definition
• CJS - CommonJS Modules
• You can run es6 code in the browser with script type text/babel and include babel Stand alone in the browser to transpile your es6 code - so cool!
• You can see how babel transpile your code just in the browser here: https://babeljs.io/en/repl
• You can include almost all the JS libraries directly in your browser with umd bundles.
• Rollup and Typescript build is just so easy as 1-2-3! and there is 2 great literary starters
  • https://github.com/Hotell/typescript-lib-starter
  • https://github.com/alexjoverm/typescript-library-starter

• Being more inclined to be lazy is a good thing, as long as you use this to read and re-discover another ways to solve your problems.

• Keeping up to date with tech is hard as tech moving at super speed and everyday there is always a new thing! so try as much as you can Un-learn and Re-learn things you were used to do before as there might be other solutions developed.

Screenshot and code are below:

HTML preview: https://codesandbox.io/s/currying-fire-rm55g

Github repo link: https://github.com/meabed/reactjs-slot-layout

A few helpful links:

• https://www.davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/
• https://www.freecodecamp.org/news/anatomy-of-js-module-systems-and-building-libraries-fadcd8dbd0e/
• http://unscriptable.com/2011/09/30/amd-versus-cjs-whats-the-best-format/

If you have comments or thoughts, I would love to hear it, discuss it and share it, please feel free to leave it in the comment or reach out @meabed

Happy coding 🤞