Я разделяю ваши опасения по поводу Vaadin Flow. Вот некоторые впечатления, которые я собрал, узнав о Vaadin 6-14, изучая документацию, читая форумы, просматривая Видео Vaadin Ltd на YouTube. Хотя я не привожу технические доказательства для каждого пункта ниже, это может помочь вам сориентироваться в цели и новой реальности Vaadin Flow.
Веб-браузеры повзрослели
Годы разработки HTML5 сейчас окупаются огромными наградами.
Одной из основных целей руководителей WHATWG было переписать спецификации с практической точки зрения программисты пытаются создать настоящие браузеры. В результате современные браузеры имеют гораздо больше общего поведения, чем когда-либо прежде, с гораздо меньшим количеством «причуд» < / а>. В настоящее время веб-приложения в основных браузерах ведут себя гораздо более предсказуемо.
Также обратите внимание, что производители веб-браузеров объединились в использовании движков. Каждый крупный браузер отказался от своего собственного движка, чтобы использовать либо Apple WebCore / WebKit, либо его спин -off Blink / Chromium. Даже Microsoft отказалась от собственного движка браузера Trident / EdgeHTML и перешел на Chromium для своей линейки браузеров Microsoft Edge. Итак, Safari, Edge, Chrome, Opera, Храбрый, Vivaldi и другие сейчас используют один и тот же движок для более близкого поведения. Только Mozilla Firefox продолжает использовать собственный движок веб-браузера, Gecko (кроме для Firefox для iOS, который использует WebKit в соответствии с политикой Apple). Итак, у нас есть два основных движка браузера: WebKit / Chromium и Gecko.
Это означает, что основная нагрузка на предыдущие версии 6, 7 и 7 Vaadin, компенсирующая различия в поведении браузеров, значительно уменьшилась. Внутренний дизайн Vaadin теперь может работать напрямую с собственным HTML / CSS / DOM без создания собственного промежуточного уровня поведения.
CSS
CSS за последние годы радикально улучшился благодаря CSS3 наконец-то получил конкретизацию и широкое распространение.
На протяжении десятилетий эксперты говорили «не используйте HTML table для макета», но при этом не предлагали макета страницы в CSS, за исключением анемичной float функции. Наконец, CSS 3 предлагает реальный макет, многофункциональный и надежный. И что еще более удивительно, очевидно, что браузеры широко поддерживают эти функции с помощью очень совместимых реализаций. Эти новые технологии компоновки - это Flex-box и Grid-layout.
Кстати, «CSS 4» не будет. Каждая из функциональных областей, составляющих CSS 3, теперь представляет собой отдельный проект с собственной разработкой и управлением версиями. Это хорошо объясняется в одном из отличных видеороликов Джен Симмонс на канале YouTube LayoutLand, хотя в настоящий момент я не могу его найти.
Расположите элементы в одномерном горизонтальном ряду или вертикальном столбце. Управляйте растяжением-сжатием, промежуточным интервалом, левым центрированием-правым позиционированием и относительным выравниванием, включая базовую линию.
См. это отличное наглядное руководство и учебное пособие.
Звучит знакомо? CSS flex-box предоставляет те же функции, что и классы Vaadin HorizontalLayout и VerticalLayout. Действительно, в Vaadin Flow эти классы были перестроены, чтобы напрямую использовать эту функциональность CSS, а не воссоздавать это поведение внутри Vaadin. Vaadin Flow изменил свою терминологию в соответствии со стандартом CSS, например setExpandRatio стал setFlexGrow.
Посмотрите, какие версии какие браузеры поддерживают Flexbox.
Расположите предметы в двумерной сетке из строк и столбцов. Функции аналогичны расположению данных в ячейках в таблице HTML. Содержимое может быть выровнено вверх-вниз или влево-вправо в пределах ячейки. При желании содержимое может охватывать несколько ячеек. Вы можете управлять интервалом и выравниванием.
См. отличное руководство на том же сайте CSS-Tricks.com. как уже упоминалось выше.
Звучит знакомо? Макет сетки CSS обеспечивает те же функции, что и GridLayout в предыдущих версиях Vaadin. Класс GridLayout больше не построен для Vaadin Flow, но вы можете получить такое же поведение, используя Vaadin _ 9_ в сочетании с прямыми командами CSS.
Посмотрите, какие версии какие браузеры поддерживают CSS Grid.
Самостоятельная работа AbsoluteLayout
Кстати, CSS теперь обеспечивает пиксельно-ориентированный макет «на лету». Опять же, похоже, что это хорошо поддерживается во всех браузерах в едином смысле. Поэтому в Vaadin Flow они решили отказаться от AbsoluteLayout < / a>, который предоставил эту возможность компоновки виджетов в системе координат xy.
Вместо AbsoluteLayout вы можете создать свой собственный простой небольшой класс макета, расширив новый _ 13_. В этом подклассе для любого данного виджета вы можете извлечь объект Element, представляющий элемент HTML для этого виджета на визуализированной веб-странице. Имея в руках этот Element, вы можете указать левую и верхнюю (xy) координаты, которые должны соблюдаться.
Теперь CSS можно обновлять динамически, поэтому вы можете изменять расположение или добавлять / удалять виджеты в этом макете динамически во время выполнения.
Пример такого подкласса макета CSS для Div см. В Замена AbsoluteLayout из Vaadin 8 Framework в Vaadin 10 Flow? .
Веб-компоненты
Новые технологии веб-компонентов меняют правила игры, заменив GWT. Они позволяют собирать веб-страницы и веб-приложения в виде набора фрагментов, каждый из которых имеет свой маленький мир HTML, CSS и DOM. Эта инкапсулированная область позволяет добавлять фрагмент, не затрагивая остальные фрагменты. Например, отсутствие конфликтов пространства имен при именовании классов и идентификаторов CSS.
Это означало, что внутренности Vaadin были полностью переписаны. И поэтому мы должны набраться терпения (или просто продолжать использовать Vaadin 8), поскольку некоторые части, на которые мы полагаемся в предыдущем Vaadin, постепенно добавляются в Flow. См. Страницу руководства по Компоненты в Vaadin 10 для сравнения компонентов v8 и v10 / 11/12. Эта страница постоянно обновляется. Например, MenuBar изменилось с незапланированного на ожидаемое в Ваадине 14.
С другой стороны, некоторые функции предыдущего Vaadin могут не появиться. Но внимательно прочтите эту страницу и исследуйте ее. Некоторые части, которые Vaadin ранее создавал самостоятельно, теперь напрямую представлены в виде надежных функций HTML или CSS.
Заключение
Как и вы, я испытываю смешанные чувства к Vaadin Flow.
Недавний разговор компании Vaadin Ltd о «сначала мобильные» вызывает беспокойство. Это кажется второстепенным по сравнению с их наследием создания серьезных бизнес-приложений, приложений для счетов-фактур / заказов на покупку / начислений в корпоративном стиле, «скучного» программного обеспечения, как я его называю (и зарабатываю им на жизнь), в отличие от стартапов. -недельное веб-приложение с строгим дизайном и дурацкими интерфейсами.
Некоторые части, важные для корпоративных бизнес-приложений, такие как строки меню, в настоящее время отсутствуют, и нет подходящего решения. Технологии веб-компонентов являются относительно новыми в отрасли и, вероятно, в ближайшие несколько лет столкнутся с некоторыми трудностями и проблемами. Прекрасный безопасный пузырь только для Vaadin, который мне нравился, теперь стал пористым, и при разработке приложений, вероятно, потребуется немного больше CSS или других веб-технологий.
С другой стороны, похоже, что корпоративные / бизнес-функции могут поступать либо изнутри Vaadin, либо извне в виде веб-компонентов, обернутых как объекты Vaadin. Технологии веб-компонентов и их различные полифилы не новы, и над ними работали серьезно в течение нескольких лет многими людьми, и теперь кажется, что это работает. Что касается CSS или других веб-технологий, просачивающихся в Vaadin, я не против узнать немного больше об этом, учитывая, насколько они надежны и хорошо спроектированы сейчас и что это означает, что с ними может быть гораздо больше документации и стабильности, при этом Vaadin не должен воссоздавать функции через короткие браузеры.
И некоторая часть этой пористости просачивания CSS / HTML может быть закрыта там, где это имеет смысл и обеспечивает удобство для программиста Vaadin. Например, я заметил на странице Vaadin-12 Releases новый Java API для выбор альтернативного встроенного стиля компонента из Lumo или темы материала для любого из компонентов, имеющих вариант, вместе с удобными константами Java, определенными для именования этих вариантов. Пример: primaryButton.addThemeVariants( ButtonVariant.LUMO_PRIMARY ) ;. Это избавляет от необходимости обращаться к внутреннему Element и манипулировать CSS.
Я верю, что в долгосрочной перспективе у Ваадина прекрасное будущее. Сервер приложений с отслеживанием состояния на стороне сервера, способный автоматически генерировать клиентов веб-приложений из (по большей части) не-веб-программирования, делает его отличным инструментом, не имеющим прямой конкуренции (save Xojo Web Edition, использующий аналогичную архитектуру).
Ресурсы
person
Basil Bourque
schedule
15.11.2018
