General

Storybook: Can Your Next Project Benefit from It?

Oct 28, 2022

6 min read

I will show you what Storybook is all about and hopefully help you decide if you need it in your next project. Don't worry if you have limited experience as an engineer because you don't need to have an advanced technical background to make use of Storybook.

What is Storybook?

Storybook is a tool for developing UIs that allows you to work on one component at a time.

What is a component?

A component is smallest part of a UI. In chemistry, we refer to it as an atom(Smallest unit of a matter). Most frameworks are now components based.

Why Storybook?

Storybook allows you to actually develop the entire UIs without starting the major application.

But in order to cleary state why one would choose to use it, lets look at some benefits and challenges of Storybook.

Benefits

Being able to build components in isolation,and not having to think about integrations or other systems running in your stack is a blessing
A clearer vision of your components styling and layout
Navigating between UI component as you get to see all component as a sidebar item
Communicating with other devs. It really allows you to show how your new component is supposed to be used and which features it boasts.
You can manipulate props value
Its is not framework agnostic i.e you can use for Vue, React, Angular, etc.
Great for documenting

Challenges

If you’re integrating it into an existing project, there is some migration work to be done.
You rely on addons and decorators for handling data.
It can take up a lot of time to maintain and properly set up.
It takes team commitment to keep it updated and ensure everything still works.

What are add-ons actually?

Add-ons are plugins that can be added to make certain feature work. For example, by default scss doesn't work on Storybook, so you will have to install an add-on to make it work as expected.

When to use Storybook

In this section, we will the making use of This Dot Labs' Open source project starter.dev as a case study.

starter.dev is built using a variety of technologies to demonstrate architectural patterns and best practices using these tools. This project uses these technologies like Vue, React, Nextjs, Angular, etc to show various ways Github can be implemented!.

Lets Pick a component from starter.dev GitHub Showcases to demonstrate the features Storybook has.

Every conponent has a control tab that allows us to manipulte the props if there be any.

For example:

Here, looking at the image with the props, you will notice some properties:

cardType: This is a dropdown/select option with two opions issue and pullrequest.
state: this defines the state of the card
author: the person who created it or a name, or whatever, you get the point.

Lets change some of the props and see the result

cardType will be pullrequest
state will be closed

Here, we can see there has been a change. This is so helpful, and tells the team members what the component can and can't do.

Other features

Looking at other interesting features like

Settings

Here, we can toggle for feature like side nav, the controls (which, in the dropdown option, is call addons) Seetings options

Responsiveness

There are few options that help us test for responsivess. Below, you will find an image showing those options:

Here we can select any option to see the responsiveness of that component.

Large screen Issue Pullrequest Card on large screen

Mobile screen Issue Pullrequest Card on mobile screen

Hover state of the card

Inspection

Here, we can see certain properties like padding, and current width and height Inspected card

Looking to get started

To get started, all you need is to visit this sites based on your prefered technology

Conclusion

It's up to you to decide if Storybook helps you achieve your goals faster, or if you think it's useful for your project setup. It's important to look at what it could offer and what it can't. You can decide to use it for just plain documentation or for components, or both.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Jerry Hogan

Passionate developer, super fan of Vue, a singer, writer and musician.

@iamjerry_hogan @hdjerry

Storybook 6.5 - Key Features to Note

Storybook is an open-source tool for building UI components and pages in isolation. It allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application. Storybook 6.5 was recently released and it comes with exciting features highlighted in this article. Support for the Latest Popular Javascript Libraries and Frameworks Support for Angular and React Out of the Box Storybook 6.5 supports React 18 and Angular 14 out of the box. When you run your React project for the first time, it will auto-detect the React version and use the new root API if it detects it on React 18. Check out #17215. Figma Plugin With Storybook 6.5, you can easily compare design specs and different implementations with the help of the Figma plugin’s Storybook Connect which embeds stories into the Figma workspace. This plugin allows developers to interact with the Figma design using a link created by the Figma plugin between the stories and designs. Check out more here. Interaction Testing Storybook Interaction Testing allows developers to write tests for your application in the story file itself. The tests execute in the browser, and you can get a GUI to visualize and debug them. Under the hood, it is powered by Jest, Playwright, and a testing library, giving you the familiarity of testing the application. Check out Integrated Test. Webpack 5 Lazy Compilation Lazy Compilation is a feature that only calls the content of a page when it is needed, and delays every other content until a route to the content is called. Storybook 6.5 only compiles the core runtime, and builds stories as you visit them. This enables the developer to quickly spin-up stories, and rebuild larger Storybooks. Learn more about Storybook Lazy Compilation Other features Storybook support for Vite Builder has been improved with instant rebuild of stories, and have officially been brought into Storybook's core. There were also improvements to accessibility features for Storybook and UI design features for stories. Wrap Up Storybook 6.5 offers a number of features and out of the box support for both React and Angular, making this release among the most exciting for this open source UI tool: Figma’s Storybook Connect embeds stories into the Figma workspace. Write tests for your application in the story file itself with Storybook Interaction Testing. Webpack 5 Lazy Compilation calls the content of a page when it is needed, and delays every other content until a route to the content is called. If you get a chance to try out Storybook yourself, please let us know by tweeting us at @ThisDotMedia!...

Jul 5, 2022

3 mins

StorybookJavaScript

How to Set Up Storybook in VueJS

How to setup Storybook in VueJS In this post, we will take a look at how to setup storybook in our VueJS application. What is Storybook? Storybook is a tool for developing UI components / libraries faster and in isolation. Storybook is an excellent addition to a project development cycle as it allows you to work on one component at a time and develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application. It can also be used to write a documentation (story) of what each component does: for the parameters it accepts, the event it emits and response to expect. A story describes a component in a specified state. You'd want to write a story for each state a component can have, such as active, inactive, loading. Storybook will then let you preview the component in its specified state in an interactive component library. Setup our Project Let’s start by creating our VueJS project. We would be using yarn for package management. Using Vue CLI >Install Vue CLI if you don't already have it installed. ` >Create vue app ` >Enter 'your-app' folder ` Add storybook ` >Add Storybook to package.json ` -p command refers to the port number where the Storybook will be run. -c command refers to the config directory. -s command refers to directory to load static / public files >run the following command, we should now see storybook running on port :9001 ` Let's Configure Storybook in our VueJS project As a best practice, Storybook configuration should be stored in a directory called .storybook. Create .storybook directory as the config directory in the project root ` Next lets create our config file Create main.js inside our .storybook folder ` The main configuration file main.js controls the behaviour of the Storybook server. - stories - an array of globs that describes the location of your story files, relative to main.js. This makes the maintenance of the main.js file much easier by keeping it highly focused on the configuration of Storybook rather than its implementation. You can require as many stories as you need. - addons - a list of all the addons you are using (we will be describing what addons are as we go). - babel - custom babel configuration. Note: you must always restart the Storybook’s process when you modify the main.js so as to update it. Our folder structure should look like this: Let's write a story for a button component First, let's write our custom button component - ../src/component/button.vue ` Let's write stories inside ./src/stories/button.stories.js ` Addons are plugins in Storybook used to perform advanced functionalities on components. Examples are actions, knobs etc. - The actions addon is used to display data received by an event handler (callback) arguments in your stories. - The knobs addon allows you to dynamically interact with a component’s args (inputs). Experiment with alternate configurations of the component to discover edge cases. Update our main.js file. Now let's add the path from main.js to our stories folder: ` >Let's stop our storybook server and run it again ` Now if we click on the button we would notice that there's a log of the event under actions in our storybook. If we click on the knobs tab, we would be able to edit the values that our component accepts and see how they change in realtime. Conclusion Yes! We've been able to setup Storybook in VueJS and have also built a simple button component to test out knobs and actions. For more complex examples like using Vuex store in stories, check out Using Storybook with VueJS. If you have any questions or run into any trouble, feel free to reach out on Twitter or Github....

Sep 18, 2020

4 mins

VueStorybook

Detect Hand Sign Languages with Tensorflow

Interested in learning how to use Tensorflow to detect hand sign languages in your apps? By the end of this read, you will know how to implement Tensorflow in your application with very simple steps. In our example today, we will be using Vue. What is Tensorflow? Tensorflow is an end-to-end platform _(meaning: delivering complex systems or services in functional form after developing it from beginning to end.)_ used for building Machine Learning applications, and it is also open-source. TensorFlow enables you to build dataflow graphs and structures to define how data moves through a graph by taking inputs as a multi-dimensional array called Tensor. You can read more on Tensorflow here. What is a Model? A model is a function with learnable parameters that maps an input to an output. A well-trained model will provide an accurate mapping from the input to the desired output. Tensorflow Models Tensorflow models are pre-trained models, and there are four defined categories of them: - Vision: Analyze features in images and videos. - Body: Detect key points and poses on the face, hands, and body with models from MediPipe - Text: Enable NLP in your web app using the power of BERT and other Transformer encoder architectures. - Audio: Classify audio to detect sounds. If you want to go into more detail, check out Tensorflow Models. All these models are broken down into subs and for our case, we will be making use of the Body Model which has the hand pose detection we need in order to detect the hand signs. Hand Pose Detection This model used a 2D and 3D multi-dimensional array which enables it to predict the keypoints of the hands. Example of a 2D is [[1,2],[3,5],[7,8],[20,44]] and that of a 3D is [[1,2,5],[3,5,8],[7,8,6],[20,44,100]]. This hand pose detection is a model from the MediPipe as we established above, and it provides us with two model types which are lite and full. The accuracy of the prediction increases from lite to full while the inference speed reduces, i.e. the response time will be slower as the accuracy increases. What do we need? There are a few dependencies we need to get things working, and I also will be assuming that you have your project set up as well. You will need to add these dependencies to the project ` Above, in the commands, you will notice we added a fingerpose. Let's talk a little about what we need the figerpose for. Fingerpose Fingerpose is a gesture classifier for hand landmarks detected by Mediapipe hand pose detection. It also allows you to add your own hand gesture, which means that a gesture that signifies the letter Z can signify Hello based on your fingerpose data. We will see an example of how the data looks in a bit. You can check out fingerpose for more details. Get started We are going to use Vue for this illustration. We will start by looking at the HTML first, and then we will cover the JavaScript. Our Template will be a basic HTML that will have a video tag so we can show a video after getting access to our webcam. Template ` The snippet above shows a div and a video tab. The video is used when we gain access to the webcam. We will now be writing the JS required to initialize the webcam. Script ` We imported two methods from vue: onMounted and ref. The onMounted runs when the page is fully mounted while the ref is used to declare a reactive value to reference the video element. If you look at the video tag in the template, you will notice a ref property. You can check out Template ref and onMounted lifecycle hook. In the openCam function, we first try to test if mediaDevices is available on your browser navigation. >The MediaDevices interface provides access to connected media input devices like cameras and microphones, as well as screen sharing. In essence, it lets you obtain access to any hardware source of media data. This MediaDevice has a method getUserMedia which prompts the user for permission to use a media input. You can find all you need to know about getUserMedia here. From the snippet, we can see that getUserMedia returns a promise, and with that, we can get the media stream as a response using then(). We check if the video element has srcObject or not. If it does we assign the media stream to the srcObject and if not, we convert the media stream to a URL and assign it to the src of the video element. With this Snippet and with a few style, you should have your video showing your awesome face! Introducing Tensorflow and Hand Detection Now that we got our webcam working, we will update the Template and the script in order to detect, predict, and display the alphabet based on the hand sign prediction. The updated HTML should now look like this: ` The div with class name alphabet will display the alphabet based on the hand sign prediction. We will be introducing two(2) new functions, createDetectionInstance and handleSignDetection. Firstly, lets begin with the createDetectionInstance which is an integral part of the hand sign detection and then we will introduce handleSignDetection which predicts and displays the hand sign. ` To be able to detect hand poses, we need to create an instance of the handpose detector, and here, we created a function createDetectionInstance which is an asynchronous function. You can check out this Tensorflow blog to see more details. Now that we have created an avenue to detect hand signs, let us start detecting the hand. In that light, we will be adding a handleSignDetection function. ` The handleSignDetection runs after creating the detection instance. We have a setInterval that runs every 2 seconds (PS: _the 2 seconds timing is arbitrary and can be less or more_) to check if there is any hand sign. We also have a conditional statement to ensure the video element exists, and the detection instance was created accordingly. So, the detector calls a method estimateHands, which tries to predict the hand pose by getting keypoints with values that are either in 2D or 3D (Multi-dimensional Array). If you check your console log, you will see an array of data if any hand pose is detected. Now that we can detect hand poses, we will now add fingerpose that will help predict and display the alphabet based on the hand sign. ` Assuming that our detector sensed a hand, it is time to match this value based on the hand signs we created with the fingerpose. The landmark variable is a 3D array pulled from the hand result's keypoint3D key value. There is also a keypoint as well, which is a 2D value, and both will give the same result. Now, using GE.estimate, we can generate a possible gesture that matches the sign, and a score/confidence is assigned to each gesture pending the amount of gesture predicted. So, the gesture with the highest score/confidence is selected since it is estimated to be the closest to the hand sign from the figerpose hand signs we created. We also imported Handsigns and its content looks like this: You can also get the handsigns folder from the 100-ms-vue repository. Looking at the screenshot, there is a GestureDescription instance that takes a string A which will represent what the hand sign will stand for. So, it could be anything you want the handsign to stand for. >onMounted is asynchronous because we need to ensure that our detection instance is created, which is required to detect the hand sign. With the updated code, you should be able to display some letters. Conclusion Don't forget, you can see in detail how this was implemented in one of This Dot Labs' open source projects 100-ms-vue. Please note that what we did is just a basic implementation, and to have a production-ready version, it will need a bigger model, and a more complex detection to be able to identify hand sign language....

Jul 12, 2023

7 mins

Artificial IntelligenceTensorflowMachine Learning

Improving INP in React and Next.js

Improving INP in React and Next.js In one of my previous articles, I've explained what INP is, how it works, and how it may affect your website. I also promised you to follow up with more concrete advice on how to improve your INP in your favorite framework. This is the follow-up article, where I'll focus on how to improve your INP score in React and Next.js. How to prepare for INP in React and Next.js? The first thing to do is to ensure you're using the latest version of React. The React team has been working on making React more INP-friendly and has already made some improvements in the latest versions. To enhance your INP score, consider fully taking advantage of new features introduced in React 18, such as Concurrent Rendering, Automatic Batching, and Selective Hydration. However, there are also some general areas to focus on, such as SSR and SSG in Next.js, Web Workers, or optimizing your hooks and state management. Concurrent Rendering The Concurrent Mode in React uses an algorithm that breaks rendering down into so-called "fiber nodes" and schedules the renders based on their expiration and priority. This effectively allows the user to interact with the page while the rendering is still in progress. In previous React versions, all updates, such as setState calls were treated as "urgent" and once the re-render had started, there was no way to interrupt it. Concurrent Mode changes this by being able to prioritize the updates and interrupt a non-blocking state update started with startTransition. For a simple explanation of concurrency in React, you can check out Dan Abramov's explanation. As part of the Concurrent Mode, React introduced several lifecycle methods that allow you to prioritize the rendering of certain parts of your UI, such as: - useTransition hook that allows you to update the state without blocking the UI, - useDeferredValue hook that allows you to defer the rendering of certain parts of your UI, - startTransition API that, similarly to the useTransition hook lets you mark a state update as non-blocking. It lacks, however, an indication of whether it's still pending. Automatic Batching Introduced in React 18, Automatic Batching reduces the number of re-renders that happen on state changes even when they happen outside of event handlers, e.g. in a setTimeout or Promise callback. This feature comes out of the box and you don't have to do anything to enable it, and it makes a great argument for upgrading to React 18. Selective Hydration Selective Hydration allows you to take hydration off the main thread by wrapping your components in a Suspense boundary. This way, components can become interactive faster as the browser can do other work on the main thread while the hydration is happening. To fully take advantage of selective hydration, consider the following: - Prioritizing Above-the-Fold Content: Use Suspense boundaries strategically around any parts of your application that may take the server longer to deliver to ensure they don’t block critical content from becoming interactive as soon as possible. - Hydration on Interaction: Implementing hydration upon user interaction for non-critical components can drastically reduce the main thread's workload, enhancing INP. Vercel even has a small case study showing how using selective hydration improved the performance of a Next.js site. Server-Side Rendering (SSR) and Static Site Generation (SSG) in Next.js Not everything has to run client-side. Next.js excels in SSR and SSG capabilities, which can significantly impact INP by delivering content to users faster. Optimizing SSR with techniques like incremental static regeneration (ISR) or leveraging SSG for static pages ensures that users can interact with content faster, improving the perceived performance. Workers Offloading heavy computations to Web Workers can free up the main thread, enhancing the responsiveness of React and Next.js applications. This strategy is especially useful when dealing with third-party scripts. Offloading such scripts in Next.js can be easily done by specifying the "worker" strategy on your Script component. Be aware that this feature is not yet stable and does not work with the app directory, though. If you want to take things one step further, you could use Partytown, which helps you offload any resource-intensive scripts to Web Workers. It comes with a React component that you can use to wrap your third-party scripts and offload them to a Web Worker, and it's compatible with Next.js as well. Hooks and State Management State management in React applications can easily get out of hand, leading to unnecessary re-renders and effectively an increased INP. Sometimes, using a state management library like Redux or MobX can help you consolidate your state and reduce the number of re-renders. However, they are not silver bullets and can also introduce performance issues if not used properly. If you are dealing with a lot of re-renders due to prop changes, make sure you are leveraging memoization. As of now, you may need to work with useMemo and useCallback hooks to memoize your values and functions, respectively. The upcoming React 19’s Forget Compiler, however, will apparently memoize everything under the hood, making these hooks obsolete. Using memoization properly can help you reduce the number of re-renders and improve your INP. To investigate your hook dependencies and re-renders, you can leverage React Developer Tools or use this handy helper hook I found on the internet to trace your re-renders: ` Conclusion Improving INP in React and Next.js is not easy and can require much investigation and fine-tuning. Still, it's worth doing to avoid being penalized by Google in its search results and provide a better experience for your users. Adopting React 18's new features, leveraging SSR and SSG in Next.js, utilizing Web Workers, and optimizing hooks and state management can significantly boost your INP score and deliver a faster application to your users. Remember, INP is just one among many performance metrics emphasizing the need for a comprehensive approach to performance optimization...

Apr 19, 2024

5 mins

Web PerformanceReactNextJSJavaScript

Storybook: Can Your Next Project Benefit from It?

What is Storybook?

What is a component?

Why Storybook?

Benefits

Challenges

What are add-ons actually?

When to use Storybook

Other features

Looking to get started

Conclusion

Jerry Hogan

You might also like

Storybook 6.5 - Key Features to Note

How to Set Up Storybook in VueJS

Detect Hand Sign Languages with Tensorflow

Improving INP in React and Next.js

You might also like

Storybook 6.5 - Key Features to Note

How to Set Up Storybook in VueJS

Detect Hand Sign Languages with Tensorflow

Improving INP in React and Next.js