Advanced
Web Applications

Coding assistant

Get ready

What you need to:

  • know HTML, JavaScript, TypeScript, and Vite,
  • know MVP and MVVM design patterns,
  • have detail knowledge of Dialog assignment.

Using your own computer

There are no special requirements. You may not even need a computer.

Objectives

  • Repositories and quality
  • Practical: JavaScript user interface
  • Looking for help

Repositories and quality


It's good to learn from your mistakes. It's better to learn from other people's mistakes.

Practical: JavaScript user interface

VanillaJS is not allowed!

Dialog page:

  • Dialog specification is not what you are used to.
  • Full functionality is not required.
  • Spoiler: we fix it later with tests.

Coding the dialog page

Side quest: How we can use AI?

Analyzing the functional requirements

We just go through the assignment and collect what needs to be done.

AI: ChatGPT, Claude, ...

Designing the solution

  • A single React function
  • Model-View-Presenter (MVP)
  • Unidirectional data flow, e.g. one-way mutations on an immutable data state

Each solution has pros and cons. You should choose the one with respect to the task at hand.

Looking for a companion

One we designed the application, we need to implement it. This should be straightforward to almost boring. We can try to recruit a junior coder (create a screen in an application, ...).

AI: GitHub Copilot (autocomplete), ...

GitHub Copilot, ...

JetBrains plugin June 2021. VsCode plugin March 2022. June 2022 moving out of technical preview.

Assistant can be easily integrated with your IDE of choice using plugins. Features you can expect:

  • Code completion - autocomplete-style suggestions, this is where it all started.
  • (Copilot) Chat - an interface for explanation and talking about the code.
  • (Copilot) Edits - select files to edit, describe changes, decide on given suggestion.
    There is also agent mode (public preview March 2025), where multiple files are updated with specific goal in mind.
  • (Copilot) in the CLI - chat in and about command line and commands.
  • ...

GitHub Copilot, try it out!

There is a free tier!

To subscribe to GitHub Copilot Pro, you can try GitHub Copilot for free with a one-time 30-day trial. To continue using Copilot after the trial, you will need a paid subscription, unless you are a verified student, teacher, or maintainer of a popular open source project on GitHub.

Respect rules of a subject/seminar/assignment!

GitHub Copilot alternatives

There are self-hosted alternatives to "commercial" AI coding assistant. You may even create your own assistant, just look for tutorials. The main issue is probably going to be the GPU computation power.

Agent mode?

The idea behind agents is that they can carry out complex tasks. The execution is often split to planning and execution of sub-tasks. You remain in charge by approving their actions (imagine a senior developer).

There are specialized tools build around this idea, often as "forks" of VSCode. Some plugin can take your IDE (VSCode, JetBrains, ... ) to this level.


Quote from Windsurf:

Thanks for being a part of Codeium - we can't wait to see what you build!

AI: Cursor, Windsurf, ..., vibe coding, ..

Back to square one

What if ...

AI: ChatGPT, Claude, ...

What if ...

  • AI can read the code
  • AI can perform update on multiple files
  • AI can update based on a short specification

If AI could read an issue from GitHub,GitLab, ect. then ... it can just resolve the issue, right?

Devin

Introduced as the first AI software engineer is March 2024, Devin is now generally available.

  • learn how to use unfamiliar technologies,
  • build and deploy apps end to end,
  • autonomously find and fix bugs in codebases,
  • train and fine tune its own AI models,
  • address bugs and feature requests in open source repositories,

Evaluated using SWE-bench.

Organization: Docker

Please, bring your own computer with you. Read the "get ready" section and make sure you are ready.

Relevance

How is an AI plugin in VSCode related to web applications? Well VSCode is ...

Questions, ideas, or any other feedback?

Please feel free to use the anonymous feedback form.