Что за программа астро

Astro — универсальный веб-фреймворк, разработанный для создания быстрых сайтов с большим количеством контента. К ним относятся большинство маркетинговых и издательских сайтов, сайты документации, блоги, портфолио и ряд сайтов электронной коммерции.

При этом Astro не вполне подходит для создания некоторых сложных приложений, например информационных панелей администратора, электронных почтовых ящиков, социальных сетей, планировщиков и т.д.

Astro использует рендеринг на стороне сервера и является фреймворком для разработки многостраничных приложений (аббр. MPA). Сайт MPA состоит из нескольких HTML-страниц, написанных с помощью HTML, CSS и JavaScript (или TypeScript). MPA отличаются от одностраничных приложений (аббр. SPA), которые задействуют рендеринг на стороне клиента и динамически отрисовывают каждый маршрут непосредственно в браузере.

Astro превосходит SPA по скорости начальной загрузки и краткому времени до интерактивности (аббр. TTI). TTI измеряет время, требуемое странице для достижения полной интерактивности.

Какую астрологическую программу использовать?

Astro не зависит от UI. Официально поддерживает React, Preact, Solid, Svelte, Vue и Lit. На одной странице может мирно сосуществовать код, написанный разными фреймворками.

Не веб-фреймворк, а просто чудо какое-то!

Посмотрим, как он работает.

Установка и запуск Astro

Astro требует версии ^14.18.0 || >=16.12.0 Node.js. Для установки выполняем следующую команду:

Проект создается в папке my-astro-site . package.json находится в корневом каталоге:

package.json включает 2 типа зависимостей: dependencies и devDependencies . В Astro они преимущественно работают схожим образом, поскольку оба типа востребованы во время сборки. Для запуска проекта рекомендуется разместить все зависимости в dependencies , а devDependencies использовать только для особых потребностей.

При выборе базового шаблона Just the basics в процессе установки предоставляется только одна зависимость astro (строка 14 ).

Выполняем команду yarn astro и получаем перечень всех команд Astro:

% yarn astro
yarn run v1.22.17
$ astroastro v1.5.2 Build faster websites. (Сборка быстрых сайтов) astro [command] [. flags]Commands (Команды)
add Add an integration. (Добавить интеграцию)
build Build your project and write it to disk. (Создать проект и записать на диск)
check Check your project for errors. (Проверить проект на наличие ошибок)
dev Start the development server. (Запустить сервер разработки)
docs Open documentation in your web browser. (Открыть документацию в веб-браузере)
preview Preview your build locally. (Предварительно просмотреть сборку локально)
telemetry Configure telemetry settings. (Настроить параметры телеметрии)Global Flags (Глобальные флаги)
—config Specify your config file. (Указать конфигурационный файл)
—root Specify your project root folder. (Указать корневой каталог проекта)
—verbose Enable verbose logging. (Разрешить подробное логирование)

Профессиональная АСТРОЛОГИЧЕСКАЯ ПРОГРАММА и ее функционал | Астролог Елена Негрей

—silent Disable all logging. (Запретить логирование)
—version Show the version number and exit. (Показать номер версии и выйти)
—help Show this help message. (Показать справочное сообщение) ✨ Done in 1.21s. (Выполнено за 1,21 сек)

Запускаем Astro в режиме dev :

% yarn dev
yarn run v1.22.17
$ astro dev
astro v1.5.0 started in 52ms

┃ Local http://127.0.0.1:3000/
┃ Network use —host to expose

Сайт по умолчанию доступен по адресу http://localhost:3000/ :

Для основных IDE существуют плагины Astro. Ниже представлено расширение VS Code для файлов .astro , которое поддерживает синтаксическое и семантическое выделение, диагностические сообщения, быстрые исправления, сортировку импортов, форматирование кода и т.д.

Исходный каталог Astro

После установки каталог my-astro-site выглядит следующим образом:

my-astro-site
├── README.md
├── public
│ └── favicon.svg
├── src
│ ├── components
│ ├── layouts
│ ├── pages
│ └── env.d.ts
├── astro.config.mjs
├── package.json
├── tsconfig.json
└── .gitignore

• my-astro-site — каталог, содержащий веб-фреймворк Astro.
• README.md описывает структуру проекта и скрипты.
• public — каталог для статических активов (англ. assets), включая favicon.svg .
• src/components — рекомендуемый каталог для компонентов Astro.
• src/layouts — рекомендуемый каталог для создания переиспользуемых шаблонов страниц.
• src/pages обеспечивает маршрутизацию для страниц Astro на основе каталогов. Каждый файл в каталоге src/pages становится конечной точкой сайта.
• src/env.d.ts ссылается на объявления типов TypeScript, относящихся к проекту Astro.
• astro.config.mjs — конфигурационный файл Astro.
• tsconfig.json — конфигурационный файл TypeScript.

Компоненты Astro

Компоненты — основные строительные блоки проекта Astro. Они обрабатывают только HTML-шаблоны без этапа выполнения на стороне клиента.

Синтаксис компонента Astro представляет собой расширенную версию HTML по аналогии с JSX. Все компоненты имеют расширение файла .astro . Во время сборки они отображаются в HTML. Компонент Astro состоит из 2 основных частей: скрипта и шаблона.

Скрипт компонента напоминает React, написанный на JavaScript или TypeScript. Он может импортировать другие компоненты Astro, компоненты фреймворка и данные JSON, получать содержимое из API или базы данных, а также создавать переменные с возможностью отсылки к ним в шаблоне компонента.

Astro задействует разграничительные метки в коде ( — ) для связывания начала и конца скрипта компонента.

Шаблон компонента находится под скриптом. Он определяет HTML-вывод компонента. Шаблон поддерживает выражения JavaScript, импорт компонентов и специальные директивы Astro. Данные и значения, определяемые в скрипте, могут использоваться в шаблоне для создания динамически генерируемого HTML.

По умолчанию каталог src/components включает один компонент — Card.astro :

components
└── Card.astro

Card — это компонент с пропсами (англ. props): href , title и body . При нажатии на компонент заголовка title страница перенаправляется к href :

Ниже представлен компонент src/components/Card.astro :

Понимание архитектуры Astro островов

В настоящее время мы все привыкли видеть появление новых фреймворков, которые обещают произвести революцию в сфере веб‑разработки. Тем не менее, чаще всего мы остаемся привязанными к конкретной библиотеке пользовательского интерфейса (React, Vue, Svelte и т. д.) для определения наших компонентов и создания пользовательского опыта.

На этот раз ситуация поменялась! Используя возможности Vite.js, мы получили Astro: агностический фреймворк, который может работать как SSG (генератор статических сайтов) и обеспечивать SSR (рендеринг на стороне сервера).

Используя систему плагинов Astro, мы можем создавать и улучшать наши сайты так, как нам хочется, и даже объединять различные библиотеки пользовательского интерфейса в одном проекте.

В этом посте мы узнаем об Astro островах и о том, как они работают под капотом, чтобы обеспечить такую функциональность.

Астро 101: краткое введение

Если вы посмотрите определение на официальном сайте компании, то обнаружите следующее:

Astro — это универсальный (все‑в-одном) веб‑фреймворк для создания быстрых, ориентированных на контент веб‑сайтов.

Недавно они выпустили первый стабильный релиз, обозначив фреймворк как готовый к продакшну, что является важной вехой для новых фреймворков. Веб‑сообщество отреагировало очень позитивно, и с каждым днем мы видим все больше проектов, поставляемых с фронтендами Astro.

Astro обладает множеством замечательных возможностей для удобства разработчиков и пользователей. Я рекомендую ознакомиться с этой статьей LogRocket для более общего обзора Astro.

По моему личному мнению, ключевым отличием Astro от других фреймворков является его островная архитектура. Эта концепция была впервые описана в 2019 году Кэти Сайлор‑Миллер (Katie Sylor‑Miller) и расширена позже в этом посте создателем Preact Джейсоном Миллером (Jason Miller).

Что такое Astro острова?

Термин «Astro остров» относится к интерактивному компоненту пользовательского интерфейса на статичной HTML‑странице. На странице может существовать несколько островов, и каждый из них всегда отображается изолированно. Это означает, что каждый остров может использовать любой фреймворк пользовательского интерфейса или даже обычный код Astro, наряду с другими островами на странице.

Важно отметить, что по умолчанию Astro генерирует любой сайт без JavaScript на стороне клиента. Каждый раз, когда мы рендерим остров на странице, Astro заранее автоматически отрендерит его в HTML, а затем удалит весь JavaScript. Это обеспечивает быстродействие каждого сайта, благодаря удалению всего неиспользуемого JavaScript со страницы.

Возьмем в качестве примера имплементацию компонента Counter, выполненного в React. При первом рендеринге он покажет кнопку с текстом «Counter: 0», и каждый раз, когда пользователь кликает на нее, счетчик будет увеличиваться на 1.

// src/components/Counter.tsx import < useState >from ‘react’; const Counter = () => < const [count, setCounter] = useState(0); return ( setCounter((number) => number + 1)>> Counter: ); >; export default Counter;

Затем выполним рендеринг этого компонента в Astro.

// src/pages/index.astro — import Counter from ‘../components/Counter’; —

Этот код отобразит кнопку, но поскольку JavaScript во время сборки будет удален с помощью Astro, пользователь не сможет инкрементировать счетчик. Когда мы хотим сделать наше приложение интерактивным, следует действовать явно, используя клиентские директивы (рассмотрим их позже).

Этот процесс называется частичной или выборочной гидратацией. По сути, это означает доставку любого кода фреймворка или среды выполнения, которые необходимы для поддержки динамических требований компонента к рантайму. Такие вещи, как изменение состояния и интерактивность, являются наглядными примерами.

// src/pages/index.astro — import Counter from ‘../components/Counter.jsx’; —

Одним из преимуществ Astro островов, помимо акцента на максимальное облегчение вашего приложения, является то, что каждый из островов загружается параллельно. Вы даже можете указать стратегию загрузки для каждого острова в отдельности с помощью клиентских директив! Это означает, что мы полностью контролируем, как и когда загружаются ассеты для клиента, и обеспечиваем наилучший опыт, на который способны.

Чем Astro острова отличаются от остальных?

Как я уже упоминал в начале этого поста, команда Astro не создавала архитектуру островов. Эта же техника реализована во многих фреймворках и поставляется в виде отдельных библиотек.

Отличным примером является is-land (от команды 11ty), который обеспечивает дополнительные условия при гидратации компонента (они же клиентские директивы), такие как:

• on:interaction
• on:save-data

Он также позволяет указать резервный сценарий (отступление), когда компонент еще не гидратирован:

Hydrate the island

This content is before hydration.

My component content after hydration

Несмотря на некоторые различия в синтаксисе между фреймворками, основная идея заключается в том, что каждый из них в конечном итоге реализует частичную гидратацию. То, как Astro компонует пользовательский интерфейс, гарантирует, что требования клиента всегда определяют стратегию гидратации, что необязательно в других островных фреймворках, таких как is-land.

Если вы хотите узнать больше об архитектуре островов, я нашел на GitHub awesome-islands как отличный ресурс, который организует много контента, связанного с архитектурой островов.

Все директивы клиента Astro

Директива — это атрибут компонента, который указывает Astro, как он [компонент] должен быть отображен. На момент написания этой статьи Astro поддерживает в общей сложности пять различных клиентских директив. Это число может измениться по мере добавления новых возможностей.

Предположим, что мы хотим отрендерить наш компонент под названием MyComponent , и в зависимости от используемой клиентской директивы можем изменить способ взаимодействия с пользователем:

• : Гидратирует JavaScript компонент сразу после загрузки страницы
• : Гидратирует JavaScript компонент после завершения начальной загрузки страницы и возникновения события requestIdleCallback
• : Гидратирует JavaScript компонент, как только компонент попадает в область просмотра пользователя. Здесь используется внутренний IntersectionObserver для отслеживания видимости
• /> : Гидратирует JavaScript компонент при выполнении определенного медиа-запроса CSS
• /> : Пропускает серверный рендеринг HTML и осуществляет рендеринг только на клиенте. Компонент будет пропущен во время сборки, что делает его полезным для компонентов, которые полностью зависят от API на стороне клиента.

Работа с клиентскими директивами

Чтобы проиллюстрировать возможности клиентских директив, я создал небольшой Astro-проект, в котором осуществляю рендеринг того же компонента Counter, показанного выше, используя различные клиентские директивы, чтобы каждый мог попробовать их все в одном месте. Не стесняйтесь посмотреть лайв-приложение на Netlify.

Ниже приведен весь код страницы, изображенной на скриншоте выше. Содержимое страницы представляет собой один и тот же компонент Counter , который рендерится в общей сложности шесть раз: сначала без указания какой-либо клиентской директивы (компонент вообще не интерактивен), а потом остальное с использованием всех различных клиентских директив, которые мы рассмотрели выше.

// src/pages/index.astro — import Layout from ‘../layouts/Layout.astro’; import Counter from ‘../components/Counter’; —

Welcome to Astro

no directive

No JS, no interactive

client:load

Loads JS as soon as possible

client:idle

Loads JS when rendering is over

client:visible

Loads JS when the button is visible to the user

client:media

Loads JS when the media query (min-width: 680px) is valid

client:only

Loads JS only in client (No SSR)

Весь исходный код можно найти в этом репозитории GitHub. Я настоятельно рекомендую форкнуть проект и запустить его локально, чтобы в полной мере понять, как клиентские директивы могут изменить поведение вашего приложения.

Заключительные слова

Я рассматриваю Astro как совершенно новую, свежую основу, способную создавать суперлегкие веб-сайты с использованием нулевого кода JavaScript. Он заставляет нас лучше понимать, когда JavaScript действительно необходим в этой тяжелой экосистеме, и в каких случаях мы имеем возможность отослать меньше Кбайт нашим клиентам.

Еще одним большим преимуществом Astro является то, что он не зависит от пользовательского интерфейса. Это означает, что вы можете использовать свою собственную структуру пользовательского интерфейса (BYOF)! React, Preact, Solid, Svelte, Vue и Lit официально поддерживаются в Astro. Вы даже можете смешивать и сочетать различные фреймворки на одной странице, что облегчает будущую миграцию и предотвращает привязку проекта к одному фреймворку.

Приглашаем всех желающих на открытое занятие, на котором рассмотрим хорошие практики обработки форм со сложным состоянием. Записаться можно на странице онлайн-курса «React.js Developer».

• Блог компании OTUS
• ReactJS

Источник: habr.com

ASTRO File Manager 8.6.1

ASTRO File Manager для Android – файловый менеджер, позволяющий комфортно работать с памятью смартфона или планшета и создавать резервные копии программ. Есть возможность выбора типа просмотра и работы с файлами (по одному или пакетно).

Возможности ASTRO File Manager

• выполнение стандартных операций с файлами (перемещение, копирование, удаление и прочие);
• работа в локальной сети в облачных хранилищах (поддерживаются все основные облачные сервисы);
• поиск по памяти устройства;
• просмотр изображений;
• менеджер программ и задач.

Особенности приложения

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

Преимущества

• работа с архивами;
• встроенный проигрыватель мультимедийных файлов.

Источник: biblsoft.com