In the field of front-end development, there are certain challenges that can be resolved quickly. ChatGPT can play a vital role in speeding up this process. On one hand, junior front-end developers can easily solve problems without having to ask their mentors. On the other hand, senior frontend developers can focus on their job without any disruptions.
There are real-life examples where ChatGPT can be used in daily front-end tasks. One of our React developers, Jakub Szewczyk, told us about his daily work with ChatGPT and how it helps him be a better programmer.
ChatGPT Can Generate Interfaces Using Data Returned From API Request
Integrating data from external sources is a part of almost all (if not all) web apps. To ensure maximum type safety, you must generate interfaces/types from the incoming json. If the data is simple – no problem. Unfortunately (for developers) it’s not usually the case.
We can use the data from “Dummy JSON” as an example of the functionality from https://dummyjson.com/
Let’s use ChatGPT to generate interfaces for type-safe front-ends.
Prompt: Generate a TypeScript interface for following data:
"title": "iPhone 9",
"description": "An apple mobile which is nothing like apple",
We arrived at the correct conclusion ~20 minutes faster than if we typed everything manually. Thanks to the AI we have accurately typed data just seconds after submitting our prompt. Even though we could have been more strict with types, they are alright, and will do fine.
ChatGPT Can Help Us with Testing React Functions and Hooks
The output isn’t the best. Let’s do some fine-tuning.
Test this method against null, undefined, empty string and numbers.
Seems pretty good. We can copy and paste those tests to IDE and run them using Jest.
If AI does not have the correct context, we will not receive a perfect answer. Unlike humans, AI often won’t correctly come up with the information it does not have. ChatGPT can save us considerable time on writing tests, and can be more thorough than we would have been.
ChatGPT Can Speed Up the Process of Preparing Documentation for Code.
Raise your hand if your team/you ever had to work on a project with little or no documentation. Why is that? Some developers don’t like spending time documenting the code for others, because it’s time consuming, and there are seemingly no returns on the time investment. Could AI write documentation for us? Sure.
Our buddy, ChatGPT can make front-end development problem-free for us.
Almost as if we wrote the documentation ourselves.
ChatGPT Can Help Us with Styling.
Tailwind is a CSS framework that allows developers to style components using HTML classes. It’s (almost) universally well-liked for the simplicity it brings, and for the customization capabilities. As a bonus, centering a div was never easier, and using ChatGPT to e.g., generate color palettes, feels like cheating.
Create Tailwind CSS styles for 3 centred boxes using flexbox keeping mind the RWD principles
There is no need to read docs when your assistant can do it faster.
We also get an explanation for why we got what we got:
ChatGPT Can Enhance Code Readability and Help Us Keep it KISS (Keep it Simple, Silly).
Developers sometimes write a portion of code that works, but after a few months, when they revisit those lines for updates, they encounter a repetitive cycle. Eventually, there ends up being a lot of unused code or code written in different coding styles (senior, mid, or junior developers may have worked on it). We aim to have this code segment written with the principle of KISS and make it more readable. That's when we can turn to GPT and give it a try to simplify the code and make it easier to understand.
This is a search box React component. Make it easier to read and remove unnecessary elements, add i18n for hardcoded texts and use Tailwind for styles:
Memoization: Rather than recomputing the filtered data on every render, you can use the useMemo hook from React. This hook ensures that your expensive computation is only run when necessary - specifically, when data or filter changes.
Key Property in the map: Make sure your key is unique. If item is not unique, you should use something else as the key, like an index or id – In my opinion we shouldn’t use index as key in children div, to avoid not needed re-renders of component, that’s why we should always double check if the ChatGPT answer is correct.
Before the age of AI, we had experts specializing in specific technical fields such as Frontend, Backend, Databases, and more. With the help of ChatGPT, we can transform them into ‘Generalists’ who have knowledge across many domains. All knowledge seems to be (or is) one query away.
Furthermore, we can spend less money & time on preparing PoC or MVP by using one person with ChatGPT, but also, we can increase the speed of development thanks to the use of e.g., GPT-based Copilot.
360° IT Check is a weekly publication where we bring you the latest and greatest in the world of tech. We cover topics like emerging technologies & frameworks, news about innovative startups, and other topics which affect the world of tech directly or indirectly.