Javascript — почти идеальный язык программирования. Единственное, чего ему не хватает, — это хорошей основы для создания веб-сайтов. Теперь, когда дело доходит до фреймворков Javascript, у меня есть такие люди, как Уил Чемберлен. Я пробовал почти все из них, и каждый из них делает несколько хороших трюков, но ни один из них не подходит для брака. У всех есть свои недостатки, которые я объясню в этом видео. Таким образом, вы можете понять, что доводит разработчика до безумия, будь то без выбора, кроме как создать свой собственный Javascript-фреймворк.
Программирование на JavaScript — огнемет
На самом деле, неважно. Кто-то уже использовал это имя в MPM. Давайте продолжим и повернемся к дьяволу и назовем его Огнеметом. Я думаю, что это действительно отражает суть программирования на JavaScript. Теперь, в этот момент, вы можете задаться вопросом, шучу ли я. Печальная реальность - нет. На самом деле я создал революционную платформу для создания невероятно быстрых интерактивных приложений на Jamstack. Я также собрал миллионы долларов для своей компании Flame Thrower Inc, чтобы раскрутить ее. Я украл 99% своих идей из других инструментов, но скажу вам, что все остальное — отстой.
Фреймворки JavaScript — что вам нужно знать
попробуй украсть. Так что однажды я мог бы стать таким же успешным, как ремикс. Хорошо, эта часть была шуткой о какой-то драме в Твиттере, но что я действительно хочу научить вас в этом видео, так это компромиссы между всеми различными основными платформами JavaScript. Вот обычная блок-схема, которой я руководствуюсь при выборе фреймворка для нового проекта. Первый вопрос, который нужно задать: является ли проект очень интерактивным? Например, вы создаете приложение с аутентификацией пользователя со всеми видами данных, которыми может манипулировать текущий пользователь? Если ответ отрицательный, похоже, вы создаете обычный веб-сайт, и в этом случае вам не нужен фреймворк JavaScript. Жизнь станет намного проще
Как создать сайт с помощью генератора сайтов
генератор сайтов, такой как Hugo или Levinti, и если вам в конечном итоге понадобится JavaScript, вы всегда можете добавить что-то вроде Alpine или PetiteView, в отличие от тяжеловесного фреймворка, или еще лучшим вариантом может быть Astro, который генерирует статический HTML, но позволяет вам приносить интерактивность из любого фреймворка по мере необходимости. Теперь, если вы создаете высокоинтерактивное приложение, следующий вопрос, который вы можете задать: должно ли оно быть удобным для поисковых систем или ему нужно отображать HTML и данные на сервере? Если ответ отрицательный, то просто используйте свой любимый фреймворк для создания одностраничного приложения.
Как оптимизировать ваш контент для поисковых систем
содержание заранее для поисковых ботов, тогда вы можете сосредоточиться на 100% на интерфейсе UX. Однако, если вам нужно SEO, то ваш следующий вопрос будет заключаться в том, как часто меняется контент? Если это похоже на блог, содержимое которого меняется не очень часто, похоже, что у вас есть приложение для стека джемов. Обычно имеет смысл предварительно отрендерить ваш контент и кэшировать его в CDN, а затем позволить фреймворку JavaScript обработать его и взять на себя после начальной загрузки страницы. Такие фреймворки, как NextJS и SpeltKit, могут делать это в режиме SSG, но у вас также есть инструменты.
Использование NextJS, NUXT и SpelKit для воссоздания вашего контента
хотя в последнее время это как-то вышло из-под контроля. Теперь, если ваш контент очень динамичен и постоянно меняется, вам, вероятно, потребуется полный рендеринг на стороне сервера, чтобы регенерировать статический контент на сервере всякий раз, когда поступает новый запрос. Для этого предназначены такие инструменты, как NextJS, NUXT и SpelKit. делать. И если вы не совсем уверены, как будет развиваться ваш проект, я бы по умолчанию использовал полную структуру SSR. Это дает вам простую основу для выбора правильной структуры, но здесь все может стать намного сложнее. То, что я создаю, — это платформа для размещения моих курсов.
Jamstack — Управление контентом
аутентификация пользователя и очень интерактивный, а также должен иметь действительно хорошее SEO. Контент меняется не так часто, так что это привело бы нас к варианту Jamstack. Я начал работать над проектом с SvelteKit, который является отличным фреймворком, но имеет более общее назначение и не имеет множества функций для управления контентом по сравнению с чем-то вроде Hugo. Это приводит к вопросу о том, как мне управлять тоннами контента. Один из вариантов — я мог бы придерживаться SvelteKit и просто повторно реализовать все эти функции управления контентом самостоятельно. Не поймите меня неправильно, я люблю изобретать велосипед так же, как следующий разработчик JavaScript,
Система управления контентом для разработчиков
беспокойтесь, что эти фреймворки не будут достаточно быстрыми при рендеринге большого количества уценок. Создатель 11T сделал хороший бенчмарк, сравнив их. Вариант Б — заплатить за безголовую CMS, такую как content full или sanity, но тогда мне придется добавить в свой стек еще одну платную услугу. Drap B — еще один хороший вариант, который вы можете разместить самостоятельно, но тогда мне придется управлять отдельным сервером и базой данных только для управления своим контентом. Что я действительно хочу сделать, так это просто написать весь свой контент и уценку и управлять им в репозитории Git. GitHub на самом деле является отличной бесплатной системой управления контентом для разработчиков.
Как обмениваться данными или состоянием между разными маршрутами
генераторы статических сайтов, которые лучше всего справляются с уценкой и шаблонами. Astro кажется здесь идеальным выбором, но возникает еще один вопрос: как я могу обмениваться данными или состоянием между разными маршрутами. В Astro вы заметите, что при навигации вы получаете полную загрузку страницы для каждого маршрута. Это означает, что JavaScript перезагружается, и даже если вы используете что-то вроде нано-хранилищ или хранилищ с заклинаниями, информация из предыдущего маршрута будет потеряна. Это не похоже на следующий JS, где маршрутизатор на стороне клиента берет на себя управление и отображает пользовательский интерфейс с помощью JavaScript на всех маршрутах после начальной загрузки страницы. Это может быть проблемой
Веб-токены JSON
состояние с веб-токенами JSON и чем-то вроде Firebase, и мы хотим показать текущего пользователя на панели навигации вместе с некоторыми данными из базы данных, которые могут обновляться в режиме реального времени. Так что в основном это возвращает нас к следующему JS или любой другой среде, которая полностью гидратирует после начальной загрузки страницы. Есть также новые передовые фреймворки, такие как быстрый и надежный старт, которые могут быть хорошими вариантами в будущем. Но мне просто нужно завершить этот проект, поскольку это возможно как можно скорее, и, конечно, ваш собственный JavaScript
Маршрутизатор в стиле спа для статических сайтов
и данные между маршрутами с нулевой задержкой при переходе страницы и без необходимости использования фреймворка для управления всей DOM. Другими словами, мне нужен спа-маршрутизатор для статических сайтов, и в основном это то, что я построил. Он не имеет никаких зависимостей и полностью полагается на собственные технологии браузера, такие как Fetch. Давным-давно, когда я впервые начал работать веб-разработчиком, существовала библиотека под названием PJAX, которая асинхронно извлекала фрагменты HTML с вашего сервера и обновляла DOM, а не выполняла полную перезагрузку страницы.
Фреймворки JavaScript — Фреймворки JavaScript — Фреймворки JavaScript
и получает больше загрузок NPM, чем большинство фреймворков JavaScript. Это работает так: когда вы нажимаете на ссылку, она предотвращает это поведение по умолчанию, затем использует ее выборку, чтобы захватить страницу, на которую вы хотите перейти, она меняет тело страницы, затем обновляет заголовок с дельтой или изменениями. на новой странице. Это означает, что если вы уже выполнили JavaScript на предыдущей странице, например глобальную библиотеку управления состоянием, его не нужно повторно выполнять при загрузке следующей страницы. Это действительно интересное поведение, и я объясню почему через минуту, но было ли это основным источником вдохновения для моего фреймворка? Ну, на самом деле это просто библиотека технически.
JavaScript — целостная платформа нового поколения для веб-разработки
links, потому что он довольно большой и делает кучу вещей, которые мне на самом деле не нужны. И есть несколько специальных функций, которые я хотел добавить в свою библиотеку, чтобы создать действительно целостную платформу следующего поколения. Одна из самых больших вещей, которые меня раздражают в современной веб-разработке, это то, что когда вы создаете большой контент-ориентированный сайт, 99% пользовательского интерфейса представляет собой статический HTML, который ничего не делает. Однако общий подход заключается в том, чтобы взять этот HTML и управлять им на 100% в рамках JavaScript. В этом есть определенные преимущества, но для этого требуются всевозможные специальные инструменты,
Веб-компоненты для JavaScript и CSS-фреймворков
Как полигамист, я требую большего от своих рамок. На самом деле мы можем использовать совершенно другой подход, изначально поддерживаемый всеми браузерами, использующими веб-компоненты. Многие люди любят нести чушь о веб-компонентах по разным причинам, но в основном это просто API браузера для создания пользовательских элементов, которые инкапсулируют собственный JavaScript и CSS. Существуют фреймворки, предназначенные для создания веб-компонентов, такие как Lit и Stencil, но все основные фреймворки также могут компилироваться в веб-компоненты.
Веб-компоненты — Архитектура острова
и уценка без каких-либо дополнительных плагинов или зависимостей. Кроме того, вы можете использовать их между фреймворками. Например, я мог бы создать веб-компонент с помощью Svelte, а затем получить к нему доступ из приложения React и Angular. В моем случае веб-компоненты великолепны, потому что я могу использовать генератор статических сайтов, а затем добавлять интерактивность в свои шаблоны, просто объявляя свои пользовательские элементы. Это похоже на архитектуру острова, где есть островки интерактивности. Но следует иметь в виду, что веб-компоненты никогда не будут отображаться на сервере. Они отображаются только на клиенте. Хотя интересно, что вы можете проецировать отображаемый сервером контент в веб-компонент,
Веб-компоненты с маршрутизатором
отлично индексируется поисковыми системами. Теперь вот где все становится действительно круто. Когда вы комбинируете веб-компоненты с маршрутизатором, они мгновенно отображаются между изменениями маршрута. Здесь у меня есть статически сгенерированный сайт с веб-компонентом счетчика, созданным Svelte, который получает данные из магазина Svelte. Когда маршрутизатор отключен, он выполняет полную загрузку страницы, и текущий счет теряется, когда мы переходим на следующую страницу. Теперь, если мы включим маршрутизатор, обратите внимание, что данные счетчика не теряются между изменениями маршрута, как в одностраничном приложении. Не говоря уже о том, что переход между страницами ощущается конечным пользователем намного быстрее.
FlameThrower — Начало работы с TurboLinks
project, внутри которого есть дополнительный каталог приложения, содержащий svelta, сконфигурированный для компиляции в пользовательские элементы. С точки зрения разработки единственное, что вам действительно нужно сделать по-другому, — это найти тег для каждого компонента. Затем вы экспортируете каждый компонент по отдельности. Последнее, что я делаю, — запускаю маршрутизатор Flamethrower, вызывая его как функцию. Маршрутизатор имеет несколько дополнительных функций, которых вы не найдете в чем-то вроде TurboLinks. Во-первых, он найдет все видимые ссылки на странице и автоматически предложит браузеру выполнить их предварительную загрузку. Браузер будет
Как предварительно выбрать теги ссылок
отображать, как только пользователь нажимает на ссылку. Это стало возможным благодаря предварительно выбранным тегам ссылок, и я также использую API-интерфейс наблюдателя за пересечениями для предварительной выборки только тех ссылок, которые видны на экране, потому что именно на них пользователь с большей вероятностью нажмет. Другими словами, когда вы прокручиваете вниз, он будет лениво предварительно выбирать ссылки, которые попадают в поле зрения. Если вы хотите увидеть фактическую задержку между изменениями маршрута, установите для журнала значение true, и он добавит таймер к каждой операции выборки. Он должен быть невероятно быстрым, например, менее 100 миллисекунд. Кроме того, я бросил
API — API для естественной анимации между переходами страниц
API. Этот API еще не поддерживается в браузерах, и вам нужно включить его с помощью флага, но в основном он позволяет вам выполнять анимацию между переходами страниц, как вы ожидаете в нативном мобильном приложении. Как видите, по умолчанию он выполняет анимацию плавного перехода. Суть в том, что этот маршрутизатор позволил мне создать свой собственный небольшой мета-фреймворк, используя Svelte, скомпилированный в веб-компоненты, вместе с Hugo, генератором статических сайтов, который дает мне потрясающие функции CMS с чрезвычайно быстрыми сборками, с маршрутизацией, которая
Кто идет со мной?
Кто идет со мной? Кто идет со мной? Кто идет со мной? Это проверенный метод, который используется на крупных сайтах, таких как Dev2 с Turbo, но в настоящее время Flamethrower не имеет статуса мема, и я бы не рекомендовал использовать его в продакшене, пока он не достигнет альфа-версии. Я могу позволить себе роскошь делать странные экспериментальные вещи, подобные этому, но если вы строите для себя серьезный проект, не гонитесь за водопадами, придерживайтесь библиотек и фреймворков, к которым вы привыкли, таких как Nex, Spelket, Astro. , и так далее. Теперь, когда я раскрутил свою игру, меняющую Java
