AI-Assisted Coding with Tabnine – DZone Web Dev

AI-assisted coding is intended to help you as a developer be more productive, write code faster, make fewer errors and have to make smaller context changes between other windows and your IDE. But is AI-assisted coding a silver ball, snake oil, or something in between?

In this article, we will look at the pros as well as the potential disadvantages of using AI-assisted coding. We also show a short demo of the use of the AI-assisted coding solution Tabnine to help us write some code in JavaScript and React.


What is AI-assisted coding and how does it work?

AI-assisted coding is powered by a machine learning model trained in second code. The best of these models are trained on billions of lines of code from respectable open source projects around the world. Through this training, the model “learns” which characters and code lines often come one after the other. So, as you type your code, it provides automatic flag completion suggestions for you, directly in your IDE.

As an extremely simple example, if you are writing import React in your IDE the autocomplete would provide something similar from ‘react’; to complete your statement.

But AI-assisted coding goes much further than that; it also learns from the code you write. The model constantly examines how you write your code and what patterns you typically follow. You can also train a more sophisticated model on your team’s code repository so that it better understands how your company writes code, helping you to be more consistent as a team.


What are the benefits?

So why would you choose to use an AI-powered coding assistant? Maybe you’d rather rely on your own brain and a less fancy auto-suggest feature.

To begin with, AI-assisted coding keeps you in your IDE, reducing context by switching to other windows. If auto-completion can give you the right syntax, you no longer need to do a quick Google search to remember how to use an API that you are a little rusty on. Smaller context shifts lead to higher productivity.

These machine learning models may also ask you to write better code, as the code they are trained in often follows best practices and familiar design patterns. These nudges can be a teaching opportunity to help make you a better developer.


What are the potential disadvantages?

Well, why should you does not do you want to use AI-assisted coding?

The biggest concern is privacy. If the machine learning model is not only trained in public code, but also in the code you write, it means that your code will potentially be shared with others who also use the same machine learning model. So before using an AI-assisted coding solution, you should always look at the product privacy statement to understand if or how the product collects or shares data.

The second concern is how well the model is trained. As mentioned before, most models are trained on billions of lines of code. But what if these code bags are not good? You know the old saying, “trash in, trash out.” If the model is trained on bad code, then the suggestions you receive will be just as bad.


Demo time

So how useful is AI-assisted coding in practice? To find out, I tried Tabnine, a popular solution that supports over 30 programming languages ​​and 21 IDEs. For example, the VS Code extension has nearly three million downloads.

Installing the extension is as simple as clicking the Install button, waiting a few minutes for the model to initialize, and then restarting the VS Code on your machine. Tabnine has a privacy statement prominently displayed on their website stating that the model only runs locally on your machine and that your data is not shared. The cool thing about this setup is that even if your data is not shared with others, the model will still be trained (locally) in your code, so the suggestions will get better as you use it.

Once I had installed Tabnine and ready to go, I started my coding. For this demo, I decided to write a very simple login form in JavaScript and React. The form contains input for username and password as well as a send button. This user interface is simple enough and is something almost every front-end engineer ends up building at some point.


Creating the structure of the login form

Below is a brief screenshot of me typing JSX into the login form:

Screenshot of writing JSX to the login form

You will notice that some of the suggestions were helpful and some were not. The import declaration worked flawlessly, and the proposal for the component name LoginForm to match the file name was useful.

When setting up the boilerplate code for the function component and the return statement, I did not receive very many useful suggestions.

I then made the two input elements and this is where the magic started to happen. After writing <label, the rest of that line was suggested to me. Knowing that I had a label element for the username and that I then created an input element, the AI ​​Assistant gave me most of the code for the text input. Afterwards, I added id attribute to myself.

The same thing happened with password entry, which makes sense because a username entry is usually followed by a password entry. But this time for input, the AI ​​assistant included one id property for me. It teaches!

Finally I added htmlFor attribute for associating the label with input for each set of elements. As usual, the auto-completion struggled for me at the first use of the username, but when I added it to the password, the suggestion was right there. Magic!


Make the form interactive

Now that I had the JSX in place, I had to type the rest of the JavaScript to add the event handlers to the form submission event and the two input change events. Let’s look at how it went:

Screenshot of making the login form interactive (part 1)

Screenshot of making the login form interactive (part 2)

Screenshot of making the login form interactive (part 3)

You will notice a similar pattern in this video. At first, the suggestions were not very useful. But as I wrote more code, the suggestions improved as the model captured what I was doing.

When you create handleSubmit function, I should supply the Event object e Myself. But after I had written e.pre, the model knew I would call e.preventDefault();. Then when I needed to add this event handler to the form’s onSubmit the method, the model knew exactly what I wanted to do.

When I created the two change management features, I had to create most of the username setup using useState hooked myself. But when I followed the same pattern again for the password, the AI ​​assistant was right by my side and ready with the code I needed.

This trend seems to be consistent: Do something once on your own, and the model observes and learns quietly. Do the same thing another time and the model is ready to help!


Conclusion

AI-assisted coding was an interesting experience. I have only spent a few hours playing with Tabnine so far and the value seems palpable. Once you get used to working with the auto suggestions, I can imagine your productivity skyrocketing. The experience of this Cisco engineering team can certainly confirm that.

The real power seems to lie in automating the tedious work of writing the same code patterns over and over again. Why not let an AI assistant help with that?

AI-assisted coding solutions are becoming more mainstream and I think they are here to stay. Privacy concerns are real, so be wise to choose a solution that has a level of telemetry you are comfortable with. Regardless of your position, I think any developer who is serious about their productivity should at least try AI-assisted coding solutions.

William

Leave a Reply

Your email address will not be published.