Hvad er det?

Dx

Designer Experience

Hvordan det føles at bygge noget

Figma

Figma

  • Components
  • Instances
  • Component Properties
  • Variants
  • Auto Layout
  • Variables
  • mv.

Lad os kigge på det...

Logo

Like + Message knapper

Story bar + item

Indlæg-container

Pofilbillede

Brugernavn (verified)

Menu-knap

Billede (karrusel)

Indlæg actions (like osv.)

Diverse (tekst, tilføj, kommentar, timestamp, osv.)

Components

D

eveloper E   perience

x

D

eveloper E   perience

x

Developer Experience

Hvordan det føles at bygge noget

Astro

Astro

Et framework, der bl.a. handler om DX

Framework

Et værktøj, der hjælper med at bygge hurtigere og smartere

Hvorfor lige Astro?

  • Det er let at komme i gang med
  • Forholdsvis lille læringskurve
  • Det er bare HTML & CSS...

Marketing-afdelingen

Lad os kigge på det...

Forbehold

Følgende er en hurtig overflyvning af Astro
— det er ikke noget, I skal kunne efter i dag

Figma

Astro

vs.

  • Components
  • Instances
  • Component Properties
  • Variants
  • Auto Layout
  • Variables
  • Components
  • Brug af component
  • Props
  • Betinget props
  • Flexbox/Grid
  • CSS Variabler

×

Components

<Button>Knap</Button>

Figma

Astro

npm create astro@latest

Components

npm create astro@latest

Components

figma

npm create astro@latest

HOME

PRODUCTS

ABOUT

Hvad adskiller dem?

npm create astro@latest

HOME

PRODUCTS

ABOUT

<Button variant="secondary">Action</Button>

secondary

primary

secondary

primary

<Button variant="secondary" />
---
const { variant } = Astro.props;
---

<button class={variant}>
  <slot />
</button>

<style>
  .secondary {
    background: transparent;
    border: 2px solid turquoise;
  }
</style>

dynamisk

skabelon

<Button variant="secondary">Knap</Button>
<Button variant="secondary">Knap</Button>

Prop

s

ertie

<Button variant="secondary">Knap</Button>

Prop

s

ertie

Component

<Button variant="secondary">Send</Button>
<button class="secondary">Send</button>

VS Code

Browser

<Button hasIcon={true}>Send</Button>
<button>
  <span>Send</span>
  <svg>...</svg>
</button>

VS Code

Browser

<Button link="/send" hasIcon={true}>Send</Button>
<a href="/send">
  <span>Send</span>
  <svg>...</svg>
</a>

VS Code

Browser

Hvis "link", skift til korrekt HTML-tag

<Button variant="primary"
        hasIcon={true}
        icon="arrow-right"
        link="/send">
  Send
</Button>
<button>
  <span>Send</span>
  <svg>...</svg>
</button>

VS Code

Browser

VS Code

Browser

<ul>
  <Card title="Animation"
        description="Learn the latest..."
        link="/animation"
  />
  <!-- flere Cards -->
</ul>
<!-- ... -->
<ul>
  <li>
    <h3>Animation</h3>
    <p>
      Learn the latest animation techniques.
    </p>
    
    <a href="/animation" class="ghost">
      Get started
    </a>
  </li>
  <!-- flere Cards -->
</ul>
<!-- ... -->

Button.astro

<li>
  <h3>{title}</h3>
  <p>
    {description}
  </p>
  
  <Button variant="ghost">Get started</Button>
</li>

Button.astro

---
import Button from "./components/Button.astro"
---

<li>
  <h3>{title}</h3>
  <p>
    {description}
  </p>
  
  <Button variant="ghost">Get started</Button>
</li>
---
import Button from "./components/Button.astro"
---

<li>
  <h3>{title}</h3>
  <p>
    {description}
  </p>
  
  <Button variant="ghost">Get started</Button>
</li>

"import"

---
import Button from "./components/Button.astro"
---

<li>
  <h3>{title}</h3>
  <p>
    {description}
  </p>
  
  <Button variant="ghost">Get started</Button>
</li>

Nested component

Lad os starte i det små...

Opdeling af HTML

Fra HTML til Astro

<header>
  <h1>Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>

<section id="services">
  <h2>Vores Services</h2>
  <div class="service">
    <h3>Service 1</h3>
    <p>Beskrivelse af service 1.</p>
  </div>
  <div class="service">
    <h3>Service 2</h3>
    <p>Beskrivelse af service 2.</p>
  </div>
  <div class="service">
    <h3>Service 3</h3>
    <p>Beskrivelse af service 3.</p>
  </div>
</section>

<footer>
  <p>© 2024 Min Side. Alle rettigheder forbeholdes.</p>
</footer>
<header>
  <h1>Velkommen til Min Side</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<header>
  <h1>Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>

<section id="services">
  <h2>Vores Services</h2>
  <div class="service">
    <h3>Service 1</h3>
    <p>Beskrivelse af service 1.</p>
  </div>
  <div class="service">
    <h3>Service 2</h3>
    <p>Beskrivelse af service 2.</p>
  </div>
  <div class="service">
    <h3>Service 3</h3>
    <p>Beskrivelse af service 3.</p>
  </div>
</section>

<footer>
  <p>© 2024 Min Side. Alle rettigheder forbeholdes.</p>
</footer>
<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>
<div class="service">
  <h3>Service 1</h3>
  <p>Beskrivelse af service 1.</p>
</div>
<section id="services">
  <h2>Vores Services</h2>
  <Service />
  <Service />
  <Service />
</section>

Fra HTML til Astro

Fra HTML til Astro

<header>
  <h1>Velkommen til Min Side</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<header>
  <h1>Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>

<section id="services">
  <h2>Vores Services</h2>
  <div class="service">
    <h3>Service 1</h3>
    <p>Beskrivelse af service 1.</p>
  </div>
  <div class="service">
    <h3>Service 2</h3>
    <p>Beskrivelse af service 2.</p>
  </div>
  <div class="service">
    <h3>Service 3</h3>
    <p>Beskrivelse af service 3.</p>
  </div>
</section>

<footer>
  <p>© 2024 Min Side. Alle rettigheder forbeholdes.</p>
</footer>
<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>
<div class="service">
  <h3>Service 1</h3>
  <p>Beskrivelse af service 1.</p>
</div>
<section id="services">
  <h2>Vores Services</h2>
  <Service />
  <Service />
  <Service />
</section>
<header>
  <h1>Velkommen til Min Side</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>
<div class="service">
  <h3>Service 1</h3>
  <p>Beskrivelse af service 1.</p>
</div>
<section id="services">
  <h2>Vores Services</h2>
  <Service />
  <Service />
  <Service />
</section>
<Layout>
  <Hero />
  <Services />
</Layout>
<header>
  <h1>Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>

<section id="services">
  <h2>Vores Services</h2>
  <div class="service">
    <h3>Service 1</h3>
    <p>Beskrivelse af service 1.</p>
  </div>
  <div class="service">
    <h3>Service 2</h3>
    <p>Beskrivelse af service 2.</p>
  </div>
  <div class="service">
    <h3>Service 3</h3>
    <p>Beskrivelse af service 3.</p>
  </div>
</section>

<footer>
  <p>© 2024 Min Side. Alle rettigheder forbeholdes.</p>
</footer>

Fra HTML til Astro

<Layout>
  <Hero />
  <Services />
</Layout>
<header>
  <h1>Heading</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="hero">
  <h2>Dette er et Hero-Image</h2>
  <p>Her er noget introduktionstekst om denne side.</p>
  <button>Lær Mere</button>
</section>

<section id="services">
  <h2>Vores Services</h2>
  <div class="service">
    <h3>Service 1</h3>
    <p>Beskrivelse af service 1.</p>
  </div>
  <div class="service">
    <h3>Service 2</h3>
    <p>Beskrivelse af service 2.</p>
  </div>
  <div class="service">
    <h3>Service 3</h3>
    <p>Beskrivelse af service 3.</p>
  </div>
</section>

<footer>
  <p>© 2024 Min Side. Alle rettigheder forbeholdes.</p>
</footer>

Fra HTML til Astro

øvelse

Fra HTML til Astro

Analyser HTML'en og identificér potentielle components (se øvelsen på Fronter)

øvelse

Fra HTML til Astro

Analyser HTML'en og identificér potentielle components (se øvelsen på Fronter)

Components

Components

Hvor ser vi components?

Header.astro

Button.astro

Footer.astro

Card.astro

CardSection.astro

Hero.astro

Opbygning

Astro-components

├── src/
    └── components/
    	└── Header.astro
    	└── CardSection.astro
    	└── 
    	└── Button.astro
    	└── Footer.astro
Card.astro

Opbygning

Astro-components

<li>
  <h3>Animation</h3>
  <p>
    Learn the latest animation techniques to create stunning motion
    design and captivate your audience.
  </p>
  <a href="/animation" class="btn" data-variant="ghost">Get started</a>
</li>
Card.astro

Opbygning

Astro-components

---
import Card from "../components/          ";
---

<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
Card.astro

Konvention: Samme navn

Start nyt projekt

npm create astro@latest .

Start nyt projekt

npm create astro@latest .

Start nyt projekt

npm install

Hvis du kloner et eksisterende projekt

Astro & DX

By Dannie Vinther

Astro & DX

  • 52

More from Dannie Vinther