Chat Gpt - OpenAI Chatbot the Changes the Future of Development
For a lot time developers were discussing Artificial Intelligence, where things are going and if our developers jobs are needed in the future. And actually everybody though that I will happen in 10 or 20 years but it all change when Chat GPT was released last week.
This is completely mindblowing and from my opinion developers jobs in the nearest future will be either obsolete or completely changes.
So just to make it clear from the start if you want to try it yourself you can just go to chat.openai.com, register there and access the chat.
This is free research preview. Which means that they released it to collect data and requests from different people. And what we see here is completely mindblowing in comparison what we had previously.
In less that a week more than 1 million of people started to use this tool.
Stack Overflow V2
So let's look what it can do for us. First of all it can replace Stack Overflow. Because essentially we can type something here and get a direct response.
As you can see here we ask "How to center an element with flexbox". We don't only get a direct response with example but also a good written documentation.
Which means that it is super similar to Stack Overflow but there you get somehow structured answers.
Here you get the perfect documentation always in the same format and a perfect example. Obviously it doesn't work in all cases but from what I've tested it really worked out of the box in 90% of the cases.
For some libraries older API was suggested but with the amount of requests and data AI will quickly fix itself.
And actually this is the first point that I head a lot. People say that it is not perfect and it is not ready. The main thing is that with every next request that people do this tool works better and better and is constantly improved.
Let's write something different for example "What is useCallback?"
We get documentation about useCallback and the example how to use it.
Which means that you can ask anything on any topic and get a response.
Understanding your code
Another important way how you can use this chat is analysing code and answering your questions. For example let's say that you are digging in the new project or you learn a new language.
Here I copied a line from the project to understand what is key of in Typescript. As you can see we get lots of information. Chat GPT understands our code, what variables we have and how this code works.
So you can copy and code of any language, throw it in Chat GPT and understand what this code does.
Replacing devs
Now let's look on the most scary thing that I see inside this tool. And it is replacing developers. Previously I wrote a React component UsersTable to render a list of users from API with sorting and filtering.
Now I want to write in ChatGPT what component inside React I want to implement and see if it can generate the same feature.
create a react component UsersTable which fetch an array of users with id,name,age properties from http://localhost:3004/users and store the result in users state.
As you can see it generates a full normal component. Here is our state, fetch inside useEffect. And additionally to that we got the rendered table with th, thead, tbody and mapping of users.
It didn't implement just what we asked but it really implemented out of the box the component of table.
So it understood not only what we wrote but what we need to implement at all.
Now let's try to improve it a little bit.
create columns array with id,name,age strings. Move tbody markup too separate component.
Here it creates for us an array of our columns. Also it moved tbody content to the separate UserRows component. And it make it in the best possible way. By passing inside users and columns it avoided code duplication when rendering a list of users.
Let's try something else
move thead in a separate component with columns as prop
It creates TableHeader component and not only passed columns inside but used them to render our header cells in the loop.
Now let's try add sorting and it is really magical.
create sorting state with default values as an object with column equals id string and order equals asc.
As you can see it didn't only create the correct state but passed it in header and implemented arrows and whole logic for correct changing of sorting.
The last thing that we need is to update our API call.
add _sort parameter which equals sorting.column and _order parameter which equals sorting.order
It correctly added parameters to our useEffect and set sorting as a dependency.
The last thing that we need is filtering.
add searchValue as a state
move search form to additional component
As you can see ChatGPT successfully implemented not only search state and form, but also internal state and all events.
To write such feature on my own I spent 1 hour but by using ChatGPT it took less than 10 minutes. This is exactly why for me our future looks really scary. Maybe all our jobs won't be obsolete but I'm 100% sure that we can't stay like previously just coding until the end of our lives without changes. We need to adapt to this new future.
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
