Introduction
Added stack
I was advised to also learn Stencil. So yeah.
Why would I ever use these?
As mentioned in my very recent programming related posts, I have to learn new frameworks/libraries for a specific task requiring these skills. The stack is basically Stencil ,Storybook, Mockserver and GraphQl. Up until the last post, I had only “known” graphql, since this was casually used together with NodeJs/Express in my former job. After flipping through the documentations and attempting at creating a simple CRUD application using these technologies, I have come to the following conclusion:
Storybook
In most frontend-development projects there are three main areas to focus on: The UI ( how it looks) , The behavior/business logic ( how it reacts) and the data. A lot of developers, like me, would start by creating a react.js project using create-react-app and then start developing the components from View/page to single components based on the given UI design. This means that most of us first have to create the layout before we start implementing the single components and their various states. For example, a blog page usually consists of single components such as buttons, paragraphs, headlines, paginations, images, videos, galleries, links etc. Furthermore, each of these components could have multiple states or appearances and behaviors. For example, a button can be disabled, clicked and hovered. Thus, for developers, it is important to have these states already established before building the overall components ( View = e.g. blog page ). The only thing that confused me initially was the concept of “stories”. Stories are basically States. In the example addressed, disabled is a story/state, clicked is a story/state etc.

Summary
- Useful for establishing the single components and their multiple states.
- I understand that it was created with React.js in mind, not too sure If it can be integrated in other Js libraries/frameworks.
Stencil
Not to be dramatic but I actually fell in love with this compiler. Yes not a framework but a compiler. It basically helps converts classes with decorators into web components ( yes I plagiarized this sentence). These components can then be used in your React, Vue, Angular projects as long as the related js file is integrated into the target html file.
Summary
- Cool
- Really cool
- Can create my own collection of HTML components and reuse anywhere.
Mock Server
To be honest, I still do not understand why I would use this. Maybe I still need to read the documentation for the 11th time. Basically, it seems to be useful for quickly setting up a Mock/fake backend for frontend development. If you have ever worked in a CRUD project, you should have noticed that the frontend part usually starts off faster than the backend. Consequently the frontend developers usually have to wait for the backend to test against the “real” data which may take ages or maybe only until 1 week before the deadline.
Personally, I have been using express rest servers to serve my mock data to the frontend, so I still do not see the need. But yea, just my weak opinion.
Summary
GraphQl
As a REST fan, Grapql syntax is very fascinating to me. The need to create REST routes and individual routes depending on structure of response is thrown out the window, if you décide to use this. I just find it funny that I still have to use REST <GET> and <POST> to send my queries. Note that the queries are of type “string” and packed into the URL by extending with a parameter called “query”.
Summary
- One resource URL for all actions possible.

Sample Project : Products Manager
Specifications
A simple CRUD application, that fulfills the following requirements:
- Shows a list of products
- User can read the details of each product
- User can create new product
- A product can be deleted
- Details such as product title can be updated.
Tech stack
- Stencil ( Frontend )
- duetds Component libraries ( Frontend )
- GraphQl ( Backend )
- In memory storage / hard-code data ( Backed-database )

Source Code
Future Plans
Nada.
See ya!
Reference
Set up React Storybook
Stencil
duetds
GraphQl
Mock server
Storybook
Mockaroo