Komponentdriven webbdesign

Att läsa

• En webbkomponent är en samling tekniker som möjliggör för utvecklare att skapa återanvändbara och isolerade komponenter för webbapplikationer. Komponenten är en JS klass i vilken det används HTML, CSS och JavaScript för att skapa komponentens layout och funktionalitet. Den kan importeras och integreras i befintliga webbsidor. Vilket gör den återanvändbara, ökar modulariteten och underlättar underhåll och utveckling av webbapplikationer.
• Webbkomponenter
• Använda webbkomponenter

Att titta på

• Filezilla och Webbservern och VScode - Under kursen har du tillgång till en webbserver. Du kan ladda upp dina HTML-, JS- och eventuella PHP-filer till den med hjälp av Filezilla FTP-program. Sedan kan du besöka dem i webbläsaren för att se att de fungerar som de ska. Du har också tillgång till VSCode direkt i webbläsarfönstret, så du kan koda dina HTML-, JS- och PHP-filer direkt på webbservern. Du kan även koda lokalt på din dator och sedan ladda upp filerna hemifrån via FTP.
• Fö1 Intro Webbkomponenter - Genomgång vad är webbkomponenter? Varför använda dem? Fördelar med dem. Nyckelkoncept och begrepp. Kodexempel på hur du skapar och använder sin första webbkomponent. Callback metod för att fylla webbkomponent med data från Rest API
• Fö2 SumCalculator Webcomponent - Vi visar hur du skapar en enkel webbkomponent i JavaScript som summerar två tal. Denna komponent importeras och används som en tagg i en HTML-sida.
• Fö2_2 UserName webcomponent - Hur du sätter och hämtar attribut värde till egen gjorda webkomponent. Du använder set och get metoder för samt observedAttributes() i klassen. Visar också hur du med javascript dynamiskt skapar upp denna webbkomponent och sätter dess attribut värden.
• Fö3 Google books api webcomponent - Visar hur du skapar och använder en egengjord webbkomponent som gör ett http anrop mot googlebooks api:et med hjälp av fetch api:et. Funna böcker baserat på sökningen presenteras i som en ul lista
• Fö4 Weather webcomponent - Webbkomponent som hämtar och visar väder för viss stad. Den har attributet, city, som bestämmer vilken stad man hämtar väderdata för.
• Fö5 Customevents - Hur du i en sender webbkomponent skapar upp och dispatchar ett customevent med data i som en receiver webbkomponent ligger och lyssnar på för att hämta ut dess data.
• Fö6 Cars webcomponent - Sender - Visar hur två webbkomponenter samarbetar genom att sender komponenten skapar och dispatchar ett custom event med bil data som receivern komponenten lyssnar på för att hämta ut bil data och presentera det.
• Fö7 Cars webcomponent - Receiver - Receiver webbkomponenten ligger och lyssnar på ett customevent från sendern. När det sker så hämtar receivern ut det eventets bil data och presentera det.
• Fö8 Leaflet karta med jordbävningar - Hämta jordbävningsdata från API för att presentera det data på en karta med marker och popup med data för var jordbävningen skedd, dess magnitud samt länk till var du kan läsa mer om denna jordbävning.
• Fö10 Chart.js för att visa vin priser i ett diagram. - Lär dig använda Chart.js för att visa data i linjediagram. Ett EU API för vin priser används.
• Fö11 Chart.js Hur rendera linjediagram med vin priser för viss kategori - Försättning hur vi skapar upp själva linje diagrammet och fyller det med data så vi kan rita ut det. Visar även hur du söker efter högsta resp. lägsta priset för att presentera det.
• Fö Vue javascript ramverk - frivillig - Hur använda Vue javascript ramverk för att söka och presentera bok data från googlebooks api:et. Vi kommer att gå igenom Vue.js ramverket mer i en annan kurs men här får du en 'teaser' hur du kan använda det i en egengjord webbkomponent
• Youtube: Learn Web Components In 25 Minutes - Grunder i hur du gör webbkomponenter.
• Youtube: How to create a Web Component using Vanilla JS - Grunder i hur du gör webbkomponenter.
• Kort intro till projektarbetet - Metal for all - Kort beskrivning av Metal for all, som är ett, av de två projektarbeten du kan välja mellan.
• Kort intro till projektarbetet - Shop 'til u die - Kort beskrivning av Shop 'til u die, som är ett, av de två projektarbeten du kan välja mellan.

Övningar

• Finn en bra förklarande video på Youtube om hur man implementerar egen webbkomponent. Gör det exemplet/en som visa i videon och få den att funka.
• Skapa en enkel webbkomponent som visar ditt namn och epostadress.
• Gör om den tidigare webbkompentent så att den har två attribut namn och epost som läser dessa två attributvärden och visar namnet och eposten
• Skapa en webbkomponent med en knapp. När den klickas på visas ett slump tal mellan 1 och 100.
• Skapa en webbkomponent med en knapp. När den klickas på visas en slumpad bild.
• Gör om min sum-calculator från föreläsningsvideon så att den får med de övriga räknesätt som subtraktion, multiplikation och division.
• Gör en webkomponent för en lånekalkylator som beräknar månadskostnaden för ett lån. Använd formel för annuitetslån, där man betalar av med samma månadskostnad hela låneperioden.
• Gör två webkomponenter en sender som dispatchar ett customevent med data som den andra webkomponent en receiver lyssnar på för att plocka ut det data och presentera det.
• Gör en egen webbkomponent som hämtar data från ett API på nätet, tex Disney api, med hjälp av fetch, async och await för att presentera det på ett snyggt sätt med hjälp av Bootstrap 5.
• Gör en egen webkomponent som presenterar brott på en karta med marker och popup med hjälp av Leaflet.js ramverket. Använd polisens API om brott.
• Gör en egen webkomponent som använder Chart.js ramverk för att presentera data i valfritt diagram. Finn eget lämpligt API, eller Covid, på nätet för att hämta data som kan presenteras i ett diagram.

Inlämningar

• Görs som ett större projekt i grupp eller enskilt under vecka 43–44. Men du kan börja kolla redan nu. Se instruktioner i kursrummet under uppgifter.

Frågor och svar

Formulera ditt svar. Tryck sen på frågan för att se mitt svar. Jämför svaren. Vad för likheter och skillnander ser du? Vad saknas i mitt respektive ditt svar?

• What is the purpose of Web Components?
  The purpose of Web Components is to provide a standardized way to create reusable, encapsulated, and modular components in web development. These components are self-contained, meaning they include their own HTML, CSS, and JavaScript, and can be easily reused across different projects and pages without worrying about conflicts with other parts of the codebase.
• Why is reusing custom markup structures traditionally difficult?
  Traditional HTML, CSS, and JavaScript don't naturally provide a way to encapsulate and isolate components. This means that when you reuse a custom markup structure, there is a risk of styles or scripts conflicting with other parts of the page. For example, CSS selectors can accidentally apply styles to unintended elements, and JavaScript can inadvertently modify or interfere with other scripts or parts of the DOM.
• What are the three main technologies that Web Components consist of?
  1 Custom Elements: Define custom HTML elements with their own behavior. 2 Shadow DOM: Encapsulates styles and structure to prevent conflicts with the rest of the page. 3 HTML Templates: Define reusable, non-rendered HTML structures and slots for content insertion.
• What do Custom Elements enable developers to do?
  Developers can create their own custom HTML tags (elements) with unique names and behaviors. This means that the logic, styles, and behavior of the component are self-contained, making it easier to manage and reuse across different parts of an application or even in different projects.
• What is the Shadow DOM used for in Web Components?
  Encapsulation of Styles and Markup: Styles and markup defined within the Shadow DOM are scoped to that component only. This means that styles applied inside the Shadow DOM will not leak out and affect the global styles of the web page. Avoiding Naming Conflicts: By encapsulating the component's DOM, the Shadow DOM prevents naming conflicts. For example, if you have CSS classes or IDs inside the Shadow DOM, they won't clash with other elements in the main document. Maintaining Component Integrity: The Shadow DOM keeps the internal structure of a component hidden from the outside world. This ensures that the component's internal workings remain intact, even if the external environment changes. Creating Reusable Components: Because the Shadow DOM provides isolation, you can create reusable components without worrying about their internal styles or structure conflicting with other parts of the application.
• What is the first step in creating a web component?
  This involves creating a new class that extends from HTMLElement (or another built-in element like HTMLButtonElement), and then associating this class with a new custom tag name using the customElements.define() method.
• How do you register a new custom element?
  You register a new custom element using the CustomElementRegistry.define() method.
• What method is used to attach a shadow DOM to a custom element?
  The Element.attachShadow() method is used to attach a shadow DOM to a custom element.
• How do you define a custom element named my-custom-element?
  You define it using customElements.define('my-custom-element', MyCustomElement).
• Which lifecycle callback is called each time the custom element is added to the document?
  The connectedCallback() method is called.

Att läsa

• Jobba med projektet i grupp eller enskilt.

Att titta på

• Kort intro till projektarbetet - Metal for all - Kort beskrivning av Metal for all, som är ett, av de två projektarbeten du kan välja mellan.
• Kort intro till projektarbetet - Shop 'til u die - Kort beskrivning av Shop 'til u die, som är ett, av de två projektarbeten du kan välja mellan.

Övningar

Inlämningar

• Kom ihåg inlämning av projektet vecka 44 fredag 23:59. Online Redovisning sker vecka 45. Se instruktioner i kursrummet under uppgifter.

Frågor och svar

Formulera ditt svar. Tryck sen på frågan för att se mitt svar. Jämför svaren. Vad för likheter och skillnander ser du? Vad saknas i mitt respektive ditt svar?

Att läsa

• Online redovisning av projektuppgiften. Se schemat och projektuppgiften i kursrummet för när din/er grupp har er redovisning.

Att titta på

• Kort intro till projektarbetet - Metal for all - Kort beskrivning av Metal for all, som är ett, av de två projektarbeten du kan välja mellan.
• Kort intro till projektarbetet - Shop 'til u die - Kort beskrivning av Shop 'til u die, som är ett, av de två projektarbeten du kan välja mellan.

Övningar

Inlämningar

• Online redovisning av projektuppgiften. Se schemat och projektuppgiften i kursrummet för när din/er grupp har er redovisning.

Frågor och svar

Formulera ditt svar. Tryck sen på frågan för att se mitt svar. Jämför svaren. Vad för likheter och skillnander ser du? Vad saknas i mitt respektive ditt svar?