DEV Community: eleonorarocchi

Getting Started with the Gemini API: A Practical Guide

eleonorarocchi — Fri, 03 Apr 2026 15:39:41 +0000

Getting Started with the Gemini API: A Practical Guide for Students

TL;DR

Getting access to the Gemini API takes less than 15 minutes: a Google Cloud account, an API key, and a Python library are enough to produce your first working prompt.
The free tier is sufficient for educational projects, experiments, and portfolio work: you don’t need a credit card to start building real things.
The barrier to entry is lower than it seems: the difficult part is not the technical setup, but knowing what to build once the model starts responding.

The Context

Whenever a junior developer asks me how to approach AI in a practical way, my answer is always the same: stop watching YouTube tutorials and write a line of code that calls a real model.

The problem is that “getting started” seems more complicated than it actually is. Dense official documentation, terminology that isn’t always clear, and the feeling that you need months of theory before touching something that actually works. That’s not the case.

Google’s Gemini API is currently one of the most accessible tools for anyone who wants to take their first steps with applied artificial intelligence. It supports text, images, and code, has a real free tier, and integrates with Python in just a few minutes. It’s not the only option on the market, but for a student or someone starting from scratch it’s probably the entry point with the best balance between simplicity and power.

This guide has a single goal: to take you from zero to your first working prompt in the shortest time possible.

How It Works

Step 1 — Create an account and enable the API

The starting point is Google AI Studio. You don’t need to configure a full Vertex AI project to begin: AI Studio is the most direct interface for developers who want to prototype quickly.

Sign in with your Google account.
Go to AI Studio and click Get API Key.
Create a new API key or associate it with an existing Google Cloud project.
Copy the key and store it safely: you’ll need it in a moment.

Operational note: never put the API key directly in your source code, especially if you’re working with Git. Use an environment variable or a .env file excluded from the repository.

Step 2 — Install the Python library

Open your terminal and install the official package:

pip install google-generativeai

If you work in a virtual environment (which I always recommend, even for small projects):

python -m venv gemini-env
source gemini-env/bin/activate  # on Windows: gemini-env\Scripts\activate
pip install google-generativeai

Step 3 — Configure the API key

The cleanest way is to use an environment variable. On Linux/macOS:

export GOOGLE_API_KEY="your-key-here"

On Windows (PowerShell):

$env:GOOGLE_API_KEY="your-key-here"

Alternatively, you can use a .env file with the python-dotenv library:

pip install python-dotenv

And in the .env file:

GOOGLE_API_KEY=your-key-here

Step 4 — Write your first working prompt

This is the moment when you stop reading guides and actually see something happen. Create a file called first_prompt.py with the following content:

from dotenv import load_dotenv
from google import genai
import os

load_dotenv()

client = genai.Client(api_key=os.getenv("GOOGLE_API_KEY"))

response = client.models.generate_content(
    model="gemini-2.5-flash",
    contents="Explain what an API is in three simple sentences."
)

print(response.text)

Run it with:

python first_prompt.py

If everything is configured correctly, you’ll see a text response from the model in your terminal. This is the starting point: from here you can build anything.

Step 5 — Add a bit of structure

Once the model responds, the next step is to make the code interactive. Here is a minimal example of a terminal chatbot:

from dotenv import load_dotenv
from google import genai
import os

load_dotenv()

client = genai.Client(api_key=os.environ["GOOGLE_API_KEY"])

print("Chatbot active. Type 'exit' to quit.\n")

history = []

while True:
    user_input = input("You: ")

    if user_input.lower() == "exit":
        break

    history.append(user_input)

    response = client.models.generate_content(
        model="gemini-2.5-flash",
        contents=history
    )

    reply = response.text
    print(f"Gemini: {reply}\n")

    history.append(reply)

Twenty lines of code, a working chatbot with conversation memory. The start_chat model automatically maintains message history.

Practical Observations

A few things worth knowing before moving forward, which the official documentation tends to mention only in passing.

About the free tier. It exists and it’s real, but it has rate limits (requests per minute and per day). For small projects and prototypes this is not a problem. It becomes one if you build something that must handle continuous load or many simultaneous users. Keep an eye on your quota in the Google Cloud Console.

About choosing the model. At the moment gemini-2.5-flash is the best balance for beginners: fast, inexpensive (in terms of quota), and capable enough for most educational projects. gemini-2.5-pro is more powerful but consumes more quota. For your first project, use Flash.

About error handling. API calls fail. Always, sooner or later. Quota exhausted, timeouts, unexpected responses. Get your code used to handling exceptions right away:

try:
    response = model.generate_content("Your prompt")
    print(response.text)
except Exception as e:
    print(f"Error during API call: {e}")

It’s not elegant, but it’s the bare minimum to avoid scripts crashing silently.

About prompts. The quality of the output depends enormously on how you formulate the request. A vague prompt produces vague answers. If you’re building a specific tool — a text analyzer, a quiz generator, a code corrector — invest time in defining the system prompt well. The difference between a mediocre result and a useful one often lies there, not in the code.

About API key security. I repeat this because it matters: the API key is a credential. If it ends up in a public GitHub repository, someone will use it in your place and you’ll receive the bill. Use .gitignore to exclude .env files, and if you’ve already committed a key by mistake, revoke it immediately from Google.

Different types of mobile app

eleonorarocchi — Sat, 08 Jul 2023 10:09:29 +0000

What is an app

Mobile applications, often simply called apps, are special software designed to run on mobile devices such as smartphones and tablets. Usually they are downloaded through the stores, or digital platforms where it is possible to access a catalog of apps that can be installed on the device in use. Surely you've heard of Apple's AppStore for iOS devices and Google Play for Android devices: these are just the most famous, but there are many others, such as the Amazon Appstore or the Huawei AppGallery. In fact, they in turn consist of an app pre-installed on the device, through which you can search for the various applications available, developed by the most diverse vendors.

The stores are not the only possibility of distribution.

For example, in Android systems, the apk of the app can be installed directly, downloading it from any link, for example by making it available on a website. This process, known as sideloading, can be dangerous for the end user, as the applications distributed in this way are not verified and the sources may not be reliable. At the same time it can be disadvantageous for the app owner to distribute their software in this manner because visibility and exposure are obviously reduced.

There is a third way: if the app consists of a PWA (Progressive Web App), it is sufficient to open the website and add it to the Home page.

What types of apps can be developed

Apps can be developed using a native, hybrid or web approach.

Native development is based on specific native platforms of an operating system, mainly for iOS or for Android. The application code in this case is written using different programming languages and different development tools. For example for iOs, the programmer uses XCode from Apple, and languages like objective-c or swift; for Android instead use Android Studio and languages like Java or Kotlin. This type of choice clearly requires the separate development of an application version for each platform, but it is highly recommended when you need to offer high performance and access to all the device's features.

Hybrid development streamlines development by allowing you to write code once and then compile it into a native app for each platform. The price to pay is the performance, lower than native developed apps, and limited access to the device's features. The development is very close to a web development, and can be based on different frameworks such as Ionic, React Native, Flutter or MAUI. Therefore, depending on the choice, different languages are used, for example Typescript, Dart, C#.

Instead, in the case of Progressive Web Apps (PWA), we actually proceed with a development based on standard web technologies (HTML, Javascript/Typescript, CSS) but still managing to provide the user with a series of more features than a page traditional website. In fact, a PWA is also accessible offline, thanks to the pre-fetching of resources and local storage of data. It may also be able to receive push notifications, albeit with limited options compared to a native development.

AI: how to include AI in software projects

eleonorarocchi — Wed, 21 Jun 2023 20:12:37 +0000

Artificial intelligence is now within everyone's reach. You don't need to be an expert in data analytics or machine learning to exploit its potential in software projects.

In which areas to use AI in my software projects.

Speech Recognition to convert audio into text and to transcribe conversations or voice commands.
Artificial vision for image analysis and classify objects, detect faces, read images text (other than OCR!).
Natural language analysis and understanding, automatic translation into other languages, sentiment analysis, keyword extraction.
Improvement information search with Cognitive Search for greater efficiency and accuracy in information search.
Creation and management of interactive knowledge bases and intelligent chatbots that can answer user questions and offer automated assistance.

Which products can I use to include AI in my projects

Speech Recognition: Amazon Polly, Microsoft Azure Cognitive Services, Google Cloud Speech-to-Text
Artificial vision: Amazon Rekognition, Microsoft Azure Cognitive Services, Google Cloud Vision
Knowledge: Amazon Lex, Microsoft Azure Cognitive Services, Google Dialogflow
Natural language analysis: Amazon Comprehend, Amazon Translate, Microsoft Azure Cognitive Services, Google Cloud Natural Language, Google Cloud Translation

AI: what else is in AI besides machine learning

eleonorarocchi — Thu, 15 Jun 2023 20:38:46 +0000

Artificial intelligence is a very ample field, its birth is not as recent as one thinks, however it is constantly evolving. We talked about machine learning in a previous article, which is one of the fields of AI, but it is only one.

We have said that artificial intelligence is a field of study that deals with developing systems or machines capable of performing activities as human intelligence would perform them, i.e. reasoning, learning, applying problem-solving and making decisions.

Machine learning is a specific approach to AI that focuses on the ability of a machine to learn from data without being explicitly programmed. In fact, algorithms and training data are provided so that the machine learns from them so as to make predictions or make decisions based on this data. Machine learning relies on identifying patterns and trends in data and using algorithms to adjust and improve model performance based on those patterns.

However, there are other approaches, let's see some of them together.

Symbolic logic

This approach is based on formal logic, that is a branch of logic which, rather than on the meaning of prepositions or their semantic content, analyzes their structure and the relationships between them.

Formal logic is also called symbolic logic, precisely because it involves representing prepositions with symbols and using logical connectors to connect them.

Through the rules of logic, new prepositions can then be derived from existing ones.

Rule-based reasoning

In this case, rules are predefined so as to define specific actions to be taken when certain situations occur.

These are logical rules, which link premises to actions or conclusions.

The AI system applies these rules to the available inputs, thus evaluating the conditions and determining which rules are satisfied, then performs the corresponding actions associated with the satisfied rules.

This approach is preferable when there is great knowledge of the application domain. Conversely it is not particularly suitable for very complex or ambiguous situations, when the conditions are not deterministic.

Neural networks

This approach uses a network of nodes, called neurons, connected to each other with the aim of exchanging information through weighted connections, where the associated weight represents the importance of that connection in the processing process.

Neurons are organized into layers, usually divided into three main parts: the input layer, the (optional) hidden layers, and the output layer.

The training takes place by alternating two phases.

Input data is presented to the neural network through the input layer, from here each neuron in a subsequent layer receives inputs from neurons in previous layers, processes them and produces an output using an activation function, so up to the output layer , which provides the final result of the network. This phase is called forward propagation.

Once the output is obtained, the discrepancy between the expected output and the desired output value is calculated. This error is then back-propagated through the network, changing connection weights to reduce it. Consequently, during this phase, the weights of the connections are updated based on the extent of the error committed. This phase is called backpropagation.

The two phases are repeated for a certain number of iterations to ensure that the neural network learns and improves its performance.

Neural networks are used to make predictions or decisions about new input data.

This approach is widely used in image recognition, machine translation, text classification, speech recognition.

Case-based reasoning

This approach relies on using previous cases as a knowledge base for solving new problems.

It generally includes four main phases:

Retrieve: The system searches its database of previous cases for those relevant to the current problem, determined based on similar characteristics of the problem or desired outcomes.
Reuse: The system uses the recovered cases to find solutions or suggestions applicable to the current problem.
Review (Revise): the solution or suggestion is examined and evaluated, possibly changes or adaptations can be made to address the specifics of the problem or to improve the solution.
Retain: The current case or solution is added to the database of previous cases.

The approach is indicated when there is no direct algorithmic solution or the environment is subject to frequent changes.

The main use cases are medical diagnostics, industrial maintenance, user assistance, process planning and many others, where experience and adaptation to new scenarios are important to achieve good results.

Optimization and research

Optimization and search are approaches used in AI to solve complex problems and find optimal solutions. These approaches involve mathematical modeling of a problem and applying specific algorithms to find the best possible solution.

Optimization aims to find the best solution in a set of alternatives that meet the desired criteria.

Some common optimization algorithms used in AI include:

Genetic algorithms inspired by the theory of biological evolution
Local search algorithms that iteratively explore nearby solutions trying to improve the target
Linear programming algorithms used to solve linear optimization problems
Combinatorial optimization algorithms designed to solve optimization problems where the solutions are sequences or combinations of discrete elements

Search instead focuses on the systematic exploration of a set of possible solutions to find the one that satisfies the specific requirements of the problem and is based on different search algorithms.

Inductive learning

Inductive learning is an approach in AI that involves acquiring general knowledge and rules from specific examples or training data with the aim of extracting hidden patterns, relationships or structures from the training data and applying them to new data or similar problems.

This approach is used in cases of:

Classification, to train a model to distinguish between different classes or categories.
Regression, to model relationships between variables and predict continuous or numerical values.
Knowledge extraction, so to extract knowledge and rules implicit in the data.
Clustering, to identify natural structures or groups in the data without the need for predefined labels.

Inductive learning algorithms include decision trees, random forests, support vector machines, neural networks, and many more. These algorithms try to find models or functions that minimize error or otherwise maximize accuracy while learning, allowing the model to generalize and make predictions or knowledge extraction on new data.

AI: what is Machine Learning

eleonorarocchi — Fri, 09 Jun 2023 10:40:45 +0000

In recent months, everywhere there is talk of artificial intelligence. Sometimes with knowledge of the facts, sometimes by slipping it a little haphazardly into conversations. It's definitely not a new concept, but it's not an easy topic of discussion, for several reasons. It is difficult to understand the basics, it is difficult to understand the concrete areas of use, it is difficult to enter into the ethical implications.

As a technician, however, I feel the need to understand how this branch of information technology can enter into my work routine, so I started training me to be able to understand a little better the limits and potential.

So now I want to start sharing with you what I have learned and I am learning, so as to help those wishing to learn more to get a better idea of the current evolutionary state.

The first question that I had, was what means "machine learning".

What is Machine Learning?

Machine learning (ML for friends) is a discipline of artificial intelligence (AI for friends).

What is the goal of ML?

The goal of ML is the creation of systems capable of learning independently starting from data analysis.

How does it do it?

ML is based on algorithms that simulate the learning process of human beings, going to refine results and performances from time to time.

ML uses mathematical algorithms applied to large amounts of data with the aim of producing models applicable to those same data that can be replicated on the data itself in order to be able to produce predictions.

The need for a similar technology is given by the fact that a problem cannot always be solved by programmed software, either because it is too complex or because it evolves too quickly.

For example for facial recognition, or language translation, but also for medical diagnoses.

To solve these complex problems, a large amount of data is fed to the system, and the algorithms are left to work on it by recognizing patterns, rules, relationships between the data themselves, so as to obtain a model which can then also be applicable in future.

Everything therefore starts from a training phase, precisely because it is not the programmer who defines the algorithm, but it is the system itself which autonomously analyzes the data provided and discovers how to use them to solve specific problems.

How to start with OramaSearch

eleonorarocchi — Sun, 04 Jun 2023 20:52:17 +0000

In this last week, I wanted to try OramaSearch, a new library that is really easy to use to implement fulltext searches.

I wanted to do two simple tests to verify its ease of use and if indeed, as the authors promise, provide results so quickly.

The first test was to create an Angular project, add a service that downloaded a structured JSON of data (in my case related to a list of states of the world), and then use Orama to filter the data based on a text string.

The steps to include and use Orama are:

create an angular project
install OramaSearch
create a service to download data from a webservice In my case I used https://restcountries.com, an Open Source project and free to use, to get country information via a RESTful API.
create a database with the desired schema
through the service, populate the database
create an interface to display the data list, including search fields (in my case I used AngularMaterial to speed up writing the UI)
implement search method

If you want to see the complete project, you can find it here https://github.com/eleonorarocchi/oramaDemo

The second test was to implement a NodeJs project.
As in the previous example, I tried including CountryREST to populate the database, and implement a search method.

The steps to include and use Orama are:

initialize it as an npm project:
install and set up TypeScript
create tsconfig.json
install the Express framework and create a minimal server
create src/app.ts file
in the app.listen method, add the code for initialize the database definition, as in the previous project, and the code for populate database
create a method for see all data
create a method for see filtered data, by a parameter

It's really simple to integrate and fast to deliver results!

If you want to see the complete project, you can find it here https://github.com/eleonorarocchi/oramaNodeDemo

You can find more information directly on the project website: https://www.oramasearch.com

Where publish nodeJs+Angular app for free

eleonorarocchi — Thu, 23 Feb 2023 13:44:19 +0000

I needed to publish a simple web application composed of Angular frontend and Node backend on a server to make it accessible on the network. I was looking for a hosting service for this architecture, perhaps free, and I discovered https://www.render.com

Render.com is a fully-managed cloud platform, which can host sites, backend APIs, databases, cron jobs and all applications in one place.

Static site publishing is completely free on Render and includes the following:

Continuous, automatic builds & deploys from GitHub and GitLab.
Automatic SSL certificates through Let's Encrypt.
Instant cache invalidation with a lightning fast, global CDN.
Unlimited contributors.
Unlimited custom domains.
Automatic Brotli compression for faster sites.
Native HTTP/2 support.
Pull Request Previews.
Automatic HTTP → HTTPS redirects.
Custom URL redirects and rewrites.

If you have a github account, it is very convenient to release updates, as you can directly link a repository to render.com, and automate the deployment.

No code mobile app? BravoStudio is the answer

eleonorarocchi — Sun, 25 Dec 2022 19:45:26 +0000

BravoStudio is a zero code tool that allows you to obtain iOS and Android apps starting from a prototype.
I find it to be a great tool to get POC for your projects and to show to the customers a really working app.

Combining it together with other tools such as Figma and AirTable, you get an app that allows you to show not only the navigation between the various sections, but also to view and even send data to external services.

An example? Let's say we are drawing a mobile app interface with Figma, consisting of two screens:

one with a list of items, for example for a todo-list of operations to be divided among colleagues in the office
one with a form, for example to create a new item in the list

complete with keys and navigation between them.

Let's then create a table on AirTable that allows you to record the items in the list. Using AirTable to save data allows it to be easily displayed on a completely stand-alone web page, for example to display on a monitor hanging in a common room, quick to implement with typescript frameworks or alternatively with other zero code tools.

Well, BravoStudio fits in between Figma and AirTable: it feeds the Figma project, connects it to the specific AirTable apps and allows you to generate an application that can be installed on a mobile device, even publishable on the stores.

it is possible to obtain such a POC in a few hours of work.

This set of tools can be used for any project in reality but in my opinion the purpose and the target must be considered.

I definitely recommend it for a POC or an MVP or for projects where a temporary use of the solution is expected. I haven't had experience with more complex projects yet, where for now I prefer to have more control by writing all the code and being able to manage it as I prefer.

For more information:
BravoStudio
Integration with Figma tutorial
AirTable
Airtable basics for Bravo Studio

Lit: what is public reactive properties

eleonorarocchi — Sat, 10 Sep 2022 13:42:33 +0000

Lit components receive input and store a state.
Reactive properties are properties that can trigger the reactive update cycle when changed, re-rendering the component, and can optionally be read or written to attributes.

Lit manages:

Reactive Updates: Lit generates a getter / setter pair for each reactive property. When a reactive property changes, the component schedules an update.
Attribute management: By default, Lit sets an observed attribute corresponding to the property and updates the property when the attribute changes. Property values can also, optionally, be reflected in the attribute.
Superclass Property: Lit automatically applies property options declared by a superclass. You don't need to declare the properties again unless you want to change the options.
Element update: If a Lit component is defined after the element is already in the DOM, Lit manages the update logic, ensuring that any property set on an element before it was updated triggers the correct reactive side effects when the element is updated.

Public properties are part of the component's public API. In particular, public reactive properties should be treated as inputs.

The component should not change its public properties, except in response to user input.

Lit also supports internal reactive state, which refers to reactive properties that are not part of the component API.

These properties do not have a corresponding attribute and are typically marked as secure or private in TypeScript.

The component is capable of manipulating its own internal reactive state.

In some cases, the internal reactive state can be initialized from public properties, for example if there is an expensive transformation between the user-visible property and the internal state.

As with public reactive properties, updating the internal reactive state triggers an update cycle.

Public reactive properties are declared using the @property decorator, possibly with a set of options.

Alternatively you can use a static property.

Class fields have a problematic interaction with reactive properties, because they are defined in the element instance.

Reactive properties are defined as ancillary on the element prototype.

According to the rules of JavaScript, an instance property takes precedence and effectively hides a prototype property.

This means that reactive property accessors don't work when class fields are used.

When a property is set, the element is not updated.

In JavaScript, it is not necessary to use class fields when declaring reactive properties. Instead, the properties must be initialized in the element constructor.

In TypeScript, you can use class fields to declare responsive properties as long as you use one of these templates:

With setting useDefineForClassFields in tsconfig to false.
By adding the declare keyword to the field and entering
the initializer of the field in the constructor.

When compiling JavaScript with Babel, you can use class fields to declare reactive properties as long as you set setPublicClassFields to true in your babelrc's assumptions configuration.

The options object can have the following properties:

attribute: Whether the property is associated with an attribute or a custom name for the associated attribute. Default: true. If the attribute is false, the converter, reflect, and type options are ignored.
converter: custom converter for converting between properties and attributes. If not specified, use the default attribute converter.
hasChanged: Function called whenever the property is set to determine if it has been changed and should trigger an update. If not specified, LitElement uses a strict inequality check (newValue! == oldValue) to determine if the property value has changed.
noAccessor: Set to true to avoid generating default property accessors. This option is rarely needed. Default: false.
reflect: if the property value is reflected in the associated attribute. Default: false.
state: to be set to true to declare the property as an internal responsive state. The internal reactive state triggers updates like public reactive properties, but Lit doesn't generate an attribute for it and users don't have to access it from outside the component. Equivalent to using the @state decorator. Default: false.
type: When converting a string-valued attribute to a property, Lit's default attribute converter will parse the string into the specified type and vice versa when reflecting a property into an attribute. If the converter is set, this field is passed to the converter. If the type is not specified, the default converter treats it as a type: String. When using TypeScript, it should generally match the TypeScript type declared for the field. However, the type option is used by the Lit runtime for string serialization / deserialization and should not be confused with a type checking mechanism.

Omitting the options object or specifying an empty options object is the same as specifying the default value for all options.

If you want to read this content in italian, here.

Blackboards, for all tastes and budgets

eleonorarocchi — Tue, 23 Aug 2022 20:41:28 +0000

Over the past couple of years, we've all been experimenting with new ways of working.

We have had many meetings with colleagues, clients and consultants all over the world and it is not always easy to explain yourself only in words.

I want to share with you the best tools I have discovered and tried.

1. Miro

It is a digital whiteboard that allows you to create different projects and organize notes. You propose a series of predefined templates but you can define your own in a very easy way. Miro has a very convenient feature to allow users to stick notes as PostIt.
See: miro.com

2. Mural

Like Miro, it's a digital whiteboard. Also in this case it is possible to use the proposed example templates or model your own. The board can be accessed by several people at the same time and the work is shared in real time.
Like a Miro, you can stick notes as PostIt in a very simple way.
When working with large groups of people, a Mural feature called "Summon" comes in handy, which allows the facilitator can force all participants to look at his own view.
See: mural.co

3. Trello

This is a tool that allows you to organize projects and everything related in message boards. The organization is structured with respect to the instruments listed above.
Through cards and lists it allows the subdivision of activities organized into checklists, assigned to different people. Thanks to this tool you can keep track of deadlines, assignments, progress.
See: trello.com

4. Azure Boards

Azure Board allows you to create workflows, problem types, epics and many other typical components of Application Life Cycle Management (ALM). It allows you to monitor the capacity of the team, plan development sprints, create and update activities efficiently, collaborate with team members through real-time updates thanks to the use of an interactive and versatile dashboard, obtain a personalized reporting experience based on customer needs.

5. Excalidraw

Last but not least, this is a virtual whiteboard for sketching hand-drawn. For example, it makes it easier to share diagrams during meetings.
See: excalidraw.com

Lit: how can a lit component be defined

eleonorarocchi — Fri, 12 Aug 2022 19:45:19 +0000

Creating a Lit component involves a number of concepts:

It is implemented as a custom element and registered in the browser.
It has a render method called to render the component content, in which you define a template.
Properties maintain the state of the component. The modification of one or more reactive properties of the components triggers an update cycle that takes care of re-rendering the component.
A component can define encapsulated styles to control its appearance.
Lit defines a set of callbacks that can be overridden to hook into the component lifecycle, for example to run code when the element is added to a page or whenever the component is updated.

How to define a Lit component

A class that extends LitElement must be created and registered in the browser:

The @customElement decorator is an abbreviation for calling customElements.define, which registers a custom element class with the browser and binds it to an element name (in this case, simple-greeting).

Using JavaScript, or without using decorators, you can call define() directly:

A Lit component is an HTML element.

When defining a Lit component, you are defining a custom HTML element which can then be used as any integrated element:

The base class LitElement is a subclass of HTMLElement, therefore a Lit component inherits all properties of standard methods by HTMLElement.

Specifically, LitElement inherits from ReactiveElement, which implements reactive properties, and in turn inherits from HTMLElement.

We know that TypeScript is able to infer the class of an HTML element returned by some DOM APIs based on the tag name.

For example, document.createElement ('img') returns an HTMLImageElement instance with a src: string property.

You can achieve the same behavior on custom elements by adding to HTMLElementTagNameMap as follows:

In this way, the following code performs the type checks correctly:

It is always a good idea to add an HTMLElementTagNameMap entry to elements created in TypeScript and publish the .d.ts types in the npm package.

What the Render does

You can add a template to the component to define what should be displayed.

Templates can include expressions, which are placeholders for dynamic content.

To define a template for a Lit component, a render() method must be added:

You write the HTML template inside a Javascript tagged template literal using the Lit html tag function.

Template literals are a special type of string symbols that can contain Javascript expressions and span multiple lines. They use backtick characters instead of double quotes. It also accepts arbitrary expressions internally.

These templates can also be used as functions, by putting a keyword in front of the template string to "tag" it.

Lit templates can include JavaScript expressions.

You can use expressions to set text content, attributes, properties, and event listeners.

The render () method can also include any JavaScript, for example, you can create local variables for use in expressions.

Typically, the component's render () method returns a single TemplateResult object (the same type returned by the html tag function).

However, it can return anything that Lit can render:

Primitive values such as string, numbers or booleans.
TemplateResult objects created by the html function.
DOM nodes.
Arrays or iterables of any of the supported types.

To take full advantage of Lit's functional rendering model, the render () method should:

Avoid changing the component state.
Avoid producing side effects.
Use only component properties as input.
Return the same result when the same property values are assigned.
Avoid making DOM updates outside of render ().
Express the component model according to its state and acquire its state in the properties.

You can compose Lit templates from other templates.

For example, you can compose a template for a component called from smaller templates for the header, footer, and main content of the page.

In this example, individual templates are defined as instance methods, so a subclass could extend this component and override one or more templates.

You can also compose a template by importing other elements and using them in the template itself.

A Lit component renders its model initially when it is added to the DOM on a page.

After the initial rendering, any change to the component's reactive properties triggers an update cycle, re-rendering the component.

Lit updates in batches to maximize performance and efficiency.

Setting multiple properties simultaneously triggers a single update, performed asynchronously at the time of the microtask.

During an update, only the parts of the DOM that change are re-rendered.

Although Lit patterns resemble string interpolation, Lit parses and creates static HTML once, then only updates modified values in expressions, making updates very efficient.

Lit uses the shadow DOM to encapsulate the DOM that a component renders.

The shadow DOM allows an element to create its own isolated DOM tree, separate from the main document tree.

It is a key feature of the web component specification that enables interoperability, style encapsulation, and other benefits.

What is the shadow DOM

The shadow DOM allows web developers to create compartmentalized DOMs and CSS for web components.

The shadow DOM removes some of the frailties typical of building web apps, which stem from the global nature of HTML, CSS, and JS.

For example, when using a new HTML class / ID, it is not possible to tell if it will conflict with an existing name used by the page.

! Important multiplies in CSS, style selectors grow out of control, and performance can suffer.

The shadow DOM fixes CSS and DOM, introducing scoped styles.

Without tools or naming conventions, you can bundle CSS with markup, hide implementation details, and create self-contained components in vanilla JavaScript.

When the browser loads a web page, among other things, it transforms the HTML into a live document.

To understand the page structure, the browser parses the HTML (static text strings) into a data model (objects / nodes).

The browser preserves the HTML hierarchy by creating a tree of these nodes: the DOM, which is a live representation of a page. Unlike static HTML, the nodes produced by the browser contain properties, methods and can be manipulated by programs using JavaScript.

The Shadow DOM is simply a normal DOM with two differences:

how it is created / used
how it behaves relative to the rest of the page.

Normally, you create DOM nodes and add them as children of another element.

With Shadow DOM, you create a scoped DOM tree that is attached to the element, but separate from its actual children. This scoped subtree is called a shadow tree. The element it is attached to is its shadow host. Anything added in the shadows becomes local to the hosting element, including . This is how the shadow DOM gets the css style scope. If you want to read this content in italian, see <a href="https://www.slideshare.net/EleonoraRocchi1/lit2pdf">here</a>.