Astro. Теперь сайты моментальные. Быстрый курс
HTML-код
- Опубликовано: 22 сен 2022
- Подкаст тут: t.me/js_by_vladilen/515
Исходный код: github.com/vladilenm/astro-cc
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Result School:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.school.it
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
Astro - Быстрый курс
Новый ролик на канале про фреймворк, позволяющий уже создавать сайты на Islands Architecture.
С помощью Astro вы сможете создавать сайты, которые открываются во много раз быстрее, чем, например на Next.js без потери функционала.
Так же, используя Astro вы можете писать компоненты на React, Preact, Svelte, Vue и другие компоненто-ориентированные технологии
Потому представляю вам ознакомительный курс, все подробности в видео.
Приятного просмотра!
Ознакомьтесь с тем, что такое Islands Architecture в моем подкасте: t.me/js_by_vladilen/515
На следующей неделе выпущу еще один ролик на эту тему, но уже с другим фреймворком
Приятного просмотра!
Хех, опять новый фреймворк в javaScript
@@user-vb6xh6yj4h Будет еще один)
SSG для интернет магазина худший пример. Обычно в магазине около 1000-10000 товаров и представь что будет у тебя в билде. 10000 сгенерированных файлов. Кейс который ты показал идеально ложится на SSR. Как обычно увидел технологию запилил видос, а подумать зачем....
@@evgeny_mdr ну и личный кабинет :)
@@evgeny_mdr этот фреймворк отлично подойдёт для миллионов маленьких бизнесов с возможностью дешёвого и быстрого хостинга в облаке (зачастую бесплатного), а так же для миллионов бложиков и конечно же для миллионов лендосов.
"Жизнь не заканчивается..." хотел пошутить, но похоже в этой фразе сегодня уже и так много троллинга 😄
Спасибо за видео!!!! Как всегда топ!!!! Хотелось бы более подробного видео с этой технологией!!! Круть🔥🔥🔥
Спасибо. Очень ждал этот выпуск.
Супер! Спасибо за качественый контент. В новом году желаю вам поменьше соседей, которые делают ремонт ;-)
Ух! Крутая технология! Спасибо за гайд.
очень понравился framework, буду разбираться с стором и динамическими рутами. Не верю, что генерировать 100500+ папок - это его предназначение.
Большое спасибо за информацию Владилен
Спасибо за прекрасный Гайд.
Плюс ты еще и мотивируешь делиться своим опытом.
Спасибо за обзор крутой технологии! Очень крутая штука!
Владилен, спасибо за ролик. С первого раза все понятно про новый продукт. Про статический билд, я так понимаю, затравка на комментарии)) В жизни не пригоден в том динамическом контексте, что показан в ролике
Наконец то качественный контент)
наконец прикладной видос
отлично! спасибо!
В конце видео показана вся несостоятельность этого фреймворка. Он при билде генерирует уже готовые страницы и они никак не изменятся, если не заребилдить весь проект заново! А в таких вот магазинах данные меняются часто. Это и количество доступного товара, и сами товары добавляются/удаляются. Фреймворк абсолютно не годится для более-менее живых сайтов. Разве что лендинги да визитки на нём клепать.
Плюс сама идея голого HTML как основы - не очень. Потому что теряется плавность, которую может дать JS при смене страниц, например, при подгрузке товара, если сервер тормозит и т.д. Мне кажется, будущее всё-таки за SPA-подобными сайтами (с SSR). Сайты всё больше будут похожими на приложения, если говорить о каких-то магазинах и соцсетях. Если же надо просто инфу выложить типа википедии или визитки - тут, конечно, этот фреймворк, наверное, будет лучше.
Извиняюсь, конечно, за негатив, но не стоит ставить его в один ряд с Sveltekit, Next и прочими. Как по мне, он мало, на что годится.
Почитав комментарий понял принцип работы ) а то смотрю на fetch и не могу понять как это только html)
рекомендую ознакомиться с headless CMS
@@arthurshaidullin7981 так все проекты и так работают по похожему принципу. Тот же SvelteKit создаёт своё API автоматически, и его потом легко прикрутить к любому интерфейсу.
Владилен Безусловно Минин
А если серьезно, Спасибо за такой качественный контент!
Спасибо :)
Лайк не глядя
Т.е. каждое изменение/добавление товара нужно прогонять через pipeline с джобой build? Или есть подход как в next типа getStaticProps etc?
Годнота!
Даёшь курс Фулстек с Астро!
Крутая технология, но когда вспоминаю сколько картинок будет на сайте и какой у них вес, то задумываюсь насколько сильно нужна эта борьба за размер js бандла.
если речь идет об оптимизации, нуэно хорошо подумать над код сплиттингом. Все очень сильно влияет на оптимизацию
Aws для картинок как вариант
@@dmitrykulakov662 никогда не пользовался этой технологией. Видео у западных блогеров. В России это работает?
@@biLLie_wiLLie Пардон, я на пару сотен километров западнее живу. Не знаю как у вас обстоят дела..
так картинки грузятся быстро, а js бандлы еще парсить надо, поэтому чем меньше js у клиента тем лучше
Круто, всё что нужно, Astro + Sanity + Netlify вообще огонь получается!
Спасибо Владилен )))
Netlify работает в России? Западные блогеры его часто упоминают)
получается там где нам нужна только статика, мыполучим только статику, а там где нам нужен интерактив, мы получим то же, что и раньше портянку js-а необходимого для работы этого интерактива
В astro есть кстати ещё и SSR, так что штука крайне крутая. В ближайшие года два станет эталоном для разработки. Именно сайтов, а не приложений.
Эх, если бы еще проекты были на этих новых технологиях...
💯💯💯
вопрос как работает сео с динамическими компонентами астро?
Интересно, но что будет сгенерированно если нужно i18n на сайте? все 100500 продуктов на всех языках? а если в хидере выводить имя пользователя нужно? то что еще и все варианты юзер + продукт + язык ?
В целом неплохо, но Astro пока сырая тема. Я думаю в будущем можно будет сделать что-то интересное. Спасибо за видео.
А если мы получаем всегда разное кол-во продуктов(страниц), сначала их 20 потом 10,15 30 итд. После того как билд сгенерил релевантный на текущий момент кол-во статических страниц, будет ли меняться (добавляться/удалятся) кол-во этих же страниц динамически уже после билда? Так как сейчас похоже больше на статик генератор с каким то встроеным intersection observer и что очень напоминает некстовский getStaticProps
Вы единственный кто задал этот вопрос, у меня тоже подозрение что мы делаем бандл для github pages без серверного интерактива , аля индексируемый SPA.
Есть ещё Gatsby js но там более наворочено и через graphql.
Нашел, для полного ssr рендеринга надо возвращать объект return new Response(....
аля express шаблонтзатор.
А форму обратной связи тоже через компонент реализовывать или есть что то готовое?
интересно конечно, то как происходит оптимизация JS для клиента и что можно юзать разные компоненты разных JS фрайморков. Но вот режим build расстраивает, что всё таки это генерация статики впрямую. Тот тут если не брать в расчёт оптимизацию клиентского JS, php + кэш будет намного лучше и производительнее, не говоря уже про запросы на API.
FW хорош для быстро сборки небольших сайтов, которые обновляются редко.
клевая футболка)
Красава на позитиве👍
Владилен, сделай пожалуйста новый урок по Vue 3
он мертв
@@bossmusa9075 обоснуй
курс есть у него.можно купить
@@bossmusa9075 у тебя мозг мертв(( а вуй 3 как раз жив
Привет, Владилен! Что тебе больше понравилось: Fresh или Astro?
мда, ну кроме загрузки по видимости пока не торкнуло, next все же next - закончу изучать тебя)
спасибо за видео!
как раз недавно смотрел туториал по созданию сайта-портфолио на astro, интересно посмотреть на твоё видение.
немного душнильский вопрос - 4k не планируется? :)
Привет, а можешь поделиться ссылкой на туториал?
ЛАЙК ОТ СЕООНЛИ!
получается, на каждое изменение в БД нужно заново билдить фронтенд?
Вроде в документации есть что то про Dynamic routes
Мне тоже интересно. Пока тут было только отображение данных напрямую по API, а как оно работает с сервером? Как добавлять итемы в базу? Что при этом будет происходить с бандлом?
а может кто то подсказать есть ли возможность добавить какую то маленькую админку на сайт на астро?
напрмер у меня есть лендинг в котором мне часто нужно будет менять дату
и я хочу сделать админку с помощю которй можно будет менять эту дату без необходимости заново собирать проект и заливать на хост
Cпасибо за хорошее видео по Astro. Cердечно.
Astro супер, но почему то при проверке сайта не видмтся кодировка utf-8. Хотя она есть , может кто сталкивался?
Владилен, спасибо, очень интересно!
Любопытно что ты показал, в качестве примера, что-то типа интернет-магазина, но правильно ли я понял, что если у меня, допустим, большой магазин с 10 тыс наименований, которые обновляются/добавляются по несколько раз в день, то использовать для него Astro это не очень хорошая идея? Если я все понял правильно, то в данном случае Astro создаст 10+ тыс статичных страниц с каждым товаром и при обновлении любого из них придется ребилдить сайт.
Пока что, для себя, вижу использование Astro для каких-то более-менее статичных сайтов для которых не требуется постоянная связь с каким-нибудь API и обновление данных из этого API.
Тоже смутило, что на каждый продукт по странице создаётся. Но можно, думаю, передавать id через url-параметр вместо создания страницы для каждого
Мне кажется, было бы неплохо делать на astro лэндосы или главные станицы сайтов (дабы скоростью загрузки произвести вау эффект), а все оствальные страницы на next'е. Геморно, согласен, но мне кажется это еди нственный способ оправдать написание кода на astro. Хотя перформанс всегда штука крутая
@@GreatVolcano Перформанс лэндоса?! Ну и проблемы у вас )))
@@GreatVolcano astro и в ssr может при необходимости
Объясните пожалуйста новичку, а если в api данные изменяться будут, как тогда обрабатывать их и выводить контент, не билдить же каждый раз по новой
Айленд Аркитекча. И громкость одинаковую желательно ставить по ролику.
Спасибо за видео, но у меня появился вопрос, оно собрала 20 файлов, но контент то грузится с бд. А если я в бд добавлю 21 продукт?
я правильно понимаю что астро только для SSR?
Подними уже своё простое апи для зрителей, Владилен. Чтобы не отвлекаться на такие мелкие ошибки. И новичков не мучать с непонятными для них пока ошибками.
А есть ли роутинг без перезагрузки страницы в astro
Здравствуйте Владилен можно обзор на Fresh deno
Спасибо, Владлен. А без сервера можно файлы из dist запускать в браузере? Предоставляет ли Astro такую настройку?
Интересно а минусы есть у этой технологии?
Владилен, очень люблю твой контент, смотрю с того момента как купил твои курсы по реакту и реаут нативу. Спасибо тебе. Ты классный. Береги себя. Правда в этот раз смотреть видео не буду, а просто поставлю лайк. Руки опущены из за дерьма, в котором мы сейчас, но не сдаемся НЕТ ВОЙНЕ!
Ля Глэк
Скажи "нет войне" врагу, который придёт тебя убивать, или грабителю, которые захочет отнять все твои ресурсы. Пацифисты - это не мужчины. Тупо никчёмные куски плоти.
@@-dubok- Да, украина же пришла тебя убивать правильно? Может и беларусы хотят напасть?
@@-dubok- а этот враг это вообще кто? Самому интересно, все думал что в 21 веке, до старых путей уже некому дела, нет что-ли?
@@androidgames1602 Запад, который уже давно жаждет заполучить наши ресурсы, в нас самих уничтожить как аборигенов. Учи новую историю и читай понимающих в политике людей вроде Фурсова.
Прикольно - Да.
Использовал бы я это в проектах - Нет.
Объясню почему: SPA ты грузишь 1 раз, да, на входе могут быть 138 кб, но потом ты по lazy грузишь другие странички по 1-3кб, чем фулл html страницы по 5-10кб.
На счёт скорости ну в SPA тебе не кто не мешает сделать prerender такой-же как в astro, но вот только prerender отработает 1 раз на н1 страничку, а дальше уже всё по lazy будет.
В общем велик который вряд ли стрельнет
Спасибо за видео :)
Вот смотрю видео, начинаю хотеть курс купить.
Захожу на сайт, желание купить отпадает, когда вся верстка плывет, это же жесть
Нет бы изменить концепцию html. Они создают все новые костыли.
Добро пожаловать в Кыргызстан - это название телеграмм чата для помощи тем кто переезжает в Кыргызстан.
Владилен, привет! Во-первых, спасибо что познакомил с классной технологией. А во-вторых, есть вопрос. Как использовать astro, если, например (на примере этого примера😅), добавляется новый продукт? Т.е. когда бы делаем build, у нас получается статическая сборка, которая заранее делает fetch и если данные на внешнем ресурсе изменились, как подтянуть их динамически? Как будет работать тот же webSocket? Нипанятна🤔
Привет Петр. В целом, динамическое обновление не задача какого-то фронтенд фреймворка. Это решается с nginx например, если node сервер, таких проблем не будет.
Да, в том же next, задачу решает getStaticPaths, с гетом всех возможных кейсов, но такая проблема, когда используется nginx, с node все проще.
@@ammoney159 фсмысле не задача фронтенд фреймворка? Клиент заходит в магазин, хочет кьюФоне 4000, а его по факту уже нет. Или вотпрямпятьминутназад купили последний.
Может я неправильно вас понял? Или вы меня?🙃
@@n0sfer Смотри, если добавляют новые товары или удаляют, все работает ок, без доп. манипуляции с node сервером. Если nginx, сложно
@@ammoney159а в чем идея с node js? Можете подсказать где это посмотреть?
Почему tilewind, если он tailwind?
Для простого проекта одностраничника с реактивным взаимодействием что лучше использовать\изучить начинающему? Astro\Svelte\React?
Svelte
Объясните пожалуйста, в чем разница между островами и компонентами и что в каком случае использовать?
как я понял, компонентный подход фреймворков типа реакта полностью завязан на JS, поэтому юзер уже на старте вдогонку получает огромную дозу джаваскрипта внутривенно, в то время как островной подход - это минимум JS'a. Статический HTML - вода, и уже в этой воде располагаются островки - динамические компоненты, которые подгружают JS только тогда, когда это будет нужно.
@@kootaru_ один раз загрузить весь JS и дальше использовать кэш разве не лучше, чем делать постоянные подгрузки, особенно если интернет хреновый, в каком-нибудь зажопинске?
Здравствуйте.Что думаете о vite
Он под капотом Astro и это классный инструмент
епт я бы архитектору массаж сделал, крутая штука
Я до сих пор не понимаю, уже давно есть инструмент который снимает вопросы на счет какой framework круче. Solid JS это то что делает твое приложение молниеносным.
скорость не все. Но solidjs крутой)
@@user-yw9wx4lv2w я бы сказал половина, но и комюнити подтягивается
Во-первых, спасибо за материал. Очень интересный и полезный контент.
По поводу lazy loading компонентов идея хорошая, но по практике она не годится для работы приложений с медленным интернетом: там проблема в долгом коннекте к ресурсам. Все-таки скрипты, стили (при условии, что это не очень объемное) и прочие легковесные чанки лучше объединить в один файл и выплюнуть на странице. Ну, это уже нюансы.
+
решается через http2
@@user-mq6cm2xd5i http2 использую. Но скорости соединения все равно недостаточно.
@@albert.bazaleev если география работы сайта довольно большая, наверное можно попробовать использовать cdn, у Яндекса такая услуга есть
@@user-mq6cm2xd5i Спасибо!:)
второй!
что лучше Astro или Фреш?
А можно узнать список всех используемых вами плагинов для VS Code?
Да, думаю в течении недели выложу в телеграм канале
@@VladilenMinin спасибо, будет очень актуально, учитывая что IDEA и WebStorm у нас всё...
@@Shadzen кряки работают
@@gothicrock221 у меня работает только до версии WS 2021.1.3 (сброс триала), есть какой то лучший вариант?
@@Shadzen я именно про кряк, по сети гуляет с активацией до 2099 года, рабочий, так что ищи и пробуй)
начиналось красиво
но прикол с билдом не догнал 🤨
Владилен, свистишь на шипящих, больно ушкам, возможно это как-то исправить технически, либо программно при рендеринге видео и звука
Такой себе SSR для Svelte
А почему preact? Реакт бы не?
Зумеры придумали рендеринг на сервере и JS виджеты для браузера 😂😂
Но если серьезно, действительно крутая штука - то недостающее звено в инфраструктуре, которого как раз не хватало в NodeJS стеке.
Что-то мне очень напомнила svelte и sveltekit. По сути я даже не понял в чем приимущества astro перед svelte. Канцептуально ничего нового ну и svelte тоже славится малым размером бандла и грузится тоже очень быстро. По сути форк svelte на первый взгляд. Единственное что astro - это типа сугубо статика, a в svelte есть и JS. В общем если есть svelte который явно навороченнее пока, то изучать astro смысла большого нет, хотя если нужно было бы то изучить его после svelte не составило бы и труда, но смыла нет в этом. Те же яйца только в профиль)))
Мне видимо одному не понятно, почему тогда сразу не писать всё в html ? Зачем так усложнять, в чем преимущество? Подключать различные файлы как компоненты можно и через gulp-file-include например.
Это типа Gatsby, только попроще?
типо того )))
А в чем прикол того что при билде все товары в статику превратились? Т.Е. если что-то добавиться в БД нужно опять билдить)))? как это работает на самом деле?
Если товар добавлися это еще ладно, а если количество товара постоянно меняется. Кто-то купил, кто-то вернул. Тут как быть?
@@ilyawebdev оу ну я не помню что там на видео, но вроде это только к шаблонам и страницам касается, ну тип есть динамика которая не гидрируется вроде
Да не в сумме крутых фишек некст лучше.
Стоит еще подумать как много контента на сайте НЕ использует JS, это единичные случаи для страниц. А там где юзается, скорее всего еще будет подтянута UI либа и на этом попытки урезать размер бандла в принципе потеряют смысл.
По опыту моих войн за UX приложений могу сказать, что куда важнее сообща сделать оптимальное API и убедиться что на бэке быстро обрабатываются запросы. Пользователь вряд ли заметит, что у него сайт загрузился на пол секунды быстрее из-за сжатия бандла, однако у него сгорит стул если на каждое его действие сайт постоянно впадает в кому на многие секунды ожидая когда же сервер даст ответ.
В общем, мое ИМХО - штука крайне ситуативная, на проде есть проблемы куда серьезнее чем размер JS файлов. Если приложение разбито на модули и юзает lazy loading, а особенно если написана собственная библиотека компонентов для своих узких задач и не подтягиваются монстры на подобии материала, то про бандл JS можно забыть, в 99% случаев будут более важные места где надо навести перфоманс. И да, еще забыл упомянуть про генерируемые сервисы на подобии того что дает nswag, проект обрастает мегабайтами JS кода. Если оно есть - бандлу уже не помочь)
Да да, то что и я хочу сказать. Тут нужно думать не как уменьшить размер бандла на 10 мгб, а блин наконец-то перестать использовать всякие уродские библиотеки, как для css та и для js. К примеру tailwind, material ui и т.д. Перестать использовать мегатонные js библиотеки только для того чтобы использовать одну фичу. Лучше думать что ты запихиваешь в проект вместо того чтобы питаться сжать его.
preact?)
Именно
@@VladilenMinin круто ✌️☺️
Так ты не уходишь с youtube?
Видос ты тот явно не смотрел)
Второй
+
Лол. Только неделю как микросайт на нём сделал.
Т.е. цену поменял и весь проект перебилдивать? А комментарий если чел написал? Тоже? Нет никакой вообще динамики?
Пожалуйста расскажи как относятся поисковики к ASTRO ??? как они видят такие сайты? могут они их рендерить при индексации ?
Дядь это ssr, там с сео все впорядке
Ты в России? или на пути в Финляндию? Политика начинает активно так интересоваться тобой.
Так читайте мои соц сети, я все комментировал
@@VladilenMinin А стоит того? Боюсь еще больше разочаруюсь.
@@alexand5143 Так сам решай
Есть намного быстрей чем Astro фреймворк - это Qwik у него O(1) производительность.
Big O используется для описания слжности алгоритмов, как ты фреймворк померял?
В слитой БД военкоматов есть МИНИН ВЛАДИЛЕН ИГОРЕВИЧ. Надеюсь это не ты. Хоть ты и русский, но ты помог мне обрести новую профессию. Беги оттуда!
это не база военкоматов, а база отелей или типо того.
шо там по мобилизации, молодые люди?)
Смотрю в окопе
Магазин плохой пример, так нагенерилось аж 20 однотипных страниц
У многих жизнь заканчивается)) Там скоро новая волна могилизации
И чем вам так tailwind нравится? Он засоряет поле класса и, по-сути, создаёт новый язык, который надо учить. Из-за него же забываешь потом CSS и не можешь использовать SASS и прочие плюшки CSS, заменяя их на убогие возможности стилизации tailwind. К тому же он тащит с собой весь свой бандл ради пары стилей в проекте. По-моему, использовать его - это стратегическая ошибка.
Я в видео как раз показываю, что не тащит он за собой всю либу и существенно упрощает разработку
@@VladilenMinin насчёт упрощает разработку - это вряд ли. Те же стили прописать в CSS совсем не сложнее, а возможностей куда больше и не надо учить новый язык, гадать, как там пишется свойство CSS, которое ты давно знаешь. Плюс, если стилей много, класс разрастётся значительно. А если те же стили хочешь применить к другому элементу? Ту же самую длинную строку копировать? Во что превратится код? Да, там есть какие-то способы делать свои сокращённые стили, но они очень сложны и не очевидны. К тому же твой стиль может запросто потеряться в куче других. Короче, это полный бред, уж извините. Tailwind противоречит концепции CSS, создавая совершенно не нужную абстракцию, полезность которой крайне сомнительна, а вред - очевиден.
@@-dubok- если хочешь применить к другому, положи классы в переменную и импортируй)
@@gooseob уже очень сложно! Зачем мне заниматься такой фигнёй, когда я могу нормально CSS-класс написать и применить? Плюс, как уже сказал, моя переменная просто затеряется в куче других tailwind'овских. Это всё очень не удобно и криво. Я пробовал пользоваться им - это какой-то треш. Обычный CSS куда понятнее и удобнее. Писать его совсем не сложно благодаря тому же emmet'у, автодополнению от IDE.
@@-dubok- мне тож больше sass нрав, я просто решение предложил
Молодец Владлен! Добьем бункерную крысу новым оружием - Astro.
Никчемное ответвление от традиционного js .. на сегодня мы имеем скорость канала средняя 50мб , процессоры устройств с горизонтов даже 5 лет : очень мощные .. зачем накидывать очередную шнягу дабы ускорится ))?
мда....
Я не согласен.
Да он подкупленный, расходимся...
Уважения тебя как разработчика всегда будет высоким, но как человека, происходит "негативное всплытие",как у вас любят говорить)
А какие претензии?
Не пложу панику, не кричу все пропало и выпускаю контент
@@VladilenMinin
Если бы...
Но ты зазываешь к бездействию.
Убедивши себя, что ни на что не можно повлиять и навязываешь это другим.
Взять в пример тот же Иран сейчас, какие протесты идут и самое главное из-за чего.
Уже не вспоминать за Украину, майдан 2014.
Россия - это сделать маленькие зарплаты, дешёвый алкоголь и единственное развлечение - телевизор = народ покорных рабов.
Это я не за людей в больших цивилизованных городах пишу, уверен там остались здравые люди и ты в их числе и вместе вы все еще можете сделать свой вклад.
@@vo_skor ну да, за политику Владилен что-то не то отжигает. Владилен, Америка не может хотеть уничтожить Россию, иначе бы не кормила русских голодающих гуманитаркой трижды за 20-ый век!
когда ты бородавку свою выведешь?