If you want to write a front-end library, or a web application without a framework, what modular style do you follow? And what tools do you choose and why?
Below is a quick list of the options. I am trying to learn more about them atm, so I am curious on your take! Let me know if there is something I missed that may be relevant!
- Asynchronous Module Definition (AMD): Takes a browser-first approach. Modules and dependencies can be asynchronously loaded. Modules can be different types (objects, functions, strings, and so on). RequireJS is the most popular client-side implementation.
- Universal Module Definition (UMD): Bid to provide "universal" pattern that supports both CommonJS and AMD styles.
- Module pattern: Some form of using closures to create a local scope for related variables and functions.
- Don't modularise code. Have one file with everything in it.
Module bundling is the process of combining a group of modules (and their dependencies) into a single file (or group of files) in the correct order. Bundlers may handle other assets such as CSS and images also.
A lot of different bundlers exist now, arguably, these are the most popular ones:
- Parcel: A web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration.
- Rollup: Rollup allows you to write your code as ES6 modules, and will then compile it back down to existing supported formats such as CommonJS modules, AMD modules, and IIFE-style scripts.
- Browserify: Allows developers to CommonJS-style modules that compile for use in the browser.
- FuseBox: Alternative to Webpack with first-class TypeScript support. Can replace Babel.
Popular transpilers are:
Task runners are used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting.