Skip to content

Latest commit

 

History

History
947 lines (688 loc) · 39.8 KB

slides.md

File metadata and controls

947 lines (688 loc) · 39.8 KB
layout highlighter css colorSchema transition mdc glowSeed title
center
shiki
unocss
dark
fade-out
true
4
The Progressive Path

{.w-30.mt--10.mb-5}

layout: intro class: pl-40 glowSeed: 14

Anthony Fu

Core team member of Nuxt, Vue, and Vite.
Creator of VueUse, Slidev, Vitest, UnoCSS.
Working at NuxtLabs.

layout: cover title: Anthony's Roads to Open Source

Anthony's Roads to Open Source 2/n
The Progressive Path

Vue Amsterdam
Feb. 29th 2024

glowX: 100 glowY: 80

Previous Episode{.op50.mb-2}

The Set Theory

Recordings on antfu.me

layout: center class: text-center glowX: 50 glowY: 100

What is a Tool?

A tool should help you get things done faster and/or easier

glow: right class: text-center clicks: 5 title: What Makes a Good Tool?

What Makes a Good Tool?

General & Useful

class: text-2xl glow: right title: Make things easier!

Make things Easier!

Cost of Using a Tool
Cost of Discovering
Common needs, easy to find
Cost of Learning
Easy to understand and get started
Price
Usually free in Open Source! 💛
Cost of Adoption
Provide integrations, extensibility

glow: bottom

What is Progressive?

The "Stairs" to make things easier to approach

glowX: 50 glowY: 130 class: flex flex-col items-center justify-center title: Vue

https://vuejs.org

The Progressive
JavaScript Framework

"A framework that can grow with you and adapt to your needs."

Progressive on Integrations

Vue offers multiple ways to use, for different level of integrations:

  • CDN without build tools

  • As Web Components

  • Single-page application (SPA)

  • Static site generation (SSG)

  • Server-side rendering (SSR)

  • Native targeting

  • Vue Vapor Mode Coming soon

layout: center class: text-center title: Levels of Integrations

Levels of Integrations

Cover different scenarios, coexist with other techs, easy to adopt

glowX: 50 glowY: 130 class: flex flex-col items-center justify-center title: Nuxt

https://nuxt.com

The Intuitive
Vue Framework

"To make web development intuitive and performant with a great Developer Experience"

glow: bottom

Progressive on Onboarding

This is all you need to start with Nuxt:
package.json
app.vue 
{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build"
  },
  "devDependencies": {
    "nuxt": "^3.10.0"
  }
}
<script setup>
const msg = ref('Hello, Nuxt!')
</script>

<template>
  <h1>{{ msg }}</h1>
</template>
Intuitive - Minimal knowledge required, and easy to discover new features

Progressive on Features

Starts minimal and grows with users:
Have some components?
Put them in components/ and use anywhere
Need routing?
Create a pages/ directory and Vue router is set up for you.
Deploy your site?
It Just works™ with zero-config powered by Nitro
Need some server logic?
Create a server/api/ directory to make serverless endpoints.
Want TypeScript?
Oh, you can just use it!
PWA, SEO, i18n, RSS, etc?
We have great modules ecosystem to use in a few clicks.
Curious about more?
We have
Nuxt DevTools to inspect and analyze the internals

class: grid grid-cols-[auto_640px] gap-4 items-center justify-center glow: left

Nuxt DevTools
Help features discovery
and understanding

{.my--10}

class: grid grid-cols-[640px_auto] gap-6 items-center justify-center glow: right

{.my--10}

Nuxt Tutorial
Help onboarding
and learning

layout: center class: text-center

Grow with Users

Expose concepts & powers progressively

glowHue: 100 class: flex flex-col items-center justify-center

https://vitejs.dev

Next Generation
Frontend Tooling

"We work closely with projects in the ecosystem to minimize regressions on each release"

glowHue: 90 glow: top-right class: flex items-center justify-center

glowHue: 60 glow: right class: flex flex-col items-start justify-center

A Typical Vite Plugin

package.json 
{
  // ...
  "peerDependencies": {
    "vite": "^2.9.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
  }
}
The plugin keeps working from Vite 2 to Vite 5 3 years in between

glow: right

Progressive on Breaking Changes

Two ways of make breaking changes easier

v1.0
v1.x
v2.0
v3.0
Forward Compatibility
  • Compatible with the [future]{.text-yellow.font-bold} versions
  • Introduce the experimental or future flags
  • Make future behavior opt-in today
  • (e.g. @vue/composition-api, vue v2.7, Nuxt Bridge)
Backward Compatibility
  • Compatible with the [previous]{.text-blue.font-bold} versions
  • Deprecate first, print warnings, remove later
  • (e.g. @vue/compat, @nuxt/kit)

layout: center class: text-center glowX: 50 glowY: 0

Allow Coexistence

Provide "middle stages" for migration, coexist of legacy & new

glow: right

Recap

Progressive on
Onboarding
Making it easy to understand and get started
Progressive on
Integrations
Fits in different scenarios, easy to adopt
Progressive on
Features
Starts minimal and grows with users
Progressive on
Breaking Changes
Provide middle stages for migration

layout: center class: text-center glowX: 50 glowY: 0

Progressive Paths

Enables users the capability of "Divide and Conquer"

layout: intro class: text-center pb-5 glowX: 50 glowY: 120

Thank you!

Slides on antfu.me