Programming update: So I have learned Storybook (React) and Mockserver, level ? Beginner

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.

Button stories

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

Quick Mock backend setup

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”.