Все потоки
Поиск
Написать публикацию
Обновить
220.56

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

Лучшие стратегии разработки фронтенда в 2022 году

Время на прочтение13 мин
Количество просмотров25K
Эта статья специально написана так, чтобы ставить перед читателями неоднозначные задачи, вызывать у них противоречивые чувства и давать им пищу для размышлений. Речь здесь пойдёт о множестве свежих идей, о которых вы, вероятнее всего, пока не слышали.

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



Ещё я постараюсь выражать свои мысли как можно проще — так, чтобы даже люди, не являющиеся разработчиками, смогли бы, хотя бы в общих чертах, меня понять.
Читать дальше →

MoscowJS 50 — как это было

Время на прочтение7 мин
Количество просмотров3.7K

Давно мы тут не писали, но наконец-то появился повод исправиться. Но для начала представимся для тех, кто с нами еще не знаком.

MoscowJS — это ИТ-сообщество разработчиков на JavaScript. Мы проводим регулярные неформальные бесплатные мероприятия в онлайне и офлайне уже больше 10 лет подряд. Подробнее о нас и команде организаторов можно прочитать на нашем сайте.

После долгого перерыва и экспериментов в онлайне мы, наконец, вернулись в офлайн — и в партнерстве с TINKOFF 11 сентября провели в Москве большую юбилейную конференцию MoscowJS 50. Дважды юбилейную — этим событием мы отметили сразу и круглое число в названии встречи и десятилетие нашего сообщества. Под катом вы найдете ссылки на записи докладов и много-много фотографий. 

Читать далее

Бандлинг всего того, что не относится к обычному JavaScript-коду

Время на прочтение8 мин
Количество просмотров5.9K
Предположим, вы работаете над веб-приложением. В таком случае весьма вероятно то, что вам приходится иметь дело не только с JavaScript-модулями, но и с самыми разными другими ресурсами. Это и веб-воркеры (их тоже пишут на JavaScript, но они обособлены от обычного кода фронтенда), и изображения, и стили, и шрифты, и WebAssembly-модули, и иные материалы, входящие в состав сайта.

Ссылки на некоторые из подобных ресурсов можно включить непосредственно в HTML-код, но часто они логически связаны с компонентами, используемыми во многих местах проектов. Например, таблица стилей для особого выпадающего списка связана с JavaScript-кодом, реализующим этот список, а изображения иконок связаны с компонентом, реализующим панель инструментов. Точно так же WebAssembly-модуль связан с JavaScript-кодом, обеспечивающим использование этого модуля. Удобнее было бы обращаться к подобным ресурсам прямо из соответствующих JavaScript-модулей и загружать их динамически тогда (или если), когда загружается соответствующий компонент.


Ресурсы разных типов, импортируемые в JS-коде

Правда, в большинстве крупных проектов используются системы для сборки таких проектов, которые выполняют дополнительные оптимизации и реорганизации контента. Например — это бандлинг и минификация ресурсов. Они не могут выполнять код и предсказывать то, каким будет результат его запуска. Они не могут и анализировать все строковые литералы в JavaScript-программах и делать предположения касательно того, является ли конкретная строка неким URL, ведущим к какому-то ресурсу, или нет. Как сделать так, чтобы бандлеры «видели» бы динамические ресурсы, загружаемые JavaScript-компонентами и включали бы их в сборку проекта?
Читать дальше →

Самопаркующаяся тачка в 500 строк кода

Время на прочтение25 мин
Количество просмотров13K

В этой статье мы "научим" автомобиль выполнять самостоятельную парковку с помощью генетического алгоритма.

В 1-м поколении автомобили будут иметь случайный геном и будут вести себя хаотично.

К ≈40-му поколению автомобили понемногу начнут учиться парковке и будут все ближе и ближе подбираться к парковочному месту

Чтобы увидеть эволюционный процесс прямо в браузере вы можете запустить ? симулятор эволюции, .

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

Читать далее

SQLite-песочница в браузере

Время на прочтение4 мин
Количество просмотров31K

Чего мне всегда не хватало, так это аналога JSFiddle для SQLite. Онлайн-песочницы, в которой можно быстро проверить SQL-запрос и поделиться с другими.

Вот чего хотелось:

— Возможность загрузить готовую базу, а не писать SQL для создания таблиц.
— Подключать как локальные базы, так и удаленные (по url).
— Сохранять базу и запросы в облаке.
— Бесплатно и без регистрации.
— Свежайшая версия SQLite.
— Минимализм.

В итоге сделал сам

DOM, который построил Chrome. Или не построил? Или не Chrome? Или не DOM?

Время на прочтение15 мин
Количество просмотров25K

Обычный, теневой, виртуальный, инкрементальный… Как получилось, что простой программный интерфейс доступа к элементам веб-страниц обзавелся таким количеством «родственников»? Чем современные фреймворки не устраивает стандартная объектная модель документа или просто DOM? Что и как на самом деле отрисовывает браузер в процессе рендера веб-страницы?

Всем привет, это Макс Кравец из Holyweb. Помните сцену из Матрицы, в которой один из юных кандидатов в Избранные наставляет Нео: «Не пытайся согнуть ложку. Первое, что ты должен понять — ложки не существует!»? Давайте переформулирую: «Не пытайся изменить DOM...». А вот о том, что прячется под многоточием, мы сегодня и поговорим.

Читать далее

Термо принтер и JavaScript

Время на прочтение6 мин
Количество просмотров20K

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

Читать далее

Адаптивный layout — как переверстать весь проект, не перевёрстывая его

Время на прочтение9 мин
Количество просмотров17K


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


Всем привет! Меня зовут Юрий Голубев, я разрабатываю frontend в Почте Mail.ru. Сегодня я хочу поделиться опытом того, как мы добавили адаптивности и возможности кастомизации в интерфейс, а заодно — открыли новый для себя способ написания адаптивных компонентов.

Читать дальше →

Как спарсить любой сайт?

Время на прочтение6 мин
Количество просмотров231K

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

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

Узнать как

Обход блокировки РКН с помощью магии Service Worker'ов

Время на прочтение6 мин
Количество просмотров24K


Приветствую, Хабр!

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

TL;DR


Суть способа в обыгрывании возможности Service Worker'ов проверять контент на подконтрольных ему страницам. Если воркер не находит определённого текста на странице — происходит редирект. Таким образом вместо заглушки провайдера о том, что сайт заблокирован пользователь переходит на незаблокированный домен.
Читать дальше →

Первое знакомство с JavaScript-библиотекой Solid

Время на прочтение8 мин
Количество просмотров27K
Solid — это реактивная JavaScript-библиотека для создания пользовательских интерфейсов без использования виртуальной DOM. Она однократно компилирует шаблоны, превращая их в узлы реальной DOM, а благодаря тщательно спланированным механизмам обновления контента при изменении состояния приложения выполняется только тот код, который необходим для визуализации этого изменения.

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


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

Тех, кому не терпится взглянуть на код готового проекта, приглашаю заглянуть сюда.
Читать дальше →

Любопытные извращения из мира IT, или зачем мы JS в C++-код вкомпилили

Время на прочтение4 мин
Количество просмотров13K

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

Мы занимались разработкой... скажем так, системы отображения интерактивного контента для рынка одной азиатской страны. Пользователь имел "умное устройство", например, ТВ-приставку или смарт-телевизор, а "интерактивный контент" представлял собой по сути дела html/js/css-приложение, которое прилетало на устройство с трансляции или из интернета и отображалось в прозрачном окне поверх видео. В качестве веб-движка использовался модифицированный Blink из гугловского Chrome.

И вот, в один прекрасный день после какого-то из обновлений, один наш партнер (читай "поставщик контента") обратился к нам с проблемой: что-то не работает.

Читать далее

Core Web Vitals: с чего начать?

Время на прочтение18 мин
Количество просмотров11K


Согласно web.dev, улучшение качества взаимодействия с пользователем — ключ к долгосрочному успеху любого сайта. Понимая, насколько важен для развития интернета качественный пользовательский опыт, компания Google в 2020 году представила инициативу Web Vitals. Это единое руководство по метрикам качества, которые необходимы для обеспечения удобного взаимодействия с пользователем. Хотя за прошедшие годы Google создала ряд инструментов для измерения эффективности взаимодействия и составления отчетов (Lighthouse, PageSpeed Insights и Measure), Web Vitals должна упростить измерение производительности и помогает разработчикам сайтов сосредоточиться на самых важных показателях — Core Web Vitals.
Читать дальше →

Ближайшие события

Дайджест свежих материалов из мира фронтенда за последнюю неделю №484 (6 — 12 сентября 2021)

Время на прочтение3 мин
Количество просмотров8.2K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Компоненты-конструкторы: мощь ng-content в Angular

Время на прочтение9 мин
Количество просмотров18K

Проекция контента — одна из базовых возможностей Angular, о которой слышали почти все. А с недавних пор по ней появилась и хорошая официальная документация. Тем не менее в реальных задачах разработчики часто обходят ng-content стороной, прибегая к более сложным и перегруженным решениям и усложняя дальнейшее использование и поддержку компонента.

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

Давайте посмотрим

V8 в бэкенде С++: от одного JS-скрипта до фреймворка онлайн-вычислений

Время на прочтение31 мин
Количество просмотров11K
В этой статье я расскажу о долгом путешествии, в котором простая идея выноса в JavaScript часто меняющихся фрагментов алгоритма постепенно выросла в универсальный фреймворк, позволяющий быстро создавать микросервисы и так же быстро их развивать. Сейчас он служит основой для множества микросервисов в Яндекс Go. Тут не будет много специфики Go. Вместо этого будет много разработки и решений технических задач (а не продуктовых). Ещё я, конечно, расскажу про возникшие в процессе трудности: если вам, например, интересно, как V8 уживается с корутинами или как мы оптимизировали работу с ним для производительности, то добро пожаловать под кат.


Читать дальше →

Пришло время избавиться от Angular и сэкономить миллиарды долларов

Время на прочтение6 мин
Количество просмотров59K
Я знаю, что эта статья вызовет поток гневных комментариев, но… так тому и быть. Кто-то должен наконец озвучить то, о чём уже некоторое время размышляют программисты, обладающие некоторым опытом.

Я занимаюсь программированием более 20 лет, работал в некоторых из самых приличных североамериканских компаний. Вот уже несколько лет я наблюдаю за тем, что происходит в сфере разработки интерфейсов. Ситуация здесь постоянно ухудшается. В частности, я говорю о «модных технологиях», о довольно крупных фрагментах JS- и CSS-кода, претендующих на остроумное исполнение, которые вроде как должны пользоваться неистовой популярностью у толп новичков. Теперь в эти толпы включают даже и опытных разработчиков, которым полагается что-то понимать в том, чем они пользуются.



Количество случаев практического применения фреймворков, выдающих подобный код, наподобие Angular, растёт как снежный ком. В результате разработчиков подхватила лавина, ввергнувшая их в настоящий «ад программного кода». При этом события развиваются по нарастающей. Сейчас нельзя заметить даже признаков того, что всё это безумие хотя бы выходит на какой-то постоянный уровень.

Каждый день мне на почту приходят вакансии. Компании всех размеров и мастей рыщут в поисках ОПЫТНЫХ Angular 4, 5, 6, 7, 8, 10, 12-разработчиков, которые как минимум 5 лет занимались разработкой и поддержкой того дурдома, который все называют «современнейшими пользовательскими интерфейсами».

Это — не нечто «современнейшее». Это — дурдом.

Несколько лет назад я был на собеседовании в EA (Electronic Arts). Там мне сказали, что компания избавляется от всех своих UI-фреймворков и возвращается к написанию кода на чистом JavaScript (речь идёт о модулях, или о том, что тот, кто работает с jQuery, назвал бы JS-плагинами). Я был удивлён и заинтригован.

Теперь о причинах подобного хода знают не только в EA, но и во всех остальных компаниях.
Читать дальше →

Приёмы ускорения кода на JS и других языках: подборка от разработчика поиска Яндекса

Время на прочтение17 мин
Количество просмотров71K
Привет! Меня зовут Виктор Хомяков, в Яндексе я работаю над скоростью страниц поиска. Однажды мне в голову пришла идея обобщить свой опыт и систематизировать приёмы ускорения работы кода на JavaScript. То, что получилось в итоге, собрано в этом материале.

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


Читать дальше →

Кажется, мы стали забывать основы фронтенда

Время на прочтение5 мин
Количество просмотров46K

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

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

Читать далее

Альтернативы Redux в 2021 году

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

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



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

Вклад авторов