Vývoj umělé inteligence (AI) otevírá nové možnosti pro frontendové vývojáře. AI nástroje jako GitHub Copilot, Codeium, Bito a Continue nabízejí inovativní přístup k psaní kódu a optimalizaci pracovního postupu, co může zlepšit produktivitu, zkrátit vývoj a zvýšit kvalitu kódu.
Využití umělé inteligence ve frontendovém vývoji může být rozmanité. Od asistujících nástrojů pro psaní kódu, automatickém doplňování kódu až po automatizované testování a analýzu uživatelského chování, AI může efektivně podporovat každý aspekt vývoje webových aplikací. Nebudeme chodit příliš kolem, v tomto článku se podíváme na mnou vybrané 4 zajímavé nástroje, které vám pomohou s psaním kódu.
Do každého nástroje jsme zadali 3 stejné příkazy, v jazyce JavaScript a podíváme se na to, jak je jednotlivé nástroje vyhodnotily.
GitHub Copilot
GitHub Copilot je nástroj vyvinutý společností GitHub (překvapivě) ve spolupráci s OpenAI. Jedná se o rozšíření pro vývojová prostředí jako Visual Studio Code nebo JetBrains (a další…), které vývojářům poskytuje inteligentní doplňování kódu a návrhy funkcí.
GitHub Copilot je založen na obrovském množství veřejných repozitářů na platformě GitHub a využívá strojového učení k tomu, aby pochopil kontext úkolu a navrhl odpovídající kód. Uživatel stačí napsat komentář nebo popis toho, co potřebuje, a Copilot automaticky generuje odpovídající kód. Tento kód může zahrnovat funkce, třídy, metody nebo jiné části programu.
Výhody GitHub Copilot
- Rychlá generace kódu na základě komentářů a popisu úkolu. Rychlý autocomplete.
- Copilot se učí z obrovského množství veřejných repozitářů na GitHubu, což znamená, že má přístup k široké škále různých stylů psaní kódu a návrhových vzorů. To mu umožňuje generovat kód, který je vhodný pro různé typy projektů.
- Schopnost učit se z vašeho kódu a zlepšovat své doporučení v čase.
- Copilota jsem osobně zkoušel a musím říct, že s kvalitou kódu, kterou VS Code generoval v JavaScriptu jsem byl spokojen
Nevýhody GitHub Copilot
- Může mít omezenou schopnost porozumět specifickým potřebám projektu nebo kontextu, což může vést k generování neoptimálního kódu.
- Není zadarmo, je třeba počítat s 10$ za měsíc, existuje ale verze na vyzkoušení zdarma.
- Vyžaduje připojení k internetu pro použití.
Úkoly pro GitHub Copilot
1. Create a function that will return an array of five random numbers from 0 to 13 and sort those numbers from the largest. In JavaScript.
function generateRandomNumbers() {
let numbers = [];
for (let i = 0; i < 5; i++) {
numbers.push(Math.floor(Math.random() * 14));
}
return numbers.sort((a, b) => b - a);
}2. Return the value of the "page" parameter from the url. In JavaScript.
function getPageParameter() {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get('page');
}3. There is a bug in this function, find it and fix it.
const getData = async () => {
isLoading = true;
const data = await getData(`/api/articles`);
return data;
isLoading = false;
};Odpověď
const getData = async () => {
isLoading = true;
try {
const data = await getData(`/api/articles`);
return data;
} finally {
isLoading = false;
}
};Codeium
Codeium je AI nástroj, který se zaměřuje na automatizaci vývoje softwaru. Tento nástroj používá pokročilé algoritmy na analýzu požadavků a generování odpovídajícího kódu. Jeho hlavními funkcemi jsou autocomplete, chat a vyhledávání. Roste na popularitě a je mezi programátory velmi oblíbený. Jeho hlavní výhodou oproti GitHub Copilotovi je ta, že je pro jednotlivce zdarma.
Výhody Codeium
- Pro jednotlivce zdarma.
- Podpora pro širokou škálu jazyků, technologií a IDE.
- Přístup ke kontextu repozitáře.
- Vysoké hodnocení od uživatelů.
Nevýhody Codeium
- Výstupy mohou být méně přesné ve srovnání s jinými nástroji.
Úkoly pro Codeium
1. Create a function that will return an array of random numbers from 0 to 13 and sort those numbers from the largest. In JavaScript.
function generateRandomNumbers() {
let randomNumbers = [];
for (let i = 0; i < 5; i++) {
randomNumbers.push(Math.floor(Math.random() * 14));
}
randomNumbers.sort((a, b) => b - a);
return randomNumbers;
}
console.log(generateRandomNumbers());2. Return the value of the "page" parameter from the url. In JavaScript.
const urlParams = new URLSearchParams(window.location.search);
const page = urlParams.get('page');3. There is a bug in this function, find it and fix it.
const getData = async () => {
isLoading = true;
const data = await getData(`/api/articles`);
return data;
isLoading = false;
};Odpověď
const getData = async () => {
isLoading = true;
const data = await getData(`/api/articles`);
isLoading = false; // Move this line here
return data;
};Bito AI
Další velmi dobře hodnocený AI nástroj, který lze používat i ve free verzí. Ve free verzí je ale velmi omezen počtem requestů na chatu nebo automatickým doplňováním kódu. Bito AI se prezentuje jako nástroj, který je vhodnější spíše pro refactoring již existujícího kódu a práci se stávajícím kódem, ale samozřejmě zvládne i generovat nový kód.
Používá Chat GPT. Ve free verzi verzi 3.5 a v placené verzi verzi 4 (v době psaní článku - duben 2024).
Výhody Bito AI
- Pro nenáročné uživatele zdarma.
- Vysoké hodnocení od uživatelů.
- super nástroj s prací se stávajícím kódem
Nevýhody Bito AI
- Pro každodenní plné používání nutnost plné verze.
- Plná verze draší o 5$/měsíc jako jednička na trhu - Github Copilot.
Úkoly pro Bito AI
1. Create a function that will return an array of random numbers from 0 to 13 and sort those numbers from the largest. In JavaScript.
function generateAndSortRandomNumbers() {
let randomNumbers = [];
for (let i = 0; i < 10; i++) {
randomNumbers.push(Math.floor(Math.random() * 14));
}
randomNumbers.sort((a, b) => b - a);
return randomNumbers;
}
// Call the function to generate and sort the random numbers
let sortedRandomNumbers = generateAndSortRandomNumbers();
console.log(sortedRandomNumbers);2. Return the value of the "page" parameter from the url. In JavaScript.
function getPageParameterValue(url) {
const urlParams = new URLSearchParams(url);
return urlParams.get('page');
}
// Example URL
const url = 'https://www.example.com/page=3&category=books';
// Call the function to get the value of the "page" parameter
const pageValue = getPageParameterValue(url);
console.log(pageValue); // Output: 33. There is a bug in this function, find it and fix it.
const getData = async () => {
isLoading = true;
const data = await getData(`/api/articles`);
return data;
isLoading = false;
};Odpověď:
const getData = async () => {
isLoading = true;
const data = await fetchData(`/api/articles`);
isLoading = false;
return data;
};Continue
Continue je poněkud jiný oproti ostatním nástrojům. Do Continue si můžete integrovat svůj vlastní model. Ať už se bude jednat o model běžící na lokále (např. pomocí LM Studio) nebo se připojíte na to co preferujte online (např. Chat GPT).
Proto i výstupy z Continue budou velmi odlišné, v závislosti na nastavení. My jsme testovací příkazy nahráli do defaultního nastavení Continue.
Výhody Continue
- Možnost napojení jakéhokoli LLM, i lokálně.
- Zdarma.
- Super pro velké fanoušky AI.
Nevýhody Continue
- Nutnost si trochu pohrát s nastavením modelu.
- Různé výsledky odpovědí, v závislosti na použitém LLM
Úkoly pro Continue
1. Create a function that will return an array of random numbers from 0 to 13 and sort those numbers from the largest. In JavaScript.
function generateRandomNumbers(n) {
var arr = [];
for (var i = 0; i < n; i++) {
arr.push(Math.floor(Math.random() * 14));
}
arr.sort(function(a, b) {
return b - a;
});
return arr;
}2. Return the value of the "page" parameter from the url. In JavaScript.
function getPageParameter() {
var urlParams = new URLSearchParams(window.location.search);
return urlParams.get('page');
}3. There is a bug in this function, find it and fix it.
const getData = async () => {
isLoading = true;
const data = await getData(`/api/articles`);
return data;
isLoading = false;
};Odpověď:
let isLoading = false;
const getData = async () => {
isLoading = true;
try {
const response = await fetch(`/api/articles`);
const data = await response.json();
isLoading = false;
return data;
} catch (error) {
isLoading = false;
console.error(error);
}
};Závěr
To bylo srovnání 4 zajímavých nástrojů. Nebudeme porovnávat jejich jednotlivé výstupy, to ať si udělá každý sám co mu víc vyhovuje. Všichni své úkoly zvládli.
Samozřejmě, že když budete Googlit, tak naleznete další a další nástroje. Já jsem se snažil najít populární nástroje v době psaní tohoto článku, které splňují 3 základní kritéria: automatické doplňování kódu, rychlý chat, kde si můžete s AI chatovat a plugin dostupný do nejpopulárnějších IDE současnosti.
Já osobně po krátkém testování všech 4 zmiňovaných jsem skončil u Codeium. Codeium mi přijde rychlé, výsledky předvídatelné a kvalitní, a v neposlední řadě je zdarma. Každý si musí najít to své.