company_banner

Flutter вот-вот завоюет Web

Original author: Lew C
  • Translation

Кроссплатформенный фреймворк дает самый привлекательный опыт для веб-разработки.

Изображение автора статьи.
Изображение автора статьи.

Современные Web-сайты пишутся на HTML, JavaScript и CSS (и этот сайт в том числе). Наверно, вы сейчас прочитали это и подумали «да это же очевидно». А если я вам скажу, что можно написать сайт без использования этих трех технологий, у вас наверняка возникнут вопросы…

На протяжении истории на этом поле побывали разные игроки. Был Flash, был Silverlight - конкурирующие технологии, которые пытались отобрать кусок рынка у браузеров и не дать разработчику использовать другие технологии для создания сайта. Правда ни одна из них по-настоящему так и не взлетела. А что, если я вам скажу, что в этой сфере снова может появиться конкурент? И это несмотря на то, что буквально никто из других игроков так и не смог сдвинуться с места, невзирая на годы усилий.

Но давайте сначала отвлечемся чтобы понять, что общего было у всех этих попыток:

  1. Для запуска нужен был плагин браузера. Обычно нужен был плагин браузера для запуска на соответствующей платформе. Хороший пример – Silverlight. В то время те, кто использовал Linux, не могли смотреть Netflix, так как сайту нужен был плагин Silverlight (который не был доступен для Linux). Конечно, были альтернативные, open source варианты, но среди них не было ничего стоящего.

  2. Они представляли угрозу для системы безопасности. Flash был печально известен этим (более 1000 известных уязвимостей). Браузер обязательно должен был загрузить плагин для отображения содержимого, и в этот самый момент ни одна из гарантий безопасности браузера уже не имела значения, так как плагин имел полный доступ к хосту.

  3. Производительность была не так хороша, как у чистового HTML. Зачем грузить плагин, чтобы отобразить в нем некоторый текст, если можно использовать чистый HTML и CSS, которые гораздо быстрее?

  4. Появился HTML5, и CSS стал лучше. Внезапно создание чего-то прекрасного и захватывающего перестало быть невозможным. И, что еще лучше, браузеры, которые ненавидели стандарты, использовали странные хаки или специфичные для конкретного браузера реализации, вместо их CSS-эквивалентов (как например, Internet Explorer) были попросту уничтожены.

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

Но как мы пришли к этому? Как HTML стал основой веб-разработки в сегодняшнем процветающем веб-пространстве?

Изображение Joshua Sortino с Unsplash (https://unsplash.com/@sortino)
Изображение Joshua Sortino с Unsplash (https://unsplash.com/@sortino)

Рассвет новой эры

6 августа 1991 года Интернет стал доступен всему миру.  Затем, пришел и ушел так называемый пузырь доткомов, Представьте себе, что Интернет для общего пользования появился только в 1991 году, а девять лет спустя лопнул пузырь доткомов, стоивший 1,7 триллиона долларов (это примерно 15% ВВП США на тот момент)!

Это было время, когда веб начинал становиться все более и более организованным, и способ, которым мы писали веб-сайты, становился все более стандартизированным. Со временем мы выработали стандарты, такие как HTML4, и эти стандарты гарантировали, что HTML, который вы пишете в одной части мира, будет работать для большинства, если не для всех, интерпретаторов HTML. Каскадные таблицы стилей (CSS) вошли в обращение в 1996 году, а годом ранее появился JavaScript. Можете ли вы представить себе, что видите или используете веб-сайт без JavaScript или CSS? Боюсь это произвело бы на вас не лучшее впечатление.

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

Документ

Когда Интернет только появился на свет, люди не использовали приложения, как это делают сегодня. Кто-то из вас, возможно, помнит программы-терминалы, которые, обеспечивали вам физическое соединение с сервером на другом конце. Эти «приложения» (если их можно так назвать) были лишь немного больше, чем просто строчками текста на экране (прим. переводчика: автор тут видимо имеет ввиду BBS доски и их аналоги). А так как люди привыкли иметь дело с документами, с реальными кусками бумаги в руках, которые они могут листать - неудивительно, что основой HTML-страниц является работа с HTML-документом. Если вы когда-либо использовали JavaScript, вы конечно знакомы с такими функциями, как document.getElementById(). Все, что вы делаете на веб-странице, заключается в создании, а затем преобразовании документа.

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

Если же вы хотите, чтобы определенные части вашей веб-страницы оставались в нужном положении или выравнивались определенным образом, вы используете вещи типа position в CSS, чтобы контролировать расположение элементов. Существует множество свойств CSS (520, если точнее), и, как следует из названия, эти стили каскадируются в свои дочерние элементы. Когда вы попытаетесь заставить определенную часть вашего документа выглядеть так как вам нужно, высока вероятность того, что они станут довольно хаотичными. Если вы используете готовый CSS фреймворк, например, Angular Material, и начинаете переопределять встроенный CSS для достижения нужного вам внешнего вида, это тоже становится довольно «пикантным» занятием. CSS позволяет вам выполнить переопределение при помощи !override, однако, как только вы начнете это делать, вы уже практически проиграли битву. Если вы читаете это и думаете про себя: “Что? Да этот парень совершенно безнадежен в CSS:” ОК, я не буду с вами спорить. Но как только ваши дизайнеры начиняют гнаться за определенным внешним видом, ваш CSS может стать довольно сложным в понимании.

Изображение Pankaj Patel on Unsplash (https://unsplash.com/@pankajpatel)
Изображение Pankaj Patel on Unsplash (https://unsplash.com/@pankajpatel)

Изучение языков

Чтобы создать простой веб-сайт, вам необходимы три разных языка, и это только для самого сайта. Это HTML, JavaScript и CSS. А так как ваш сайт должен быть удобным и  отлично выглядеть, этого не произойдет, если вы не знаете, как писать эффективный JavaScript или если ваши навыки в CSS оставляют желать лучшего.

Если вы действительно хотите, чтобы ваш сайт мог делать что угодно, вы можете использовать фреймворк типа Angular или React. Когда вы начнете добавлять пакеты через npm, размер вашего приложения начнет расти. Поэтому вы будете использовать сборщик, такой как webpack, чтобы связать все ваши пакеты вместе и соответствующим образом их минимизировать. Webpack сам по себе отдельная тема (при том огромная), но ее тоже стоит рассматривать, т.к. она играет свою не маловажную роль в создании веб-приложений.

Бандлинг и транспиляция

У вас есть веб-сайт и ваши пакеты, теперь вам нужно использовать bundler для объединения вашего приложения, а затем еще убедиться, что оно работает в нужных браузерах. В зависимости от того, какой браузер использует пользователь, вам потребуется “прокладка” для определенных функций, чтобы браузер пользователя мог отображать ваш сайт. Если вы используете такой язык, как TypeScript, webpack также преобразует его в JavaScript. В этом нет ничего плохого, но это все еще больше усложняет. Если ваш сайт ломается, возможно это вы накосячили в коде, минификация сломала его, webpack не собрал все должным образом или процесс транспиляции привел к проблеме? Все эти сложные конвейеры могут создать трудности при отладке или поиске основной причины проблем в вашем приложении.

Чем лучше Flutter?

Если вы слышали о Flutter, то, скорее всего, слышали о нем в контексте разработки мобильных приложений. Так какое отношение он имеет к веб-сайтам? С обычной HTML-страницей вы работаете как с документом. Во Flutter «страница» (или то, с чем взаимодействует пользователь) фактически рисуется на канве (canvas) HTML. Flutter фактически контролирует каждый пиксель, который рисуется на экране, и не использует HTML, JavaScript или CSS для определения его внешнего вида или логики. (Технически говоря, родной код Dart переносится на JavaScript через dart2js, но на самом деле никакая бизнес-логика не пишется на JavaScript.)

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

Изображение Keila Hötzel с Unsplash (https://unsplash.com/@keilahoetzel)
Изображение Keila Hötzel с Unsplash (https://unsplash.com/@keilahoetzel)

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

Собственно, мы не используем HTML для написания наших веб-страниц и не пишем ничего в документ. На первый взгляд - полная чушь. Но что именно вы делаете, когда разрабатываете веб-страницу в HTML? Как мы уже говорили ранее в этой статье, вы создаете документ, который слишком велик для области просмотра устройства пользователя, его приходится скроллить. Это то, что вы сейчас видите на этой самой странице, высота документа больше, чем высота окна просмотра и вы прокручиваете содержимое.

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

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

Поскольку Flutter основан на концепции размещения отдельных виджетов, а не рисования документа на экране, разработчикам предоставляется больше контроля над тем, как именно они хотят компоновать свое приложение.

Использование одного языка

Как уже упоминалось ранее, для создания хорошего веб-сайта, требуются знания HTML, JavaScript и CSS. Это также означает, что ваши знания не переиспользуются между этими языками, и вы не можете повторно использовать какие-либо из ваших знаний, например в JavaScript для HTML. HTML — это язык разметки, CSS — синтаксис описания стилей, а JavaScript — язык программирования. Ни один из них не поддерживает, проверку типов, поэтому, например, ваш CSS может быть неработоспособным, когда пользователь попытается открыть вашу веб-страницу.

Flutter использует Dart в качестве языка. Весь внешний вид приложения и бизнес-логика написаны на нем. Dart поставляется со статической проверкой типов данных, и скоро появится null safety (прим. переводчика: уже появился), поэтому каждая строка кода в вашем приложении, будь то визуальное описание вашего приложения, придание ему стиля или управление бизнес-логикой вашего приложения, полностью типобезопасна.

Простая компоновка вашего приложения

Обычно мы используем наши веб-сайты для отображения данных из какого-то источника: база данных, API или что-то еще, от куда мы получаем данные, которые хотели бы отобразить. Представьте, что у нас есть массив объектов, которые возвращаются из нашего API, и вы используете, например, Angular для их отображения. Вы загружаете эти объекты во вспомогательный компонент, затем используете *ngFor для их итерации и вы скорее всего положите его в div. Но из коробки, для нестилизованного div, это будет выглядеть совсем просто. Вероятно, вы хотите, чтобы ваши элементы в этом списке отображались в столбце или строке, поэтому вам еще придется задействовать некоторые CSS или flexbox для этого.

С Flutter наоборот, вы размещаете дочерние элементы с помощью Column или Row, которые имеют свойство children, которое принимает массив объектов. При использовании этого свойства, вы можете записать ваши массивы в строку (элементы друг за другом) или в столбец (элементы друг под другом). С Flutter, вы можете быстрее получить визуальный макет, который вы хотите, прежде чем перейти к стилизации отдельных элементов в списке. По моему опыту это приводит к более быстрому скаффолдингу и прототипированию сайта без ущерба для конечного результата.

Контроль над каждым пикселем в области просмотра

Поскольку Flutter визуализирует каждый пиксель на экране, это дает дизайнерам и разработчикам большой контроль над тем, что именно они хотят видеть в приложении. Но рендеринг каждого пикселя на экране звучит как нечто, что будет сопровождаться большим ударом по производительности, и да, в наши дни — это, конечно, не так быстро, как рендеринг чистого HTML, но такие вещи, как канва с аппаратным (за счет GPU) ускорением, значительно повышают производительность в этой области. Традиционно проектируя веб-страницу в HTML, нужно учитывать различные браузеры, на которые вы ориентируетесь. Однако в случае с Flutter, если вы размещаете виджет Text с определенным шрифтом, он будет выглядеть одинаково, независимо от того, где он отображается, потому что Flutter контролирует, как этот конкретный виджет будет выглядеть на основе каждого пикселя.

Прощай, webpack!

Flutter использует Dart, поэтому приложение компилируется для своей целевой платформы, оно также переносит все зависимые пакеты (также написанные на Dart) в JavaScript. Dart — типобезопасный язык, который не поддерживает рефлексию, поэтому компилятор лучше понимает, что ваше приложение вызывает, а что нет. Это способствует лучшему tree-shaking (избавление от неиспользованного кода) и минификации вашего приложения. Flutter не нужен webpack для сборки приложения, что само по себе является довольно сильным аргументом в пользу Flutter (по крайней мере, на мой взгляд). В webpack нет ничего плохого; это высококачественный софт. Но это сложный инструмент и без того в сложном конвейере.

. . .

Но пока это все лишь теория

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

Рисование всего на канве также имеет свои последствия для производительности, но они не так плохи, как вы предполагаете. Я сделал тестовое приложение, которое интенсивно использует визуальные эффекты, и оно работает на моем MacBook со скоростью около 60 кадров в секунду. Даже когда вы тащите лист по экрану, оно все равно работает нормально, постепенно увеличивая размытие на изображении позади. Я ни в коем случае не специалист в Dart, так что, без сомнения, этот процесс можно было бы оптимизировать еще больше.

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

Представьте, если бы вы могли сделать веб-сайт, который работает быстро, и вы бы могли использовать один язык для разработки, стилей и написания бизнес-логики для вашего веб-приложения? Если бы webpack стал не нужен для вашего конвейера разработки? А если бы со временем у вас был серверный рендеринг и все те SEO-блага, которые есть сегодня у традиционных HTML-сайтов?

Если бы Flutter уже обладал всем этим, он мог бы стать непобедимым в вебе.

От переводчика:

Совсем недавно (03.03.2021) Flutter web перешёл в stable ветку! В своем первом релизе Google в первую очередь сосредоточился на вопросах производительности и улучшении точности рендеринга. Более подробно о нововведениях и изменениях можно почитать тут

P.S. Догадываюсь, что эта статья может вызвать много споров и критики, особенно у web разработчиков. Действительно есть много подходов и готовых библиотек для решения описанных выше сложностей. Но я не могу не разделить с автором всех плюсов, которые потенциально дает Flutter, да и впечатляющая скорость, с которой он развивается и завоевывает рынок мобильной разработки тоже вселяет определенную уверенность в успехе его Web составляющей.

Россельхозбанк
Меняем банк и сельское хозяйство

Comments 81

    +7
    Представьте, если бы вы могли сделать веб-сайт, который работает быстро, и вы бы могли использовать один язык для разработки, стилей и написания бизнес-логики для вашего веб-приложения?


    Как по мне, так это наоборот минус Flutter по сравнению с HTML/CSS/JS. Мешанина из разметки, логики и стилей в коде не облегчает создание web приложений, а по-моему, наоборот затрудняет. Не знаю, глубоко не изучал Flutter, но те портянки из кода с какой-то безумной вложенностью, которые я видел, не внушают доверия. Может я просто видел неправильный код, но мне так не кажется. Тем не менее не имею ничего против замены JS на Dart. Но исключительно в рамках написания логики сайта. Не вижу смысла что-то придумывать для замены HTML и CSS.
      –1
      По поводу разметки во Flutter:
      1. Вопрос привычки. Со временем приспосабливаешься.
      2. Нужно стараться сохранять виджеты небольшими.
      Но:
      3. Для разметки HTML или JSX, конечно, поприятней будут, т.к. XML-подобная разметка зрительно выделяется лучше.
        0

        Если верстальщику/дизайнеру нужно знать язык — это минус языку (фреймворку).


        Данные и код не должны смешиваться — разве что код вместе с данными write-only, или иным образом можно гарантировать что никто не будет править данные отдельно от кода, или что править будут только те кто знает язык кода — а это не всегда возможно.

          0
          Мне одному кажется, что переводчик ничего не верстал html/css и не писал на dart. Много тезисов отзываются во мне болью…
            0

            Например?

              0
              Что Вы выберете все в одном месте или LESS?
                0
                Конечно препроцессор, о чем речь, я собственно и писал в комментарии, что для web написано уже куча готовых решений практически для всего. Тут вопрос в зрелости и распространённости, Flutter Web только 2 нед. в первый релиз вышел.
                0
                Андрей, я ни коем образом Вас не хочу обидеть. Вам еще перед РСБ отчитываться по статье :)
          +2
          Поверьте, единая структура более разумна и удобна. Тот же JSX с CSS-In-JS (Tailwind, недавно появился Stiches) дарят лучший опыт написания тестируемого кода.
            0
            + к тому же сам по себе современный подход к разработке — при помощи Компонентов, концептуально очень схож с подходом по разработке при помощи Виджетов.
          +5
          Я тут заглянул на flutter.dev (в wiki числится, как официальный сайт) и там все на html + css + js (ладно, почти все). Так о какой замене идет речь? :)
            +1

            Flutter для приложений, а не для текстовых сайтов.

              +12
              Тогда Ок. Просто из статьи мне показалось, что
              Flutter вот-вот завоюет Web
              И речь там идет про
              Современные Web-сайты пишутся на HTML, JavaScript и CSS (и этот сайт в том числе). Наверно, вы сейчас прочитали это и подумали «да это же очевидно». А если я вам скажу, что можно написать сайт без использования этих трех технологий, у вас наверняка возникнут вопросы…
              Видимо показалось.
                +3
                В самом начале статьи идёт речь о Silverlight и Flash. Автор явно сравнивает Flutter с ними, определяя контекст сравнения и с html\css\js — SPA.
                Однако, автор не упомянул о, возможно, самом важном преимуществе фреймворка и языка — мультиплатформенность, гораздо более простую и доступную, чем прежде.
                Хороший пример Flutter Folio
                  0
                  Согласен, это одно из ключевых преимуществ, видимо предполагается, что все про это знают в контексте Flutter )
            +8
            Последний десяток лет браузеры очень хорошо научились оптимизировать рендеринг HTML+CSS с анимациями и эффектами. Думаю, производительность отрисовки на канвасе во Flutter будет страдать. Кроме того в HTML работает поиск по текстам, что позволяет найти или скопировать любой текст и это особенно важно для доступности. ИМХО это сильно ограничит применение этой технологии в вебе. По крайней мере про захват Web-а говорить слишком рано.
              +2
              и это особенно важно для доступности
              И для доступности, и для поисковой оптимизации.
                +8

                HTML предоставляет очень много возможностей помимо копирования. Навскидку:


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

                Если сайты на Flutter не будут предоставлять эти возможности, то «в топку» такие сайты.

                  0
                  блокировка рекламы

                  Этот аспект всерьез может подстегнуть индустрию (заказчиков) к использованию подобных фреймворков.
                +7

                Когда хоронят текущий веб, вспоминается песня ДДТ:


                Хоронили русский рок, хоронили
                Тучи пепла, толпы гари и пыли
                А он лежал в гробу хороший, пригожий,
                Совершенно на труп не похожий
                  +16
                  Вот мне интересно HTML, JavaScript и CSS вымрут до PHP или после?
                    +2
                    Вместе. Вместе с человечеством.
                    +8
                    Рисование всего на канве также имеет свои последствия для производительности, но они не так плохи, как вы предполагаете. Я сделал тестовое приложение, которое интенсивно использует визуальные эффекты, и оно работает на моем MacBook со скоростью около 60 кадров в секунду. Даже когда вы тащите лист по экрану, оно все равно работает нормально, постепенно увеличивая размытие на изображении позади. Я ни в коем случае не специалист в Dart, так что, без сомнения, этот процесс можно было бы оптимизировать еще больше.
                    Проверил на iPad — лагает, сильно, впрочем, как и ожидалось.
                    Текст на странице выделить нельзя, поиск по странице подглючивает.
                    Или предполагается что при попытке открыть такой «сайт» с мобильного устройства, меня будут настойчиво просить установить приложение? — лол, да это же, то, самое, «старое советское» будущее, ради которого стоило хоронить flash.
                      0

                      Андроид, ios, веб и много других устройств с одной кодовой базой — речь про это будущее.

                        +1

                        Cordova даёт это же, но без лагов.

                          0
                          чего ж тогда от нее побежали?
                            +4

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

                              0

                              Это принципиально разные подходы. Их нельзя сравнивать. Было бы все гладко у кордовы, никто бы не рыпался и с реакт нейтивом. А уж те кто на нативе пишут даунгрейдиться в кордову ради кросс платформы не желают.

                                0
                                А уж те кто на нативе пишут
                                Так им и так норм, собственно, зачем что-то менять?
                                А если некто уже умеет в сайты и js, и по-быстрому надо приложение, без мега-требований, при этом неохота, опять же, учить два новых языка и сопутствующих (если забить на мобильную винду)… Или смотреть со стороны бизнеса, и задача — обёртка мобильной версии сайта (не спрашивайте зачем)…
                                  –2
                                  не норм писать на нативе две кодовые базы
                        +3
                        У меня даже на десктопе ужасные лаги при попытке выдернуть шторку. После первого полного вытаскивания шторки начинает работать нормально
                          +1
                          Я сделал тестовое приложение, которое интенсивно использует визуальные эффекты, и оно работает на моем MacBook со скоростью около 60 кадров в секунду.

                          На десктопе на Intel® Core(TM) i5-6200U CPU @ 2.30GHz лагает как не в себя. Аж температура на 20 градусов поднялась.
                          +1
                          Такая же проблема, анимация лагает, в демке на десктопе с Ryzen 1700x. Причем лагает очень разражающе и с недостатким кадров.
                          Захватом веба тут как бы и не пахнет.
                            +1

                            У меня на Ryzen 3600 лагает выдергивание шторки вне зависимости от количества попыток. Скролл картинок вроде более-менее нормально. Если для анимаций на сайте не хватает ryzen 3600, то в топку такие сайты. Бонусом при первой загрузке шторка была задвинута за экран и ее совершенно не было видно до тех пор, как я ее не вытянул.

                          +4
                          Лично моё мнение Flutter для мобильной разработки хорош. Но в web не надо.
                            0
                            Когда хоронили Flash, одним из минусов называли высокий расход батареи.
                            Как с этим у flutter? Кто-нибудь в курсе?
                              0

                              Не заметил, чтобы приложения на флаттере жрали значительно больше натива, по крайней мере в мобдеве

                              +13
                              можно написать сайт без использования этих трех технологий

                              Можно. Но не нужно.

                              этого не произойдет, если вы не знаете, как писать эффективный JavaScript или если ваши навыки в CSS оставляют желать лучшего

                              Конечно, не произойдет. Учиться надо, а не искать волшебную таблетку.

                              нужно учитывать различные браузеры, на которые вы ориентируетесь

                              Нет, если строго следовать стандартам, которые гарантированно поддерживают все современные браузеры.

                              ваш CSS может быть неработоспособным, когда пользователь попытается открыть вашу веб-страницу

                              Разумеется, может. Если написан безграмотно.

                              Мда. Свежее поколение погромистов разработчиков не осилило стандартный стек технологий, банку срочно нужна модная контекстная реклама под видом технической статьи на айтишном ресурсе, а копирайтеру по совместительству — кредит за макбук платить надо а пользователи потом удивляются, откуда столько тормозящей ерунды со свистелками и перделками вместо вменяемых кроссплатформенных адаптивных сайтов…
                                0

                                Мне кажется более вероятным, что приложения будут писать на TS / HTML / CSS. Научиться их компилировать в native-код, обеспечить библиотеками и доступом к системным ресурсам — и тола JS программистов сможет писать native приложения)) не так уж и невозможно вроде… нужен только какой-нибудь "гигант", который начнёт это двигать.

                                  –2

                                  Это Кордова, она же phonegap в далёком 13 году. За это время это не оправдало надежды.

                                    +2
                                    PhoneGap вроде просто заворачивало HTML/JS во что-то вроде Электрона, разве нет?
                                      +1
                                      И где у кордовы компиляция в native?
                                        0
                                        ее нет конечно, я неточно выразился, я говорил о том, что эволюционно этап пройден и вопрос невозможности обсужден множество раз, потому что не получилось за 7 лет это реализовать никому. Ведь такой продукт растаскают тут же, это первая логичная вещь, которая приходит в голову — js в натив на мобилку. Это было бы очень круто но я не вижу даже намеков в эту сторону ни у кого, с react native радостно уходят на флаттер из-за его ништяков
                                    +1

                                    Тестовое приложение показывает наглядно, что пока не завоюет:


                                    Скрытый текст

                                    В принципе, можно постараться и на CSS тоже так всё сломать, но...

                                      –3
                                      детские баги. Десктопка только релизнулась.
                                      +2

                                      а как рекламу скрывать?

                                        +2
                                        Сочетанием клавиш Ctrl + W.
                                        +2

                                        Flutter уже никуда ничего не завоюет, потому что вышел Flutter 2 и надо бежать переписывать все свои Flutter-приложения.

                                          +1
                                          Интересно почему все так остро реагируют на сказанное в статье. Ведь автор восхваляя Flutter все равно признает, что у технологии есть критические для нынешнего рынка недостатки.

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

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

                                          Все идет к общему консенсусу, это видно уже сейчас по тем же нодаприложениям, где буквально уже все можно написать на JavaScript, кроме XML-разметки. Не забывайте, что сейчас в web активно прорывается полноценное 3D (игры, вставки на сайтах и пр.) и для более эффективного и производительного использования JavaScript-а уже маловато.

                                          Рано или поздно, что-то придет, а старая армия так и будет воевать за коммунизм те технологии, что использовались ими большую часть жизненнорабочего цикла.
                                            0
                                            старая армия так и будет воевать за коммунизм те технологии, что использовались ими большую часть жизненнорабочего цикла

                                            Не в этом дело. А в дезинсекции с помощью тактических ядерных боеголовок: совершенно избыточно использовать технологии, созданные для разработки приложений для случаев, когда требуется создать сайт. Ни для СМИ, ни для форумов, ни для сборников статей, ни для чего, что должно быть источником информации и средством публикации информации не требуются приложения. Магазины, банки, игры — вот перспективная ниша для фреймворков наподобие описываемого в статье. Для остального же подобные новые технологии не дадут пользователю ни какого-то сверхудобного, ни какого-то сверхбыстрого экспириенса по сравнению с традиционными HTML/СSS/JS/[и ещё что-то со стороны сервера]. Как верно заметили в комментарии ниже:
                                            Браузер умеет выполнять хренову кучу весьма сложных задач: рендеринг текста, выделение текста, поиск, рендеринг всяких прочих элементов, анимации итд итд. Но нет, давайте все перепишем и начнем рендерить вручную в канвас, заново все это имплементируя.

                                            У нас есть браузеры. Готовые и универсальные «фреймворки» для веба. Вот и давайте использовать инструменты по назначению, а тем, кто не научился этого делать — стоит научиться. И рассуждения о том, что HTML/СSS/JS это «слишком сложно» выглядят убого и жалко.
                                          +1
                                          Одно лишь слово — SEO — перечёркивает все амбиции Flutter в рамках веба. Бизнес на такой шикарный выстрел себе в ногу никогда не пойдёт.
                                            +3
                                            SEO далеко не всегда нужно. Лэндинги на Вордпрессе или на Тильде Flutter не заменит. Однако зачем SEO веб-приложениям с доступом по паролю например?
                                            +2
                                            Забавно, как flutter начнет изобретать велосипед, чтобы добавить фишечки обычного сайта, такие как выделение текста, поиск по сайту, инспекция разметки, индексация в поисковиках. Вангую, что гугл внесет новый стандарт индексации для canvas-js-only сайтов. Кроссплатформенность это хорошо, но производительность в браузере пока никакая
                                              +3
                                              Очень много проблем есть с рисованием на canvas что в 2d контексте, что в 3d. Проблемы со шрифтами, со сглаживанием, с потреблением видеопамяти. Я во флаттер на вебе не верю от слова совсем. Да и на мобилах в такой движок общего назначения не верю.
                                                0
                                                С мобилкой кстати все хорошо по произвидительности
                                                  0
                                                  Такие issue просто так не появляются github.com/flutter/flutter/issues/60267
                                                    0

                                                    Да и сам факт, что их счетчик тикетов дошел до 60к, как-то настораживает

                                                      –1
                                                      делите на три, ios android web
                                                  0
                                                  Для мобилок как задумка так и реализация выглядят в целом норм. Хотя вот недавно хотел полюбопытствовать как в изоляте можно померять текст для разбиения на строки, в зависимости от параметров шрифта и прочего — оказалось что никак, и это печально. Я нативщик, хотел поэкспериментировать и реализовать читалку на флаттере, но обломался.
                                                  А вот в флаттер для веба тоже совсем не верю.
                                                    0
                                                    Такие приложения как читалки вообще нельзя и не нужно делать кроссплатформенно, потому что это вопрос шрифтов, идеальной графики, правильной обработки тача и яркости, короче много очень точной платформенно зависимой работы.
                                                      0
                                                      А мне и не нужно было целое приложение. Думал одну вьюшку написать которая бы только за отображение и размещение текста отвечала.
                                                      А вопрос шрифтов и прочего — как раз единообразие плюс для пользователей имеющих несколько устройств на разных ОС.
                                                  +5
                                                  1. Заходим на официальную галерею флюттера с ПК:
                                                  gallery.flutter.dev/#
                                                  2. Медленный скролл, ненативное ощущение, загрузка CPU при скролле будто там майнят криптовалюту.
                                                  3. Осознаем что все это вместе с рисованием в канву уже было в Adobe Flash и JavaFX
                                                    0

                                                    Flutter в вебе ещё далеко ничего не завоюет.
                                                    Лаги на мобильных версиях сайта давно известны и сообществу и Гуглу соответственно. Если бы Гугл мог бы это быстро исправить, то сделал бы перед последним релизом. Но это не сделано, а стало быть проблема принципиального (возможно структурного) характера. Поэтому flutter, приходи в веб как 18 исполниться

                                                      0

                                                      Ох уж эти "заменители традиционного фронта"… После закономерного сдутия сильверлайта я перестал беспокоиться за свои нажитые непосильным трудом навыки :)

                                                        0

                                                        А может хватит изобретать какие-то велосипеды, чтобы переписать часть существующего стека на своих технологиях? Браузер умеет выполнять хренову кучу весьма сложных задач: рендеринг текста, выделение текста, поиск, рендеринг всяких прочих элементов, анимации итд итд. Но нет, давайте все перепишем и начнем рендерить вручную в канвас, заново все это имплементируя.

                                                          +1

                                                          Давно мы что-то то веб не хоронили, самое время для новой подобной статьи. Преимущества Flutter в статье оказываются какими-то смехотворными:


                                                          Во Flutter, если вы хотите сделать определенную часть контента горизонтально прокручиваемым, а не вертикально прокручиваемым, это так же просто, как сделать виджеты в SingleChildScrollView

                                                          Ух ты, почти так же просто, как overflow-x: auto


                                                          При использовании этого свойства, вы можете записать ваши массивы в строку (элементы друг за другом) или в столбец (элементы друг под другом)

                                                          Вау, и flex-direction: row/column тоже переизобрели


                                                          Однако в случае с Flutter, если вы размещаете виджет Text с определенным шрифтом, он будет выглядеть одинаково

                                                          Судя по приведенным демкам, "одинаково" означает "одинаково плохо"


                                                          Flutter не нужен webpack для сборки [...] В webpack нет ничего плохого; это высококачественный софт. Но это сложный инструмент и без того в сложном конвейере.

                                                          Так а в чем приемущество? Не используем чужой продукт, напишем свой, такой же сложный. Классический Not Invented Here (NIH)

                                                            +2

                                                            Гугл уже добрые десять лет, если не больше, свято чтит заветы Microsoft с их талантом находить фатальные недостатки в самых разнообразных технологиях окружающего мира.

                                                            +1
                                                            Не знаю как там с завоеванием веба, но я лично нашел для flutter web применение. Написал приложение на flutter (одно удовольствие работать с фреймворком), нет там кстати никакой мешанины из UI и логики, если правильно выстраивать архитектуру (кто пишет об этом явно не работал с flutter). Пару недель назад задался вопросом на чем мне реализовать админку. Я бэкенд разработчик и во фронте чуть меньше чем полный ноль, поэтому думал написать либо на jQuery, который я худо-бедно знаю, либо по-быстрому изучить основы какого-нибудь там Vue/React и реализовать самому с лапше-кодом, либо делегировать кому-то другому. Но потом вспомнил про flutter-web и подумал дай-ка попробую. И оказалось, что различий с flutter для моб. почти никаких нет. По крайней мере для этого юз кейса. В итоге сделал всё сам за 5 дней. Для flutter-web даже достойный wysiwyg есть, как оказалось. Так что flutter-web свою нишу найдет, думаю. Я лично очень рад что мне не нужно окунаться в мир html/css/js.
                                                              0
                                                              Flutter очень напоминает, как в старые времена всё писали на PHP и там была дикая мешанина из всего и вся в одном файле. К тому-же, сайт написанный на Flutter не будет никак индексироваться в поисковых системах, что для некоторых сайтов очень плохо.
                                                              И автор проверил производительность на своём Macbook, в то время, как 80% пользователей — это смартфоны, планшеты и прочие устройства, которым по производительности до macbook еще ого-го. Ну и HTML, JS, CSS и через 10 лет будут HTML, JS, CSS, а Flutter через 10 лет может загнуться и еще надо найти кто его знает.
                                                                –8
                                                                Очередная мертворожденная идея Гугла. Если Angular, появился в удачное время и смог занять свою нишу, то flutter сейчас непонятно кому нужен. Хошь писать приложуху? Пиши на Swift нативно, или на React Native, если ты у мамки веб разработчик. Оба варианта работают быстро и предсказуемо.
                                                                  0

                                                                  Автор также не указал, что canvas — не единственный способ представления приложения в веб. Его можно так же скомпилировать в привычные html + css + js.
                                                                  Пруф.

                                                                    0

                                                                    Я тоже так думал какое то время.

                                                                    Но, к сожалению, узнал правду из видео на оф. странице веб флаттера. А она в том, что html - это canvas APIs. А canvasKit - webassembly и webgl.

                                                                    В связи с этим, html меньше весит. И лучше подходит для мобилок. А cacanvasKit для десктопов, больше объем, но скорость тоже больше. По крайней мере они так заявляют в своем видео.

                                                                    0

                                                                    flutter — это "замена" программирования, но результат программирования — тот же самый, что и без этого заменителя — условно плоский веб.


                                                                    А вот за десятилетия никак не изобретут достойную технологию программирования простыми способами принципиально другого отображения мира — трёхмерного (вместо нынешнего плоского веба). Даже в конце 90-х годов был какой-то VRML, а потом идею использования трёхмерных пространств в браузере вообще куда-то забросили.

                                                                      –2

                                                                      Ещё бы Dart VM запилили в браузере, что бы соскочить с жаба скрипт, и ваше сказка будет

                                                                        0
                                                                        он был запилен с 12 года по 14 год, точнее был форк хрома Dartium какое-то время
                                                                          0
                                                                          Не взлетело у них тогда, это да, но и хайпа такого не было как сейчас, они его улучшают развивают, он становится безопаснее и быстрее, но блинский в итоге все равно будет dart2js(речь о веб), который как был дерьмо так и остался, это как купить красивую и быструю лодку с мотором ямаха, но плавать исключительно на веслах, тупняк какой то!
                                                                          пысы Дартиум я даже где то откапывал на китайском сайте))
                                                                            0
                                                                            Про dart2js надо у Wriketeam спросить какой у них оверхед и замеряли ли они его. Вроде бы там далеко не печально, а тайпскрип по вашему это не тоже самое, на веслах?
                                                                        0

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

                                                                          0
                                                                          Очередной костыль. Тормозной, глючный, требующий выкинуть все старое и запилить заново с нуля. Очевидно, его постигнет та же судьба, что и Flash, Silverlight, Coldfusion и множество других подобных поделок.
                                                                            0
                                                                            не думаю, в браузеры сильно лезет webassembly и webgl — все таки это надстройка над этими технологиями, а не отдельный плагин на брауpер типа flash, Silverlight
                                                                            0
                                                                            Очень кликбейтный заголовок. Честный заголовок звучит так: «Flutter возможно станет лучше web-приложений в некоторых случаях».

                                                                            Only users with full accounts can post comments. Log in, please.