Создание сайтов с AI и динамические данные в компонентах через CMS — обзор всех нововведений Webflow

Webflow — это визуальный редактор кода (ноукод) для создания сайтов разного калибра, начиная от простых лендингов, заканчивая сложными с кучей анимацией и интеракций, блогов, интернет-магазинов и даже веб-приложений, особенно благодаря множеству интеграций сторонних сервисов, таких как Wized (бэкэнд специально для Webflow).

Если вам интересно, то обо мне вы можете прочитать в моём профиле, но вкратце скажу, что я не первый год работаю с ноу- и лоукод инструментами, в частности Webflow — сейчас же разрабатываю подписку на безлимитный веб-дизайн и разработку Georgy.Design. Также я являюсь сертифицированным экспертом и активном участником сообщества Webflow.

Дзяона Чжан, старший вице-президент в Webflow, рассказала о планах компании:

Можно заметить как в последнее время Webflow шипит всё больше апдейтов разного уровня. Это направление, которое выбрала компания и не собираются сдавать обороты.

Тут я не буду много комментировать, проще будет описать происходящее примерной цитатой Эмили Лонетто:

Самая горячая нынче тема. Я уже рассказывал о планах Webflow по интеграции ИИ в продукт, можете на канале пост с видео найти.

В планах разработать инструмент, который не только поможет создать компонент или найти нужный элемент, но и разобраться в Webflow (ИИ имеет доступ к Webflow University и смежной документации) и даже веб-разработке.

Прошлая конференция Webflow имела огромный успех, так что в этом году будет аж четыре — в Сан-Франциско, Нью-Йорке, Чикаго и Лондоне. Непонятно когда будет в Ереване, Тбилиси и Пхукете, но ждём 👍

Тут без особых комментариев, я думаю и так понятно. Раньше нельзя было, приходилось писать клиенту, но теперь это возможно сделать самому.

Я уже об этом писал, вот пост → https://t.me/georgystories/323.

Не сказать, что это очень полезная фича, но добавили CSS свойство, которое весьма давно существует. В любом случае приятно и не помешает делать ещё более интересные дизайны!

В Webflow добавили новые величины вроде DVH и DVW (Dynamic Viewport Height/Width), которые позволяют правильно рассчитывать размеры элементов исходя из, собственно, вьюпорта, то бишь доступного экрана пользователя.

Долой назойливые горизонтальные скроллбары — самый яркий пример, так как люди частенько давали элементам 100 VW из-за чего появлялись оные. Это связано с тем, что VW учитывает размер всего экрана пользователя, включая скроллбар браузера.

Больше об этом можно почитать по ссылке → https://university.webflow.com/lesson/small-large-and-dynamic-viewport-units.

Если думаете, что это хорошая тема для поста, то напишите в комментариях.

Я писал об этом ранее → https://t.me/georgystories/277.

Фича, кстати, чрезмерно удобная — пользуюсь ей достаточно часто.

Сразу скажу, что если не знаете о чём речь, то посмотрите этот курс → https://university.webflow.com/courses/after-effects-lottie-in-webflow.

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

В общем и целом, Webflow расширяют интеграцию CMS в интерфейсе. Теперь можно привязать айди элемента к какому-нибудь полю из CMS.

Или, что, наверное, самое важное — использовать данные из CMS в атрибутах. В этом случае хватает применений и некоторые из них просто «отвал башки». Можно делать очень крутые штуки. В планах сделать видео по этой теме (звиздец, сколько я уже видео наобещал, поди целый плейлист наберётся).

Да, раньше почему-то это было не так по умолчанию и приходилось в настройках элемента менять. Теперь не надо. Супер, спасибо, Webflow!

Если неясно зачем оно, то супер краткий экскурс — это нужно для SEO, а именно ботам поисковиков, которые смотрят на контент на странице, дабы понять что происходит на ней.

О вариативных шрифтах я писал ранее → https://t.me/georgystories/151.

Нынче улучшили их работу, стало понятнее идентифицировать у текстового элемента наличие такого шрифта (или он статичный), полный контроль вариативности в интеракциях и в целом их проще стало настраивать.

Да, об этом я тоже писал → https://t.me/georgystories/310.

• Первый апдейт связан с предстоящим уходом Universal Analytics, который будет 4 июля и переходом на Google Analytics 4. Тут вам SEO специалисты больше расскажут.
  
• Второй апдейт думаю объяснять не надо. Стало удобнее работать с кастом кодом в Webflow. Вообще у меня до этого было для такого расширение в браузере.

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

Ну наконец-то! Теперь можно использовать динамические данные, то бишь те самые из CMS, в компонентах на статичных страницах — на шаблонных/CMS страницах это уже можно было делать.

Я рассказывал о переходе Webflow с «символов» на «компоненты» в одном из постов, можете прочитать для понимания картины.

Если вкратце описать этот апдейт, то суть его в том, что теперь вы можете добавить любой компонент, например карточку чего-то там, в Collection List — таким образом имея коллекцию «Товары» вы можете изменить данные в карточки на, собственно, товары, а если у вас коллекция «Мемы», то будет карточка про мемы. Суть простая.

Дополнительно уточнили, что есть возможность делать компоненты из элементов находящихся в Collection Lists — удобно!

Без комментариев, думаю и так понятно, особенно тем у кого много воркспейсов.

Кстати, если это не так и у вас есть вопросы — то пишите в комментариях, постараюсь объяснить и рассказать что да как!

Больше не будет адресов вроде webflow.com/team/kek-cheburek-228-4l0l4, так как можно указать желаемый айдишник, такой же как и для своих профилей — например, webflow.com/@georgy.

Полезно будет тем, кто публикует проекты в Made in Webflow не с личного аккаунта, а с профиля воркспейса.

В детали не вдавались, но в любом случае это только для энтерпрайза, с кем из моей аудитории сотрудничает, наверное, только Асад через агентство где он работает.

Если обобщить, то у таких клиентов появилась возможность дать доступ к стэйджинг-домену (webflow.io) определённым людям, например своей команде.

Опять же, только для энтерпрайза.

Однако, ребята сообщили, что рано или поздно эти фичи выкатят на всеобщий доступ. Ждём-с, ибо это очень крутые штуки для команд.

О которых я уже рассказывал в предыдущем посте по теме → https://t.me/georgystories/309.

Я затрагивал в одном из своих постов некоторые из изменений (лень ссылку искать, можете поиском по каналу воспользоваться) — всё же плагин очень быстро развивается и мне стоило бы об этом писать чаще.

Однако я планирую сделать очередной стрим про плагин, как раз будет продолжением предыдущего — я всё-таки обещал рассказывать о развитии плагина и он, кстати, уже на том уровне, что его можно использовать в работе, а не просто побаловаться.

Ставьте лукасы на пост если хочется увидеть стрим про то как можно быстро (и с пафосом) переносить дизайны напрямую в Webflow в несколько кликов 🐶

• Инвестирование в ИИ
• DevLink (мост между ноукодом и кодом)
• Комментирование и коллаборация
• Локализация
• Особый сюрприз!

Что ж’, сделали передышку, а теперь читаем дальше 😅

Продолжаю рассказывать об обновлениях Webflow с последнего стрима «Tiny But Mighty Products Updates».

Компания делает большие планы на интеграцию ИИ в свою платформу. Выделяют три главных аспекта как ИИ поможет Webflow дать «суперспособности в разработке» для всех людей:

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

Webflow осознаёт, что кривая изучения (learning curve) платформы весьма высокая, поэтому они хотят сделать процесс в разы проще.

От себя добавлю, что, на мой скромный взгляд, Webflow не такой сложный инструмент как его представляют, но нужно, так сказать, вайбить с вебом/интернетом и понимать как он работает — чего, я предполагаю, не хватает многим начинающим. Это вполне нормально, поэтому тот же самый Framer проще, ибо хотя бы перенимает интерфейс дизайн инструментов вроде Figma. Если взять какую-нибудь Тильда, то там вообще конструктор блоков — в Webflow же какие-то классы, какой-то DOM, неясно о чём речь.

Webflow с этим работает — порадуем начинающих этой новостью!

Одним из решений будет ИИ поиск по документации Webflow (тот же Webflow University), который, помимо самого поиска, будет выдавать ответ исходя из контекста — например, вы можете спросить «как изменить цвет фона?», а Webflow AI даст вам ответ исходя из вашего конкретного проекта, подсвечивая элемент интерфейса 🤩

Закрытая бета ИИ помощника Webflow намечена на первую неделю июня 😮

Он не просто будет вам помогать с изучением инструмента, показывая куда надо кликать, чтобы что-то поменять, но и делать некоторую за вас:

• Переводить контент на другой язык.
• Оптимизировать текст для SEO.
  
• Разную работу с текстом, вроде уменьшения длины, смягчения тона (это мне полезно, меньше хейта, хахахахаха (шутка) и исправление грамматики.

Анонс просто пушка, ждём полноценный релиз.

Закрытая бета ИИ ассистента Webflow будет в июне 😮

Я рассказывал подробнее о DevLink в обзоре прошедшего Webflow Conf → https://t.me/georgystories/148.

Вкратце о DevLink:

• Этот инструмент поможет использовать Webflow только как фронтэнд когда вся остальная часть проекта кодится ручками.
• В начале будет возможность синхронизировать компоненты сделанные на Webflow с компонентами на React — сделав изменение в Webflow, они автоматически перенесутся в код вашего проекта.
  
• В будущем будет поддержка других фреймворков.
  
• Дизайнеры рады, разработчики ещё больше — мост между ноукодом и кодом становиться ещё меньше.

Сейчас же команда сообщила, что релиз (если это можно так называть) будет в течение следующих недель 😮

Податься на ранний доступ можно по ссылке → https://webflow.com/devlink.

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

Кстати, в одном из обзоров расширений для Webflow я хотел рассказать о Flowcheck — это практически то же самое, что и нативная фича от самих Webflow. Что будет с этим проектом не ясно, может они как-то по другому будут позиционировать свой проект, да или вовсе закроются. Но я о нём всё равно расскажу, так что, да, подписывайтесь на канал → https://yt.geor.gy 🎬

Ребята, больше никаких сторонних инструментов вроде Weglot, Polyflow и Linguana не нужно будет — скорее всего. Больше не надо создавать отдельные папки для других языков. Не нужно возиться с reverse proxy ради мультиязычности. И так далее по списку.

Это одна из самых крутых новостей лично для меня, ибо сам хочу перевести свой сайт Georgy.Design на русский и китайский языки, но возиться со сторонними инструментами для этого не хочется — а тут можно всё нативно внутри Webflow сделать.

Рад за всех нас кому эта фича нужна!

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

Ребята, которые обожают анимации, интеракции, 3D и всё в этом духе — возрадуйтесь, ведь в Webflow наконец-то таки завезут нативную интеграцию 3D редактора Spline! Я рассказывал немного о нём в одном из постов, где Spline сами вывезли подобную фичу, но теперь это всё нативно в нашем любимом Webflow.

Пока точно не ясно как будет работать эта интеграция, будет ли она, например, совместима с интеракциями Webflow (IX2) или это просто добавление файлов Spline без эмбэд элемента.

Надеюсь, конечно же, на по настоящему глубокий функционал — мы сможем делать действительно крутой 3D опыт для пользователей в Webflow без знаний кода.

Ожидайте от меня стрим по этой теме — я обязательно буду обозревать интеграцию когда её только добавят в Webflow. Сам я пользуюсь Spline не первый год, хотя и не столь обильно как хотелось бы. Теперь точно буду делать чаще.

Подписывайтесь на мой YouTube канал для уведомлений о стриме → https://yt.geor.gy 🎬

Вот я и закончил обозревать последний стрим про обновления Webflow. Потратил на это больше 2 часов — надеюсь вам интересно было читать посты и узнать что-то новое ☕

Хотя это ещё не всё, ведь есть ответы на вопросы, по которым я тоже сейчас буду постить — ведь и там есть интересные анонсы.

Обновления будут, это один из самых больших запросов от сообщества.

Точного ответа не дали, но обязательно будут изменения в икоммерсе, особенно учитывая то, что новый CTO в Webflow, это Аллан Лэйнванд — бывший CTO в Shopify.

Тут ребята упомянули предыдущий анонс, что Webflow приостанавливает работу над Logic и Memberships, чтобы сфокусироваться на основном инструментарии. Я об этом сделаю пост после ответов на вопросы. Важный анонс: Logic и Memberships скоро будут доступны всем пользователям без дополнительной платы — Memberships также увеличит лимит в 10К пользователей.

«Следите за обновлениями ;)»

Больше информации в следующем месяце.

Webflow инвестирует много ресурсов в свой маркетплейс и для них важно расширять функциональность Webflow с помощью сторонних решений.

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

Тот же ответ про смещение фокуса на улучшение существующего инструментария Webflow. Проще говоря, обновления rich text элемента будут.

Команда не может пока ничего рассказать, но уточнили, что ИИ ассистент сможет это делать, подразумевая что такая возможность появиться и у пользователей.

Больше новостей будут этим летом.

Как я понял, команда делает большую ставку на маркетплейс приложений для Webflow и в этом сегменте, так что стоит ждать новостей.

Больше новостей в этом году, пока ничего точного не сказали — компания понимает, и рада тому, что сообщество интегрирует в Webflow всякие решения «ручками».

Пока что только для энтерпрайза :(

Точных планов нет, однако компания делает икоммерс приоритетнее (о чём я до этого писал), так что изменения стоит ожидать.

Как и отмечалось до этого, работа над улучшением основного инструментария ведётся и это основной фокус.

Таких планов нет, но идея интересная.

Конец разбора всех новостей по Webflow с последнего стрима — надеюсь вам понравилась статья и, конечно же, сами новости. Я не могу не нарадоваться столь частым обновлениям!

Если вам понравился этот детальный обзор, то я буду признателен репостом этой статьи и подписки на мой профиль. Также у меня есть канал в Telegram «Георгий и истории ✍🏻» (@georgystories). Ваша поддержка помогает мне делать контент чаще и инвестировать в это больше ресурсов!

Ещё раз спасибо за просмотр!

Если у вас есть вопросы по поводу Webflow или ноу- и лоукод инструментов в целом, то пишите их в комментариях — постараюсь ответить на все.