JavaScript *

using System;
public class Example
{
    public static void Main()
    {
        var x = Math.Round(11.1, MidpointRounding.AwayFromZero);
    }
}

Вступление

Позвольте мне начать. У нас был монолитный фронтэнд с большим наследием. Сервисы жили в одних файлах с компонентами. Всё было вперемешку и с лозунгом на фасаде: “Пусть всё будет под рукой – так легче найти, что надо". И не важно, что длина файла 200+, 300+, 500+ или даже больше строк кода.

Цель

Cделать всё читабельнее, меньше и быстрее.

Реализация

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

С приходом ES6+, стало возможно использовать import … from синтакс – это отличная фича, ведь мы можем также использовать export … from.

Tic Tac Toe, часть 0: Сравнение Svelte и React
Tic Tac Toe, часть 1: Svelte и Canvas 2D
Tic Tac Toe, часть 2: Undo/Redo с хранением состояний
Tic Tac Toe, часть 3: Undo/Redo с хранением команд
Tic Tac Toe, часть 4: Взаимодействие с бэкендом на Flask с помощью HTTP

На сайте React'a есть туториал, в котором описывается разработка игры Tic Tac Toe. Я решил повторить разработку этой игры на Svelte. Статья охватывает только первую половину туториала, до реализации истории ходов. Для целей ознакомления с фреймворком этого вполне достаточно. Каждый раздел статьи соответствует разделу туториала, содержит ссылки на исходный код обоих фреймворков.

• В статье не рассматриваются JS-фреймворки из списка TOP-3
• При разработке на JS-фреймворке не из списка TOP-3 приходится решать на порядок больше технических вопросов, чем это ожидается в начале разработки
  
• История основана на реальных событиях

Которая родилась в процессе изучения кошмаров LexicalEnvironment и вообще ликбеза на тему "Почему оно работает так".

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

Мы очень рады анонсировать новую пятую версию styled-components! Новая версия полностью обратно совместима с предыдущей при условии использования React^16.8.

Бету пятой версии можно попробовать уже сейчас:

npm install styled-components@beta

Нужна версия React, поддерживающая React.hooks, т.е. react@^16.8 react-dom@^16.8 react-is@^16.8

А теперь об изменениях!

Быстро. Еще Быстрее. Styled-Components.

Когда больше чем 2 года назад мы выпустили вторую версию, мы обещали фокусироваться на производительности. Мы уже сильно ускорили работу библиотеки в течение нескольких релизов. Так, мы получили десятикратное увеличение скорости в версии 3.1 и еще 25% ускорение в версии 4.

К пятой версии, библиотека styled-components стала еще быстрее! Сравнивая с 4 версией, мы получили:

• на 19% меньший размер минифицированного кода (16.2kB vs. 13.63kB min+gzip) ️
• на 18% быстрее инициализация на клиентской стороне
• на 17% быстрее обновление динамических стилей
• на 45% (!!!) быстрее серверный рендеринг

Javascript — странный. Не верите? Ну попробуйте тогда преобразовать массив строк в целые числа с помощью map и parseInt. Запустите консоль (F12 на Chrome), вставьте код ниже и нажмите Enter

['1', '7', '11'].map(parseInt);

Вместо ожидаемого массива целых чисел [1, 7, 11] мы получаем [1, NaN, 3]. Но как так? Чтобы узнать в чём тут дело, сначала нам придётся поговорить о некоторых базовых концепциях Javascript. Если вам нужен TL;DR, пролистывайте статью до самого конца.

Здравствуйте, меня зовут Дмитрий Карловский, и я… обожаю MAM. MАМ управляет Агностик Модулями, избавляя меня от львиной доли рутины.

Агностик Модуль, в отличие от традиционного, это не файл с исходником, а директория, внутри которой могут быть исходники на самых разных языках: программная логика на JS/TS, тесты к ней на TS/JS, композиция компонент на view.tree, стили на CSS, локализация в locale=*.json, картинки и тд, и тп. При желании не сложно прикрутить поддержку любого другого языка. Например, Stylus для написания стилей, или HTML для описания шаблонов.

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

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