Боль и слёзы в Svelte 3

    Вместо предисловия


    Статья будет полезна тем, кто так-же как и Мы решил попробовать Svelte в живом проекте. В нашу небольшую компанию пришёл заказ на разработку веб-админки для сервиса с бекэндом на Mongodb Stitch. В последние пару лет frontend Мы пишем на React или Vue (в зависимости от размера проекта и нужен ли ReactNative), но наслышав о красотах Svelte мы решили попробовать его, чтобы понять для себя так ли он хорош. И может нам тоже стоит дальше использовать его вместо Vue или React?..

    Кто такой Svelte?


    image

    Если в двух словах — это новый js фреймворк (но он таким себя не считает), который убийца React и Vue, и бла, бла, бла… В своей статье я хочу рассмотреть Svelte не какой он классный «под капотом», а с точки зрения удобства его использования в реальном проекте.
    Мы не делаем машины, мы на них ездим и у нас есть злые заказчики с еще не менее злыми сроками.

    Tutorial


    Первое с чего Вы начинаете знакомство с новым языком или фреймворков — это туториал на сайте. У Svelte это Svelte.dev/Tutorial.

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

    UI Kit и Стили


    image

    Поиски UI Kit для Svelte были отдельной болью для всех нас. Хотелось воскликнуть: «Хоть Material, Bootstrap… хоть что нибудь...».

    Были найдены только sveltematerialui.com и svelteui.js.org, которые в данный момент выглядели очень сыро.

    При простом импорте <Button/> из него, при сборке вывалилась ошибка из самого пакета, решать ошибки ui kit времени не было.

    Пробежав быстро по документации я решил от него отказаться в пользу «Ванилла» импорта из CDN.

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

    Использование JS без UI Kit вернуло меня мысленно на 10 лет назад ) Паровозы классов и добрая ностальгия ).

    Из-за того, что Svelte работает с DOM «по другому» в MaterialUI начали вылазить всякие гадости, связанные с тем как отображаются UI компоненты которые добавляются через js в dom. Например простой спиннер отображается через раз:

    image

    После долгих поисков что же пошло не так, выяснилось что спиннер в Material UI, добавляется через JS после того, как документ готов (onLoad) но после этого события Svelte запускает своё добавление в DOM и JS скрипт Material просто его не видит так как событие было раньше.

    Лечить это пришлось добавлением в родительский компонент Svelte:

        afterUpdate(() => {
            componentHandler.upgradeDom();
        });
    

    Стилизация


    Со стилями все предельно ясно, мы запихиваем все стили как в Vue. Вы пишете стиль и все в порядке, и потом пишете компонент UI (так как у Вас нет UIKit) который должен принимать параметры props, например width и height, и логично делаете это так:

    <script>
    export let width = '20px';
    export let height = '20px';
    </script>
    <style>
    .loader {
    	width: { width },
    	height: { height },
    }
    </style>
    

    А… нет, в стиле у Вас не получится вставлять переменные. Из этой ситуации Вы можете выкрутиться через «ReactWay» и делать динамические стили в «script» как переменные или функции с возвратом стиля.

    В итоге у нас опять каша, часть стиля в style часть в script. Чистый код получится только в том случае если у Вас нет параметров в стилях или у Вас только динамические параметры и они только в script.

    Routing и роутеры


    Без нормального роутера Вы не сможете сделать даже one page app.

    React, Vue при скалфолдинге 'Hello World' проекта уже идут с роутером в коробке (или можно его выбрать). Но как и всё в Svelte — это дается не просто.

    Нужно выбрать роутер самому, да и еще между очень похожими решениями. По правде говоря пока есть всего два роутера github.com/EmilTholin/svelte-routing и github.com/kazzkiq/svero.

    Оба очень похожи но я выбрал первый, выбирал по количеству звезд (да я знаю, я ужасный человек).

    Итак начнем его встраивать в наш MDL.

    Обернем всё в <Router url="{url}"> и Добавим <Link/> для ссылок из навигации.

    image

    Переходим в превью и смотрим, что получилось.

    А получилось то, что детские болезни Svelte продолжаются и в <Link/> нельзя передавать классы. Возник резонный вопрос а как Вы его будете стилизировать?

    Видимо это все еще в issues для роутера.

    К счастью Мы можем привязать к роутеру наш обычный a href=‘’ указав use:link за что отдельная благодарность.

    Ошибки


    В отличии от React который просто не даст Вам создать bundle и будет сильно «кричать» об ошибке, Svelte отлично соберёт всё с ошибкой. При этом если Вы забыли что-то npm install'нуть или export'ануть, все отлично соберется и просто покажет белый экран (Кстати говоря так было в первых версиях React).

    В React и Vue, Мы привыкли видеть такие ошибки еще на этапе билда или линта.

    В итоге Вам придется отлавливать ошибки и в двух местах. Справедливости ради — это есть в React и Vue, но гораздо реже и такие явные ошибки ловятся еще на стадии линта.

    Svelte просто необходим naming convention


    C этой проблемой Вы будете сталкиваться довольно часто — с отсутствием конвенции по наименованию.

    Например, вернемся к роутеру.

    Есть вот такой импорт:

        import { Router, link, Link ,Route } from "svelte-routing";
    

    Что из этого Link и link? Даже в таком маленьком проекте как у меня, уже возникла путаница с отсутствием конвенций имен в проектах используемых в Svelte.

    Конечно это должно было выглядеть в глазах ReactМэна вот так:

     
    import { Router, useLink, LinkComponent ,RouteComponent } from "svelte-routing";
    

    В Svelte есть подобие ref как в react’е, это ссылка на элемент dom или компонент.
    Официальный туториал гласит нам сделать это так:

    <script>
    let dialog;
    </script>
    <dialog bind:this={dialog} class="mdl-dialog» />
    

    А если у Вас будет 15 переменных в компоненте?

    <script>
    let loading;
    let pins;
    let dialog;
    let stitch;
    </script>
    <dialog bind:this={dialog} class="mdl-dialog» />
    

    Где и что из этого действительно переменные, а где ссылки на компоненты или элементы?
    Я бы изменил туториал и сделал примеры более правильными с точки зрения новичков и их конвенции переменных (см Туториал React для хорошего примера). Если Вы даёте делать винегрет переменных, было бы неплохо чтобы linter или bundler ругался на такой винегрет, как например, это сделано у golang.

    <script>
    let dialogElement;
    </script>
    <dialog bind:this={dialogElement} class="mdl-dialog» />
    

    Еще один пример «из жизни», когда Вы получаете какие-то данные в функции компонента и эти данные нужно отправить в Ваш View, где к части елемента UI у Вас прикручена какая-то переменная. И выглядит это у нас (вернее у нашего программиста) вот так:

      
    async function ReloadPins() {
            loading =  true;
            pins = await getAllPins();
            status = 0;
        }
    

    Когда я открыл его код, мне сразу «стало понятно», что здесь переменная которая state и какая из них привязана к нашему UI.

    Шучу, конечно же ничего не ясно. Причем даже не понятно меняется состояние или это просто вспомогательная переменная. В React это решается state, который хоть как-то вносит ясности.

    Что где изменилось и кто это сделал ?


    Переменные внутри Svelte компонента — глобальные и меняются они везде (привет Angular).
    Но есть и хорошая новость, они глобальны внутри одного компонента (пока Angular), поэтому это изменение всех и всеми не так уж и страшно внутри одного компонента.

    При этом Вы экономите время на «красоте» кода и не размышляете, что Вам сделать state переменной, а что оставить внутри функции (привет React) — у Вас все и везде.

    image

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

    Привязываем Stitch


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

    Чтобы использовать Stitch Вам придется пойти по «Ванильному» пути и вставить:

    <script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.4.0/stitch.js"></script>
    

    Так как при использовании npm и нормального import пакета, начинается проблема с ошибкой buffer.

    Не знаю связанно ли это со сборщиком Svelte или самим Stitch, или еще c чем-то, но времени ковырять у меня не было и пришлось просто добавить script с импортом, после чего всё успешно заработало.

    Это основные проблемы с которыми мы столкнулись при работе со Svelte. И сказать честно — в общем нам не понравилось, причём никому…

    Что в итоге:

    Для чего Вам пригодится Svelte ?


    • Если Вы работаете один и Вам срочно нужно сделать MVP или небольшую админку. С большой админкой будут проблемы так как при написании нового кода Вы забудете старый или нужно обязательно писать само-документированный код, так как Svelte не «заставляет» Вас это делать.
    • Если размер bundle Вам очень важен. Например, Вы делаете веб-app для страны в которой всё еще нет 3G или интернет очень медленный и очень дорогой. В большей части мира дорогие программисты, а не интернет, поэтому размер bundle в разумных пределах не будет актуальной проблемой в 99% случаев.
    • Если Вы только начинаете учиться писать на JS и делать фронтенд Svelte даст Вам всю свободу «выстрелить в ногу», в соседа по парте или устроить массовую стрельбу по ногам. На самом деле Вам не нужно будет учить JSX или долго разбираться в конвенциях кода, Вы сразу можете сделать Ваш первый фронтенд проект и увидеть, что у Вас уже что-то получилось и что-то даже работает.

    Исходя из последнего я совсем не понимаю зачем мэйнтэйнеры Svelte собираются делать поддержку TypeScript? Мы же любим Svelte как раз за «стрельбу по ногам» и TypeScript на мой взгляд это как вседорожные гусеницы для спорткара Svelte. И знаете, поработав со Svelte, я понял на сколько сильно за последние годы изменился JS, и что он совсем уже не JS.

    Svelte даёт возможность поработать в еще том, старом и ламповом JS, без PropTypes, Flow и TypeScript.

    Что мне понравилось?


    • Хорошо читаемые if/else, чего нет в Vue. Я бы очень хотел увидеть что-то похожее в Vue.
    • Можно создавать свои event в компонентах и избавиться от передачи в child коллбэков функции, для коммуникации между child > parent.

    Почему не стоит использовать Svelte ?


    • Нет ни одного полностью рабочего UI Kit. Трудно представить себе web app без UIKit, написать самим UI Kit могут позволить себе только крупные проекты, для которых как раз Svelte мало подходит. Прикручивание чего-то ванильного переходит в создание своих UI компонентов (своего UI Kit) или в борьбу с ошибками и «паровозами» классов.
    • Не явность части простых ошибок, и отлова их только на этапе тестирования.
    • Если Вы собрались делать мульти-платформенное приложение (а сейчас везде mobile first), Вам придется все переписывать на ReactNative или допиливать руками сгенерированный NativeScript (есть генератор NS из Svelte). Справедливости ради у Vue с мобильной разработкой тоже всё не очень хорошо, но она есть и кое-как рабочая.
    • Вам придётся позаботиться о написании очень четкой конвенции кода для своих разработчиков в проекте, так как туториал и примеры не сделаны для командной разработки.

    Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

    Хотите ли Вы попробовать использовать Svelte в будущих проектах?

    • 18,8%Очень хочу попробовать122
    • 19,3%Возможно125
    • 61,9%Зачем мне это, если есть React, Vue, Angular?401

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 80

      0

      Вполне возможно что svelte ещё не готов для продакшина по упомянутым Вами причинам. Но то что он состоялся это факт. Мне он интересен как фреймворк который изначально проектировался как universal first. См пост https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework. Поэтому если бы я его использовал то в паре с sapper. Хотя по нему также есть отзывы что он ещё сырой.


      Если исходить из того что топ фреймворком не может быть больше трёх интересно кого именно вытеснит svelte

        –15

        Тогда $mol вам должен быть ещё более интересен ибо:


        • маленькие бандлы
        • исполнение хоть на клиенте, хоть на сервере, хоть ещё где
        • ui-kit в комплекте
          +11
          Винтаж и Мол в каждой статье про сравнение JS-фреймворков. Это уже классика ;)
            –3

            И правильно — под лежачий мол вода не течёт. Мол надо продвигать через веб студии и лучше не в России, показывая технологичность разработки. Ожидать, что кто-то из Яндекса позвонит уже не приходиться. Им наоборот нужна видимость "сложной" работы. Которую мол сократит в разы. Нужно идти в народ. Отрицательные оценки это типичное проявление зависти. Это такой ресурс. Ничего не сделаешь.

              –2

              $tabilnost'

                0
                То есть, исходя из вашей логики вы рекламируете «шмоль»?
            +1
            Мне он интересен как фреймворк который изначально проектировался как universal first.

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

            Если исходить из того что топ фреймворком не может быть больше трёх интересно кого именно вытеснит svelte

            Как мне кажется Большая тройка в принципе не очень верно определена. Vue и React скорее UI фреймворк, а Angular скорее Application фреймворк и его имеет смысл сравнивать скорее с Ember. Вполне логичным кажется 3-ка UI фреймворков: React/Vue/Svelte. Angular/Ember/и кто-то еще ($mol?) ребята из другой оперы.
            +1
            На сколько я помню авторы Svelte говорили, что Svelte делался для Sapper.
            Чтобы одолеть Vue, Svelte нужен спонсор и большое комьюнити.
            Если побороть все детские болезни Svelte, лично я бы предпочёл его чем Vue.
            У Vue большое комьюнити в Китае.
              +3
              На сколько я помню авторы Svelte говорили, что Svelte делался для Sapper.

              Не встречал такого утверждения.

                0

                В статье на которую я дал ссылку выше изложены принципы которых придерживался разработчик svelte. Первый принцип это поддержка ssr. Второй поддержка universal. Именно эти принципы реализует sapper.

                  +1

                  Так это пункты идеального по мнению автора фреймворка для Node. Эти принципы были руквовдствующими при создании Sapper и в некоторой степени к этим принципам приближаются Next.js и Nuxt.js. Это практически никак не коррелируют непосредственно с UI фреймоврком Svelte.


                  Вот, кстати, эта статья в переводе.

                    0
                    Вы не совсем верно поняли. Автор пишет про принципы идеального Application фреймворка, а Svelte — это UI фреймворк. Sapper — это Application фреймворк поверх Svelte.
                0
                У Svelte отличное комьюнити в России — это плюс. Он реально красив, я как дизайнер говорю. Конечно он слишком молод для продакшена пока, хотя некоторые уже перелезли на него, но мне нравится подход. Я, опять же, как дизайнер дико не люблю jsx. Потому мне Vue залетел много больше чем React, ну и Vue — красивее Angular. Svelte красивее чем Vue, будем посмотреть, но пока он ещё не готов, да
                  –6
                  В нашу небольшую компанию пришёл заказ на разработку веб-админки для сервиса с бекэндом на Mongodb Stitch. В последние пару лет frontend Мы пишем на React или Vue (в зависимости от размера проекта и нужен ли ReactNative), но наслышав о красотах Svelte мы решили попробовать его, чтобы понять для себя так ли он хорош.

                  Получается вы решили потренероваться в новом фронт-стеке за счёт заказчика? Интересны подробности, как принималось решение и что в итоге с судьбой проекта. Бюджет освоили, сдали и забыли?)
                    +6
                    А разве малобюджетная заказная разработка не вся такая?
                      +2
                      Заказчику обычно глубоко всё равно на чём это будет написано. Ему важно чтобы работало и было сделано в срок. Дело не в бюджете, а в том, что если проект крохотный, не сложный и нужно всего несколько разработчиков Мы можем себе позволить поэкспериментировать, так как сроки рассчитаны с запасом.
                      Как я писал в статье выше, Svelte точно не для «больших» проектов и команд. Для большого у нас есть React.
                      Хотелось «пощупать» Svelte в продакшене. Так-же мы «щупали» Vue в своё время, он понравился и Мы сейчас успешно используем его там где не нужен Native а только Web-only.
                      +8
                      За статьи про этот ужасный фреймворк и его рекламу надо уже банить.
                        +2
                        Скорее это антиреклама )
                          +3
                          а можете рассказать поподробнее о том, что не так со Svelte?
                            –4
                            Могу. Во-первых, авторы подобных статей уже сделали это за меня своими статьями. Во-вторых, что это еще за Svelte 3? Никому не нужный фреймворк, который вдобавок постоянно переделывается и обновляет номер мажорной версии. В-третьих, фреймворки должны упрощать разработку, а не превращать ее в бег с препятствиями по пересечённой местности.
                              +18
                              Пока конкретики ноль
                                –19
                                Мне не нравится в нём всё.
                                  +2

                                  Конкретики стало меньше чем 0...

                                    –6
                                    Сколько пользы от этого фреймворка и этой статьи, столько и у меня конкретики :)
                          +2

                          С вот этим моментом непонятно.


                          Можно создавать свои event в компонентах и избавится от передачи в child коллбэков функции, для коммуникации между child > parent.

                          В чем особая разница между
                          <Button on:click={handleClick}/>
                          и
                          <Button onClick={handleClick}/>?

                            +1
                            Автор говорил про кастомные события, отправляемые через dispatch
                              0

                              Вопрос остается тем же. В чем практическая польза от создания CustomEvent, по сравнению с обычным вызовом функции?

                                0
                                Не нужно обрабатывать на промежуточных уровнях, можно не обрабатывать вовсе
                                  +1

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

                                    +2
                                    Верно, сделано это специально, чтобы управлять этим процессом. Собственно, история такая, что в Ractive, предыдущем фреймворке автора Svelte, события всплывали по-умолчанию и часто это было причиной коллизий. Однако даже прокидывать вручную ивенты значительно проще, чем коллбеки:

                                    <!-- достаточно просто указать дерективу без обработчика -->
                                    <Child on:something />
                                    


                                    <!-- и можно сразу ловить ивент от Child на Parent -->
                                    <Parent on:something={doSomething} />
                                    
                              +2
                              В Svelte можно прокидывать коллбеки через пропсы, но обычно ивенты имеют ряд плюсов:

                              1) Ивент может иметь N подписчиков, коллбек только одного
                              2) Ивент может быть легко прокинут через N слоев иерархии, в отличии от коллбека. В Svelte это процесс делается вручную, но сделано это специально, потому что когда ивенты всплывают автоматом, на каком-то уровне иерархии уже сложно понять кто и откуда их прокинул.
                              3) На ивенте можно применить модификатор once, с коллбеком придется запорачиваться.
                              4) Так как ивенты в Svelte основаны на CustomEvent, они прекрасно работают с Custom Elements.
                                0
                                Ивент может иметь N подписчиков, коллбек только одного

                                Синтаксис шаблонов дает место только для одного подписчика: <Button on:click={handleClick}/>, остальные нужно добавлять императивным кодом. Так ли часто это нужно?


                                Ивент может быть легко прокинут через N слоев иерархии

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


                                Так как ивенты в Svelte основаны на CustomEvent, они прекрасно работают с Custom Elements.

                                Очень гипотетический плюс, для ванильного Svelte-приложения пользы никакой.


                                И в целом как-то механизм таких событий не вписывается в идеологию Svelte – минималистичный рантайм. Для реализации событий тянутся createEventDispatcher и bubble методы, хотя можно было бы просто оставить инлайновые вызовы функций без лишних оберток.

                                  +2
                                  Синтаксис шаблонов дает место только для одного подписчика: <Button on:click={handleClick}/>

                                  Можно два обработчика навесить, если надо:


                                   <Button on:click={handleClick1} on:click={handleClick2} />

                                  Можно обработать ивент в текущем компоненте и передать на уровень выше:


                                   <Button on:click={handleClick1} on:click />
                                    +1

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


                                    Если вам это при работе со Svelte это пока еще не стреляло в ногу, рад за вас, но мне с таким подходом не по пути.

                                      +1

                                      Я, пожалуй, с Вами соглашусь.
                                      На практике 1-й пример мне ни разу не приходилось применять, и я даже кейс затрудняюсь придумать.
                                      2-й же вариант на мой взгляд вполне читаемый, если уже имеется понимание как в Svelte пробрасываются события.

                                        0

                                        Сейчас еще подумалось – а как это работает со spread props?


                                        То есть получается что <Button {...props} on:click={handleClick} /> и <Button {...props, 'on:click': handleClick} /> это не одно и то же.

                                          +1

                                          Всё верно, "намазываются" только свойства и атрибуты. Т.е. в вашем варианте в компонент будет передано свойство с именем 'on:click', содержащее ссылку на функцию. Никаким образом она не будет относиться к соответствующему обработчику события.


                                          Вот накидал пример, чтобы продемонстрировать это наглядно.

                                            0
                                            А вот это не очень, я разочарован
                                              0
                                              А по-вашему как это должно работать? И главное, где вы видели чтобы это работало как-то иначе?
                                                0
                                                В реакте, вот, пожалуйста codesandbox.io/s/determined-banach-610d5
                                                  0
                                                  Да, но только в Svelte у нас нет необходимости прокидывать коллбеки вообще. Как правильно все это решается ивентами и описанный вами подход скорее bad practice, так как способствует запутанности кода. Особенно если скрывать эти коллбеки внутри объектов.

                                                  В этом смысле, Svelte скорее способствует хорошему дизайну ваших приложений.
                                                    0
                                                    В принципе да, я согласен, но после стольких лет с реактом, какие-то привычные вещи не совсем так работают в Svelte как ты думаешь и надо к этому приспосабливаться, но это не проблема конечно) просто например я не знаю заранее понадобиться мне onChange только лишь, или например onBlur тоже, а в Svelte просто надо явно указывать какие ивенты можно пускать наружку
                                    +1
                                    Синтаксис шаблонов дает место только для одного подписчика: <Button on:click={handleClick}/>, остальные нужно добавлять императивным кодом. Так ли часто это нужно?

                                    Это не так, написали ниже.

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

                                    Намного меньше действий, пропсы не захламляются лишними вещами. Много плюсов можно придумать, другое дело, если вам не надо, так не используйте просто.

                                    И в целом как-то механизм таких событий не вписывается в идеологию Svelte – минималистичный рантайм. Для реализации событий тянутся createEventDispatcher и bubble методы, хотя можно было бы просто оставить инлайновые вызовы функций без лишних оберток.

                                    Если вы это не используете, вам в рантайм это и не попадает. Поэтому тут никаких противоречий с идеалогией.
                                +3

                                Нет варианта "до прочтения этого поста собирался скоро, теперь подожду с годик

                                  +1
                                  А вы попробуйте, мне зашло под определенные кейсы.
                                  +3
                                  Не хватает в опросе:
                                  — использовал, понравилось, буду везде использовать
                                  — использовал, понравилось, но для мелких проектов
                                  — использовал, не понравилось
                                  Я юзаю сейчас для небольшого проекта. Тут всё относительно хорошо, писанины меньше. Но для сложных — увольте. Лучше день потерять, потом за 5 минут долететь.
                                    +2

                                    На Реакте тоже вначале было все непросто.
                                    Снобы таинственно вещали что он якобы смешивает html+js а это нарушает какие-то принципы которых они сами не догоняют (т.к. корифеи программирования учили, что плохо смешивать view, model и controller, в то время как наличие js в jsx не делает компонент ни моделью ни контроллером)


                                    Документация по flux, которая ниразу не помогала в понимании что это такое также добавляла сложностей.


                                    Но потом как-то все стало более ясно. В том числе благодаря появлению большого количества статей, новых библиотек (redux, mobx)

                                    +17
                                    Переменные внутри Svelte компонента — глобальные и меняются они везде (привет Angular).
                                    Но есть и хорошая новость, они глобальны внутри одного компонента (пока Angular)...
                                    Не понял при чём тут Angular и о чём эти «привет» и «пока». Переменные в Ангуляре не глобальны. И вообще как может быть что-то глобально, но только «внутри одного компонента». По-моему Вы как-то неправильно понимаете значение слова «глобальный».
                                      +5

                                      Вообще все минусы перечисленные в статье высосаны из пальца. Особенно понравился пункт: взяли говвй ui kit не на свелте, и он не заработал. А чего вы хотели?
                                      Да согласен, что сейчас все очень туго с готовыми наборами дизайнов, и тяжело это использовать для быстрого старта нового проекта, в одиночку. В случае с продуктовой разработкой ui kit никак не поможет, т.к. всегда приходят требования по дизайну что проще сделать новый компонент.
                                      Собственно на нашем проекте уже давно используется 2 версия, в планах переход на 3. За все время уже насобиралась внутреняя библиотека компонентов и создание новых страниц — это сказка. Все работает быстро, бандлы получаются мизерными.

                                        +1
                                        В этом и проблема, чтобы запустить что-то на Svelte Вам нужно делать свой UIKit, с учётом, что Svelte как раз подходит для небольших проектов, создание своего UIKit выходит в большие трудозатраты из чего выходит, что в продакшене Svelte просто не нужен. Разбираться с его косяками и делать свой UIKit с нуля — это долго и дорого. И что в качестве выиграша вы получите? Меньший размер bundle во времена 4G… Я лично не понял что за плюшки кроме размера мы получаем.
                                        И как быть с поддержкой проекта написанного на Svelte? Вы пробовали когда-нибудь вводить нового разработчика в существующий Svelte проект? Мы попробовали… Но это лично моё мнение и оно может отличаться от мнения других )

                                        Если не секрет, поделитесь — зачем Вам был нужен Svelte в проекте? Почему Вы выбрали именно его.
                                          +6
                                          Меньший размер bundle во времена 4G…

                                          Покажите мне его в глубине подвального ресторана, в поезде на пути между Питером и Москвой, в окружении тысячи других любителей 4G...

                                            –1

                                            Там и статика не факт что загрузится, какой уж там Svelte

                                            +4
                                            опять же, вы сравниваете введение в проект на новой технологии, которую вы ещё и сами не знаете, нового разработчика, который тоже её не знает — чего вы ожидаете? библиотека относительно новая, оформленных в виде статей и документации практик и подходов ещё нет достаточно.

                                            плюсами я считаю значительное сокращение размера бандла и лаконичность кода, простейший компонент на Svelte — 1 строка кода.

                                            мы реализовали в данный момент небольшой виджет, и размер кодовой базы по сравнению с React там значительно меньше.
                                              +1
                                              простейший компонент на Svelte — 1 строка кода.

                                              Формально 0 строк кода — тоже компонент.

                                              +5
                                              Меньший размер bundle во времена 4G

                                              Не надо так! Отъезжаешь немного от Москвы и начинаешь ненавидеть разрабов с такой позицией. Белый экран в ожидании бандла. А если еще не самый мощный телефон все это интерпретировать…
                                                +3

                                                4g редкость, качественный 4g без потерь связи еще меньше. Особенно когда рассматривается покрытие аудиторией по всему миру.
                                                Проблем с поддержкой никаких нет. Процесс выбора данной технологии у нас на проекте остался за кадром, но наша команда подхватила идею и начали активно ее развивать. Сейчас практически все новые функции пишут с участием svelte. Проект у нас очень старый и там накопилось много legacy кода, на разных стеках технологий. Переделка шагом за шагом функций на svelte занимает немного времени за счет компонентности. Но это же и доступно в реакте и вью. Только получаешь на выходе легковестный пакет, где находится только то что необходимо пользователю в данный момент. Из за этого время до первого рендера экстремально маленькое.
                                                По поводу обучения новых сотрудников: никаких проблем, как тимлиду приходилось мне учить новеньких на проекте не знакомых с данной технологией, никаких проблем с этим нет, 2 часа воркшопа простенького и пару часов на поиграться лично. Пока что особо невероятных проблем не испытываем. Раньше испытывали ннхватку интелисенса, но исправили данный нюанс своим плагином для vs code :)
                                                https://marketplace.visualstudio.com/items?itemName=ardenivanov.svelte-intellisense

                                                0
                                                В случае с продуктовой разработкой ui kit никак не поможет, т.к. всегда приходят требования по дизайну что проще сделать новый компонент.

                                                Это особенность фреймворков с убитой кастомизацией. В гибких фреймворках нет проблемы взять готовый компонент и кастомизировать его под себя.

                                                +3
                                                Почему нельзя было взять material-components-web и на их основе запилить врапперы на светл? Подсмотреть примеры реализаций можно было на других фремвёрках.
                                                  +4
                                                  Из-за того, что Svelte работает с DOM «по другому»

                                                  Даже стало интересно, что вы имеете ввиду пол «работает с DOM по другому», это как?
                                                    +1

                                                    Не вычисляет изменения Dom через сравнения в рантайме.

                                                      0
                                                      Как это связано с контекстом статьи? И главное как это влияет на интеграцию внешней либы для работы с DOM?
                                                        0

                                                        Нет наработанных практик по интеграции.

                                                          +1
                                                          Во-первых, слишком обще. Во-вторых, наработка практик интеграции никак не связана с работой с DOM. В-третьих, есть не просто практики, а даже специальные инструменты именно для подобных интеграций. Спасибо за ваши предположения, но все же хотелось бы услышать интерпретацию автора.
                                                    +2
                                                    Как по мне, то Svelte отличный framework. Качественная документация, френдли комьюнити. Пока Svelte молод и, конечно, есть куда расти. Сейчас он хорошо подходит, если не ищешь готовый кит, а есть дизайнеры со своими макетами.
                                                      +3
                                                      Шучу, конечно же ничего не ясно. Причем даже не понятно меняется состояние или это просто вспомогательная переменная. В React это решается state, который хоть как-то вносит ясности.

                                                      Можно еще уточнить, а что реально дает вам это «знание»? В целом, в Svelte все переменные это стейт. Как и принято в JS, каждая переменная имеет свой скоуп — некоторые имеют скоуп всего компонента, некоторые только функций или иных блочных выражений. Тут как бы ничего нового и неизведанного. Какой смысл вообще выделять что-то в какой-то state?
                                                        +4
                                                        > Зачем мне это, если есть React, Vue, Angular?
                                                        Помню, когда Vue выходил, все тоже самое спрашивали, но без Vue в предложении) Прошло еще три года с момента выхода Vue и вот он обгоняет React по количеству звездочку на github. Вероятно, через три года станет ясно, зачем это все нам и наверное, появится похожая статья про очередной негодный фреймворк, в конце которого, в голосовании, будет пункт: «Зачем мне это, если есть Svelte, Vue, Angular?»
                                                          +6
                                                          Кому интересно, опубликовал ответную статью с подробной работой над ошибками: https://habr.com/ru/post/469411/
                                                            0
                                                            Мне нравится идея Svelte, однако пока что он не может предложить мне всего того, что я сейчас использую под React. Подумаю через 1.5 — 2 года, а на данный момент его еще рано использовать в реальных проектах.
                                                              +1

                                                              А что вы используете в React?

                                                              +2
                                                              А… нет, в стиле у Вас не получится вставлять переменные. Из этой ситуации Вы можете выкрутится через «ReactWay» и делать динамические стили в как переменные или функции с возвратом стиля.


                                                              Vue, к примеру, тоже так не умеет
                                                                –1
                                                                Там же про «React Way» )
                                                                +5

                                                                Пока что не люблю свелте, зашел почитать аргументы против евангелистов — чот слабенькие =(
                                                                Почти всё решится сводится к тому что "чет сыровато". Неужели нет серьезных по существу?

                                                                  +1
                                                                  Точно такие же мысли, за исключением того что Svelte люблю) Почитайте еще ответную статью для интереса.
                                                                  +1
                                                                  React, Vue при скалфолдинге 'Hello World' проекта уже идут с роутером в коробке (или можно его выбрать). Но как и всё в Svelte — это дается не просто.

                                                                  Берем обычный pagejs, импортим, пишем роутинг и… все. Я вот даже не фронтендер, но как-то осилил за минут так 10.
                                                                  Ну и относить к боли и слезам отсутствие кучи разных ui китов (из которых нормальных вообще три калеки) — ну я не знаю
                                                                    0
                                                                    Пару месяцев назад начал следить за ним, как всегда самые пытливые говорили просто бомба. А пока что, сыроват и на конкурента Трём китам пока не дотягивает…
                                                                      +1

                                                                      Вообще не понимаю о чем говорит автор.
                                                                      У нас крупная админка написана на Svelte где 90% кода я писал в одиночку.
                                                                      Никаких uikit не использовали и надобности не было… я взял готовый бутстрап с материал дизайном и просто писал html — все работает. У нас около сотни компонентов.


                                                                      Спасибо.

                                                                        0

                                                                        О том, что эти 90% кода вы могли бы и не писать, потратив это время на что-то более полезное.

                                                                          0

                                                                          О том, что, например, в экосистеме Реакта вам понадобилось бы только половина написанного вами кода, остальное бы уже было готовое.

                                                                            +1
                                                                            Ох уж эти любители всего готового, лишь бы палец о палец лишний раз не ударить…
                                                                              +1

                                                                              Ох уж эти изобретатели велосипедов, лишь бы бизнес-задачи не решать

                                                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                        Самое читаемое