Про 200 webpack-плагінів для перформансу на конференції JavaScript fwdays'20 | 14 березня
×Закрыть

Приклад проекту на Svelte

Коли ти шукаєш роботу на позицію Front End то треба знати щось з популярного React, Angular, Vue, а краще розбиратись в одному, а інші хоч поверхнево знати, принаймні такої стратегії притримувався б сам

Та я займаюсь серверною розробкою і тому можу дома гратись з різними JavaScript каркасами і коли на одному код стає занадто заплутаним переносити на інший каркас і в процесі рефакторити

Проект «карта вакансій» з самого початку була на чистому JS, потім на jQuery + TypeScript, зараз React + TypeScript і ось переношу на Svelte + TypeScript GitHub

React мені подобається, і якщо десь на нього нарікав то лише тому що мало досвіду, робив без Redux-а бо на мою думку він ускладнює код, сподобалась підтримка TypeScript + JSX = .tsx, з нею набагато зрозуміліше встановлювати в інтерфесі props + state які очікує компонент

Замість Redux використовував свій об’єкт Container в якому можна було підписатись на подію зміни фільтра одного компонента і викликати setState вже в іншому, так це антипатерн, код став заплутаним і перестав приносити задоволення при його зміні, переписувати було мало бажання, а ось спробувати щось нове саме те

Де я вперше почув про Svelte складно сказати, принаймні в останньому Front-end дайджесті жодної згадки про нього, лише в коментарях

Подивившись пару уроків, побачивши що зрозумілий, почав переносити на Svelte, перше розчарування, що в середені *.svelte файлів відсутня можливість писати в форматі TypeScript, підключати *.ts файли можна, а ось вказати тип вже ні

В цілому Svelte має гарну документацію, в основному викристовував svelte.dev/examples, значно лаконічніший ніж React, для мене показово як виглядають приклади «Click counter»:
React

import React, {useState} from "react";

function Example() {
    const [count, setCount] = useState(0);

    function handleClick() {
        setCount(count + 1);
    }

    return (
        <div>
            <p>{count}</p>
            <button onClick={handleClick}>Click me</button>
        </div>
    );
}

Svelte

<script>
    let count = 0;

    function handleClick() {
        count += 1;
    }
</script>

<div>
    <p>{count}</p>
    <button on:click={handleClick}>Click me</button>
</div>

То що, хто буде починати домашні проекти на Svelte?

LinkedIn
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Пример на реакте, стоит переписать с хуками. Но в целом да, реакт не всегда зе бест

Дякую, React приклад оновив і оновив в Svelte прикладі HTML структуру, щоб були однакові

Перестаньте новые фреймворки придумывать, прошу вас...

Тоді треба усім перестати програмувати

Программировать-то можно и нужно.

Но не зря ещё в дипломных работах если пункт вроде этого:

1.2 Аналіз існуючих аналогів програмного продукту. Обґрунтування доцільності розробки програмного продукту

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

github.com/vuejs/vue/pulls
Больше 100 PR различного масштаба.

И тут
github.com/apple/swift/pulls
Больше 500

Если в первом случае PR скорее вокруг того, чтобы фигурно выражаться, то во втором — исправления недочётов, в том числе и языка.

Простите, мне показалось или вы сравнили язык с фреймворком?

Самопальные фреймворки vs язык + фреймворки эппла.
Да, я знаю, что сравнил, но не дописал выводов.

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

В реальной жизни фронт-енд разработчика на данный момент нет никакого зоопарка. Есть три фреймворка, с которыми работает подавляющее большинство. Это никак не зоопарк. Всё остальное, делится на 2 типа:
— то, что осталось валяться с прошлых времён и по-тихоньку отмирает
— то, что появляется на свет нового. Причины самые разные. Но их появление — это хорошо, так как приносит в сообщество новые идеи и подходы.

Если какой-то новый фреймворк появляется, это не значит, что все должны резко на него что-то переписывать.

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

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

А тут координальных разниц — минимум 3

пора бы уже похоронить этот свелте-хайп. Сначала были неоднократные вбросы на хабре, теперь добралось и доу. Скоро джуны пересядут на это новое гавно и расползется по проектам как метастазы. Есть уже дефакто — ангуляр, реакт и вуе. Всё, этого достаточно и покрывает 100% любых потребностей. Остальные недофреймворки и хайповые пристрелить и похоронить.

Колись так само могли казати і про jQuery, Backbone, Underscore

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

Есть такая штука, как Haxe. Умеет в JS с 2006 года. Для сравнения, TypeScript появился в 12, Dart в 11м году. Haxe вообще один из первых, если таки не первый, серьезный заменитель JS.

Так я к чему. Всякие вот эти Svelte... Могли бы быть сто раз реализованы на Haxe через макросы еще 10 лет назад. Это одна из киллер-фич языка — генерация кода в компайл-тайм.
Однако, велосипеды типа Svelte хайпят, а хакс, как основу для таких вещей, почему-то, упорно никто не замечает :)

Відкриваю офіційну документацію Getting started with Haxe/JavaScript
і приклад коду:

import js.Browser;
class Main {
    static function main() {
        var button = Browser.document.createButtonElement();
        button.textContent = "Click me!";
        button.onclick = function(event) {
            Browser.alert("Haxe is great");
        }
        Browser.document.body.appendChild(button);
    }
}
а на чистому JavaScript-і буде лаконічніше

На самом деле, это немного обманчивое ощущение.
С одной стороны, Haxe код более громоздкий, потому что содержит типизацию и по своему синтаксису ближе к Java, наверное. Но с другой стороны, может делать код лаконичнее, чем в JS.
Пример с оффсайта топорный почему-то :) Может быть переписан вот так:

import js.Browser.document;
import js.Browser.alert;
class Main {
    static function main() {
        var button = document.createButtonElement();
        button.textContent = "Click me!";
        button.onclick = _ -> alert("Haxe is great");
        document.body.appendChild(button);
    }
}
Еще, в роадмапе лежат функции на уровне модулей, так что объявление класса можно будет дропнуть совсем.

-------
Что касается более громоздких примеров, где хакс как раз выигрывает. У меня на пет проекте express.js, я решил его прокачать хаксом немного, а то стандартный синтаксис напрягал. Как раз то, о чем я и говорил — генерация кода на лету:

Вот такой хакс код:

class EventsRouter implements IRouter {
  @:get("/events.get")
  function getEvent(id:String) {
    res.asJson({id: id, title: "Event Title"});
  }
}

Компилируется в следующий JS код:

class EventsRouter {
  constructor() {
    this.__router.get("/events.get", $bind(this, this.getEvent));
  }
  getEvent(req, res) {
    var status = {isSuccess: true, message: "Operation done."};
    var id = Std.string(req.query.id);
    if (id == null || id.length == 0) {
      res.writeHead(400, {"Content-Type": "application/json"});
      status.message = "Invalid request";
      status.isSuccess = false;
      res.end({status: status, data: null});
    }
    else {
      res.writeHead(200, {"Content-Type": "application/json"});
      res.end({status: status, data: {id: id, title: "Event Title"}});
    }
  }
}

И на лету внедряет валидацию входящих параметров, подставляя ответ сервера с ошибкой, если данные невалидны.

А как многострочное форматирование кода вставить?) А то лапша вышла
Нашел

а 6К евро/год вы заплатилиза саппорт или ждать багфикса годами?

Гитхаб откройт же, там все фиксится и опенсорс. Платная поддержка — это допы для компаний.

Знаем мы, как фиксится) пулл-реквесты по полгода-год висят, ожидая мерджа в мастер; авторов проектов с завышенным ЧСВ, которые тупо все твои ишью закрывают не вникая и мертвые проекты

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

Через місяці пиши автору на почту або де доступний, навіщо пів року то чекати?

если таки не первый, серьезный заменитель JS.

ныне хоть С++ в JS можно «компилировать».

Это одна из киллер-фич языка — генерация кода в компайл-тайм

таких языков вообще есть.

как основу для таких вещей

haskell-js? scala-js? другие штуки с кодогеном-js?

Используя хуки я тебе напишу ещё короче чем твой svelte.

Хуками ти всеодно додатково обертаєш

const MyButton = () => {
    const [value, setValue] = useState(0);

    const buttonClicked = () => { setValue(value + 1) };

    return (
      <div>
        <div>{value}</div>
        <button onClick={buttonClicked}>Click</button>
      </div>
    );
};

Подписаться на комментарии