Posted on Jul 28 If you're a Frontend developer, stop using swagger-ui and msw. Instead, you can build SDK (Software Development Kit) automatically.With the SDK, you don't need to be suffered from swagger documents reading and msw mocking anymore. You can only focus on your business logic, and build your frontend application much more quickly and safely.If you're a frontend developer, and have received swagger documents from backend, you may open it on swagger-ui. Reading a swagger documents from swagger-ui, you may implement interaction code with backend server using axios or fetch function. You also need to write DTO (Data Transfer Object) structures looking at JSON schema definitions. Some professional frontend developers even build a mocking backend server through msw for testing.During above processes, you may take a mistake that mis-reading API specs, or mis-writing DTO structures. Also, mocking the backend server with msw, you can misunderstand the real backend server's API specs. As long as front-end developers are human, not robots, these are all common mistakes we see all around us. By the way, such common mistakes sometimes cause serious problems in the real world. At least, such mistakes never be caught by compiler, but only by runtime. The more mistakes we make, the harder it is to catch and debug. Of course, even if there are no mistakes, redundant DTO or fetch function implementation and msw mocking code by hand is very laborious and cumbersome works.By the way, if such processes can be fully automated, how it would be?Setup @nestia/migrate and run above build command. Then @nestia/migrate will analyze the target swagger.json file, and write TypeScript codes instead of you. The automatically generated TypeScript codes will contain all of the following features, and I call it as SDK (Software Development Kit).Looking around the newly built SDK files, you can find that fetch functions are gathered into src/api/functional directory, and converted DTO types are stored into src/structures directory. When you open one of them, then you may understand how the SDK looks like.Right is client (frontend) code utilizing SDKFor reference, left is migrated NestJS server codeLet's see how the SDK looks like with demo project.You can repeat the same SDK generation process by typing below commands.Comparing automatically generated TypeScript DTO structure type with original swagger.json file's JSON schema definition, you can find that it was perfectly converted. It succeeded to revive every property names and types exactly even including format comment tags.Automatically generated fetch function is also perfect.Also, looking at the above fetch function again detaily, you may find that SDK function is embedding mockup simulator code. When connection.simulate property be configured, internal putById.simulate() function be called, and it checks the input parameters through typia.assert() function. After the validations, the putById.simulate() function returns a random value through typia.random() function.This is the mockup simulator what I mean. It simply composes the mockup data just by using typia.random() function, which has an ability that analyzing the target type T and generate perfectly typed matched random data.Of course, if you don't want random mockup data, but want to compose it by yourself, just do it.In actually, I had developed @nestia/migrate for migration from other languages (or other frameworks) to NestJS. As I'm a big fan of NestJS, hoping much more backend developers to use NestJS in their backend projects, I had built such conversion tool.Also, I had developed another convenient tool that generating SDK and mockup simulator for frontend developers. By the way, I suddendly realized that they can be combined together. Although, those SDK generator and migration tool had been developed for different purposes, if they are combined together, they can be a perfect tool for frontend developers, despite origin purpose was for backend development.So, I combined them together, and introduce it in here article. Frontend developers, stop using swagger-ui and msw. Instead, let's use @nestia/migrate command to build SDK. Then, your frontend development would be much more easier, faster, and safer.I think @nestia/migrate can be a new solution for effective frontend development. Do you agree with me?Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse spenceryonce - Jul 12 DevGeniusAI - Jul 24 Requestly - Jul 24 Big Tech Digest - Jul 10 Once suspended, samchon will not be able to comment or publish posts until their suspension is removed. Once unsuspended, samchon will be able to comment and publish posts again. Once unpublished, all posts by samchon will become hidden and only accessible to themselves. If samchon is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Jeongho Nam. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag samchon: samchon consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging samchon will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.