Das Dokument thematisiert die Anwendung von KI in der Frontend-Entwicklung, einschließlich der Migration von Technologien und der Identifikation von Bugs. Es zeigt auf, dass KI bei der Erstellung von Tests und Storybook-Stories hilfreich ist, allerdings die Ergebnisse manchmal fragwürdig sein können. Abschließend wird betont, dass trotz der Vorteile der KI die Expertise von Entwicklern weiterhin unerlässlich bleibt.

1. qaware.de
Neue Möglichkeiten und Werkzeuge
Frontends mit Hilfe von
KI entwickeln
Dominik Haas | dominik.haas@qaware.de | Head of Division & Lead Software Architect

2. Intro

3. Wie kann uns KI speziell bei der
Entwicklung von Frontends helfen?
Ideen > Tools & Versionen
Typischer Frontend
Entwickler ;-)

4. Disclaimer
KI ändert sich sehr sehr schnell.
Alle Beispiele waren zu einem Zeitpunkt so.
Drückt mir für die Demo die Daumen!

5. Help me code!

6. Honorable mention

7. 🤔
Ich würde gerne mal React Native ausprobieren…

8. 💡
🤔
Ich würde gerne mal React Native ausprobieren…

9. Hey, I have the following pinia store. Can you
rewrite it to react custom hooks?
9
...

10. Hey, I have the following pinia store. Can you
rewrite it to react custom hooks?
10
...

11. Hey, I have the following Vue Ionic component.
Can you rewrite it to react native?
11
...

12. Hey, I have the following Vue Ionic component.
Can you rewrite it to react native?
12
...

13. Erkenntnis: KI kann Technologien migrieren 👍
Das ist als Startpunkt sehr hilfreich, es braucht aber
Wissen, Anpassungen und Iterationen.
13
QAware

14. Unerfahrener React-Entwickler (ich *hust*) schreibt
diesen Code - alles cool?
...
const [selectedIndex, setSelectedIndex] = useState(0);
const onSelect = (index: IndexPath | IndexPath[]) => {
let selected = index instanceof Array ? index[0] : index;
setSelectedIndex(selected.row);
const newSelectedTag = tags ? tags[selectedIndex] : '';
setSelectValue(newSelectedTag);
setCatImageByTag(newSelectedTag);
};
return (
<Layout style={styles.container}>
...
<Select style={styles.select} label={'Select a tag'} onSelect={onSelect} selectedIndex={selectedIndexPath}
value={selectValue}>
{tags?.map((tag, index) => (
<SelectItem title={tag} key={index} />
))}
</Select>
...
</Layout>

15. Oh no - ein Bug!

16. 🤔
Was ist falsch?

17. 💡
🤔
Was ist falsch?

18. Hey, I have the following react component….
What is wrong?

19. Hey, I have the following react component….
What is wrong?

20. Erkenntnis:
Die KI versteht Frameworks und kann Bugs finden 👍

21. 🤔
Mit Tests könnte ich solche Bugs verhindern

22. 💡
🤔
Mit Tests könnte ich solche Bugs verhindern

23. 23
...
Can you write me a test?

24. Funktioniert der Test?
24

25. Hell no!
25

26. Die Tests laufen eigentlich nie out of the box.
26
Kann ChatGPT nicht wissen
Die Tests selbst sind gut!

27. Hey, can you use createTestingPinia and
vue-router-mock instead of manually
mocking everything?
Daraufhin hat sich folgender Dialog zugetragen
27
Certainly! ….
Code
⟳
Fix Code

28. Hey, can you use createTestingPinia and
vue-router-mock instead of manually
mocking everything?
Daraufhin hat sich folgender Dialog zugetragen
28
Certainly! ….
Code
I get the following error: Error: [vitest] No
"default" export is defined on the
"@/warning/WarningMessage.vue" mock.
Did you forget to return it from "vi.mock"?
The error you're encountering suggests that
the mock for WarningMessage.vue is not
correctly defined.
… you need to make sure you're exporting
it properly.
Code
⟳
Fix Code
⟳
Fix Code

29. Hey, can you use createTestingPinia and
vue-router-mock instead of manually
mocking everything?
Daraufhin hat sich folgender Dialog zugetragen
29
Certainly! ….
Code
I get the following error: Error: [vitest] No
"default" export is defined on the
"@/warning/WarningMessage.vue" mock.
Did you forget to return it from "vi.mock"?
The error you're encountering suggests that
the mock for WarningMessage.vue is not
correctly defined.
… you need to make sure you're exporting
it properly.
Code
⟳
Fix Code
⟳
Fix Code
?

30. Hey, can you use createTestingPinia and
vue-router-mock instead of manually
mocking everything?
Daraufhin hat sich folgender Dialog zugetragen
30
Certainly! ….
Code
I get the following error: Error: [vitest] No
"default" export is defined on the
"@/warning/WarningMessage.vue" mock.
Did you forget to return it from "vi.mock"?
The error you're encountering suggests that
the mock for WarningMessage.vue is not
correctly defined.
… you need to make sure you're exporting
it properly.
Code
Can you rewrite the test without mocking
the WarningMessage. Lets just use the real
component.
Certainly! If you prefer to use the real
WarningMessage component …
Code
⟳
Fix Code
⟳
Fix Code
⟳
Fix Code

31. Great! Now lets write an integration test.
Take the same test but don't mock the pinia
store. Lets mock axios instead. Here ist the
client that is used by the pinia store to load
the data…
Daraufhin hat sich folgender Dialog zugetragen
31
…Here's how you can rewrite the test:
Code
Oh, that can't work. Don't forget to
initialize pinia! You're right. To properly test a Vue
component that relies on a Pinia store, you
need to initialize Pinia …
Code

32. Great! Now lets write an integration test.
Take the same test but don't mock the pinia
store. Lets mock axios instead. Here ist the
client that is used by the pinia store to load
the data…
Daraufhin hat sich folgender Dialog zugetragen
32
…Here's how you can rewrite the test:
Code
Oh, that can't work. Don't forget to
initialize pinia! You're right. To properly test a Vue
component that relies on a Pinia store, you
need to initialize Pinia …
Code
I get this error: Error: [vitest] No "default"
export is defined on the "axios" mock. Did
you forget to return it from "vi.mock"?
… Let's correct the axios mock:
Code
⟳
Fix Code

33. Doesn't work. I think I need to remove
stubbing of actions in pinia.
Daraufhin hat sich folgender Dialog zugetragen
33
You're correct. …
Code
Can you mock me another axios call as
well? here is the code: ...
Certainly! To mock an additional axios ...
Code
⟳
Fix Code
⟳
Fix Code
⟳
Fix Code:
- Correct Imports
- Fix mock syntax
- add missing flushPromises()

34. Und schon läufts!
34

35. Hey, I have the following vue component.
Can you write me a test with vitest for it?
<script setup lang="ts">
import {
IonContent,
…

36. Mocking of the stores does not work.
Can i use initial state in
createTestingPinia?

38. Erkenntnis:
KI kann Unit Tests schreiben 👍
38

39. Erkenntnis:
KI kann Unit Tests schreiben 👍
die aber nicht laufen👎
39

40. Erkenntnis:
KI kann Unit Tests schreiben 👍
die aber nicht laufen👎
Das ist trotzdem hilfreich, wenn ihr euch auskennt.
40

41. 🤔
Storybook ist nice, aber man muss immer die Stories schreiben…

42. 💡
🤔
Storybook ist nice, aber man muss immer die Stories schreiben…

43. Hey, I have the following React component. Can
you write stories for it?
43
...

44. Hey, I have the following React component. Can
you write stories for it?
44
...
Tool: StorybookGPT

45. Erkenntnis:
KI schreibt super schnell Stories für React 👍
45

46. Wie ist Storybook GPT eigentlich umgesetzt?
46
https://storybook.js.org/blog/build-your-own-storybook-gpt/

47. From design to code

48. 🤔
Designs mit HTML+CSS entwickeln ist mühsam

49. 💡
🤔
Designs mit HTML+CSS entwickeln ist mühsam

50. Hey, can you implement this form for me with
React?
50
Hey, can you implement this form for me with React? Please use
TypeScript and Tailwind.

51. Das Ergebnis ist na ja
51

52. Nächster Versuch: mit Visual Copilot ein
Figma-Design zu Code transformieren
52

53. Sieht gut aus - aber warum kann ich eigentlich
nicht klicken?
53

54. Sieht gut aus - aber warum kann ich eigentlich
nicht klicken? 🤯
54
QAware

55. Über einen Prompt lassen sich Anpassungen
vornehmen
55
QAware
Setting: Quality
Styling: Tailwind
Framework: React
Prompt

56. Lets go!
56
Can you change the input fields
to inputs instead of divs?
Can you make the buttons a
little bit smaller? Less
roundings. And make the form
responsive. The form should
reduce itself to one column on
small devices.
Perfect but leave the buttons
next to each other for all screens
Can you align the three buttons
to the right?
Can you add an event listener
to the props of the
ProjectMangagementForm and
then send an object containing
all inputs?

57. Das Ergebnis lässt sich sehen!
57

58. Created with: ChatGPT

59. Fazit

60. Schon jetzt ist KI eine deutliche Hilfe
■ Hilft bei Nebentätigkeiten, wie zum Beispiel:
– Bugs finden
– Tests schreiben
– Stories für Storybook schreiben
■ Hilft euch neue Technologien zu lernen oder Technologien zu
migrieren
■ ⚠ Die Antworten sind oft noch fragwürdig
■ Design to Code ist spannend und wird besser
Fazit: Gute Werkzeuge aber der Experte ist nach wie vor wichtig.

61. twitter.com/qaware
linkedin.com/company/qaware-gmbh
xing.com/companies/qawaregmbh
slideshare.net/qaware
github.com/qaware
#codineers