Дено

Fresh — это веб-фреймворк, работающий на основе Deno (произносится как «ди-но»). Fresh предлагает множество улучшений по сравнению с ближайшими конкурентами, включая архитектуру островов и несуществующий шаг сборки.

Архитектура островов направлена ​​​​на то, чтобы отправлять в браузер некоторый HTML-код, а также javascript только для необходимых областей страницы.

Думайте об островах как о «компонентах» на HTML-странице. Интерактивные острова или компоненты хранятся в папке островов, а статические острова или компоненты обычно хранятся в другом каталоге, например в папке компонентов.

Без какого-либо javascript браузер отправляется:

Из основного блока кода:

Это может быть пример интерактивного острова или компонента:

export default function Counter(props: CounterProps) {
  const [count, setCount]= useState(props.start);
  
  return(
  <div>
    <button onClick(()=> {setCount(count+ 1)})>Increase</button>
  </div>
  )
}

Если вышеперечисленное отправлено, браузер теперь отправляется:

Вышеизложенное происходит из следующего кода:

Надеюсь, это было небольшое введение в концепцию выборочной доставки javascript в браузер при сохранении других аспектов страницы в виде отображаемого html. Это помогает улучшить время загрузки и позволяет отображать контент без необходимости «рендеринга» с помощью javascript.