Storybook, ESLint, Babel and Webpack
Omio
Berlin
Developer tooling
OSS & Mentor
Blogs, YT Videos and Tutorials
International Speaker
Inconsistent Indie hacker
Travel
Music and Party
Hiking, Cycling & Nature
Past: Paint & Write
What is Developer Tooling?
Developer tooling refers to the various software tools and applications that developers use to aid in the software development process. This can include text editors, integrated development environments (IDEs), version control systems, debugging tools, and more. These tools help developers to write, test, and deploy code more efficiently and effectively.
What is Storybook?
How does storybook beneficial?
Testing & Storybook
Visual testing
UI testing
Accessibility testing
UX testing
Other features
Customize Webpack & Babel configs
Customize Branding
Custom Integration
Setting up Storybook & Stories
Story
Different Variants
Parameters and Decorators
Storybook Architecture
Storybook and Addons
Addon Architecture
- Initialize a project: npx create-react-app project-name
- Initialize storybook: npx storybook init
- Steps to create an Addon:
Collection of Rules
Parser - Espree
Formatter
https://astexplorer.net/
npm init @eslint/config - Initializing eslint in project
npm i -g generator-eslint - Installing global dependency
npx yo eslint:plugin - Scaffold ESLint plugin boilerplate
// index.html
<html>
<head></head>
<body>
<script type="text/javascript">
console.log("Inline Javascript")
</script>
<script type="text/javascript" src="pathToJSFile.js" />
<body />
</html>
// pathToJSFile.js
console.log("test");
Not Scalable
Many Scripts -> Performance bottleneck
One large Script -> Not Maintainable
Scope Issues
IIFE - Immediately Invoked Function Expression
Avoids Scope collisions
Tools: Gulp, Grunt
(function add(a, b) {
return a + b
}) (3,5);
Dead/ Unused Code
Rebuilds
No Lazy Loading
Evolution of NodeJS creates Common JS modules
Node + modules(common js) + NPM = Awesome
// Named import/export
// add.js
exports.add = () => { /* do add */ }
//index.js
const {add} = require('./add.js');
// Default import/export
// add.js
module.exports = () => { /* do add */ }
//index.js
const anyName = require('./add.js');
No Browser Support
Loaders load and transpile at runtime
Bundlers transpile and bundle before hitting the browser
Code in Common JS => Bundle it together
Supports Browser directly
RequireJS
Debugging such code is a big issue
Code can be AMD as well, which is a problem
No Lazy load / Async bundling
Reusable & Scalable
Better Syntax than CommonJS
// Named import/export
// add.js
export const add = () => { /* do add */ };
//index.js
import {add} from './add.js'
// Default import/export
// add.js
export default () => { /* do add */ };
//index.js
import anyName from './add.js'
Node has no support (In older versions)
Slow in Browsers (when not transpiled)
Write in any Format -> Convert for Browser
Async Bundling and Lazy loading
Bigger EcoSystem
Bundle more than JS & JSON
Get equipped with Plugins and Loaders
{
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/dist");
filename: 'bundle.js'
}
}
Its a function that gets source code of the file as arguement
Transforms Source code to JS
Chaining of loaders executes in reverse order
module: {
rules: [
{
test: \.css$/,
use: [style-loader, css-loader]
}
]
}
Its a class/object with `apply` method
Access entire Compiler lifecycle
plugins: [
new PluginName( { ...optionsIfAny } )
]
A simple app and simple loader
Webpack itself is built by many plugins
Tapable is basic utility for such plugins to access hooks of various events
Traverse
Manipulation
Visitor Pattern
babel-parser
babel-traverse
babel-types
babel-generator
babel-template
Benefits & What's Next?
Please share your feedback
Time for Casual Hangouts. People can choose to stay or leave 😊