Обновить
128K+

JavaScript *

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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №417 (25 — 31 мая 2020)

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

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

5 главных причин того, что JS-разработчики будут использовать Deno вместо Node

Время на прочтение5 мин
Охват и читатели29K
Создатель Node.js Райан Даль выпустил новую платформу, которая рассчитана на решение многих проблем Node.js. Возможно, вашей первой реакцией на эту новость будет: «О, отлично, очередной JS-фреймворк? Его мне только и не хватало…». Я отреагировал на эту новость точно так же. А вот после того, как я немного вник в особенности Deno, я понял причины, по которым Deno можно назвать в точности тем, что серверным JavaScript-разработчикам нужно в 2020 году.



Сравним Deno и Node.js и рассмотрим 5 основных причин того, что хорошего способна дать разработчику эта платформа. В частности, речь идёт о том, что, благодаря Deno, в распоряжении того, кто раньше использовал Node.js, окажется более удобный и современный инструмент.
Читать дальше →

Alpine.js на конкретном примере

Время на прочтение6 мин
Охват и читатели43K

Возможно, вы уже слышали про Alpine.js. Если нет, то это "Vue.js на минималках". "Angular 1 для миллениалов". Называйте, как хотите, главное, чтобы вам было понятно.


Зачем нам еще один фреймворк? Ну, Alpine хорошо вписывается в свою нишу. По факту, он – альтернатива большим фреймворкам для сайтов, где эти большие фреймворки не нужны. Например, меня, модного web-developer'а, запрягли писать многостраничный сайт. Мне нужно элементарно сделать форму и всякий другой интерактив. Что я буду делать? Возьму jQuery – друзья не поймут, на чистом JS всё писать тоже не комильфо. К тому же я уже знаю реакты, ангуляры и вью, знаю, что такое data-driven подход. Как мне теперь данные до отправки в HTML хранить?


Тут и приходит на помощь Alpine.js. Можно, конечно, Vue или React прикрутить. Но React без JSX никто в здравном уме писать не будет, а Vue минифицированный через CDN весит 34 kB (против 8.1 kB у Alpine). Так и получается, что выбор падает на Alpine.

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

Возможно, вам не нужен Svelte, чтобы уменьшить ваш JavaScript

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

Сейчас популярно мнение, что текущие Javascript-фреймворки непомерно большие, а новый фреймворк Svelte очень компактный. Поэтому всем нужно переходить на него, и проблема размера JavaScript решится сама собой.


Недавно вышла статья "Хороший ли выбор Svelte для реализации виджета?" с опытом реализации проекта с критичным размером бандла. Это отличный повод проверить обещания пиарщиков Svelte на реальном проекте.


Давайте его проанализируем!

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

Новшества ES2020, которые мне очень нравятся

Время на прочтение7 мин
Охват и читатели28K
В последние годы JavaScript развивается очень быстро. Особенно это характерно для периода, следующего за выходом стандарта ES6 в 2015 году. С тех пор в языке появилось множество замечательных возможностей. Немало нового было предложено и для включения в стандарт ES2020.



Уже сформирован окончательный список возможностей, появления которых можно ожидать в стандарте после его утверждения. Это — хорошая новость для всех любителей JS. Автор статьи, перевод которой мы сегодня публикуем, говорит, что среди этих возможностей есть такие, которым он особенно рад. До их появления ему, в тех ситуациях, в которых они применимы, было гораздо тяжелее писать код. По его словам, появись они в языке раньше, они сэкономили бы ему много времени и сил.
Читать дальше →

Putout: линтер нового поколения

Время на прочтение3 мин
Охват и читатели4.7K

В 2015 году Николас Заказ опубликовал статью с похожим названием, только вместо Putout было ESLint. В те времена это было действительно так, ESLint безусловно стандарт дефакто в мире JavaScript линтеров. Однако совершенству нет предела, и любому успешному инструменту приходит на смену еще более успешный, либо дополняет его устраняя недостатки. Об одном из таких инструментов мы сегодня поговорим, однако начать хотелось бы с истории.

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

Процесс: Создание Vue 3

Время на прочтение10 мин
Охват и читатели12K


Уроки, полученные от написания следующей основной версии Vue.js


Автор: Эван Ю (Evan You)


В течение прошлого года команда Vue работала над следующей основной (major) версией Vue.js, которую мы надеемся выпустить в первой половине 2020 года (эта работа продолжается на момент написания данной статьи). Идея новой основной версии Vue сформировалась в конце 2018 года, когда кодовой базе Vue 2 было около двух с половиной лет. Это может показаться не таким уж долгим периодом в жизни программного обеспечения, но идеи фронт-энда сильно изменились за этот период.

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

Как мы делали график с горизонтальным скроллом на d3.js

Время на прочтение6 мин
Охват и читатели6.9K

Если в приложении нужно выводить много графических данных, диаграмм, интерактивных виджетов – важно позаботиться о UX, чтобы пользователю было удобно работать. Способ вывода данных особенно важен, если приложение открывают и на мониторах, и на смартфонах. Делимся опытом, как мы реализовали достаточно нетривиальное решение – кастомный скролл с помощью библиотеки визуализации данных d3.js.


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

Современный JavaScript: взгляд со стороны

Время на прочтение3 мин
Охват и читатели5K
Сегодня я попыталась помочь другу использовать JS-модуль, который он нашёл на Github. Мой друг отличный учёный, но не специалист по JS, Поскольку в течение последних шести я занимаюсь исследованиями юзабилити и преподаю в Массачусетском технологическом институте, то у меня пошёл мороз по коже от того, насколько всё запутано. Куча ненужных исключительных ситуаций, загадочных ошибок и отсутствие должной обратной связи. И мне кажется, что я не слишком помог ему пережить то разочарование, которое он испытал за этот час мучений или около того, пока он не сдался.

Всё было примерно так…

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

Постепенно вводим TypeScript в ваш проект на React

Время на прочтение7 мин
Охват и читатели14K
Привет, Хабр!

В последнее время в области front-end особую популярность приобретает комбинация React+TypeScript. Соответственно, возрастает актуальность грамотной миграции с JavaScript на TypeScript, желательно в сжатые сроки. Сегодня мы хотели бы обсудить с вами именно эту тему.


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

Обход графа: поиск в глубину и поиск в ширину простыми словами на примере JavaScript

Время на прочтение5 мин
Охват и читатели275K
Доброго времени суток.

Представляю вашему вниманию перевод статьи «Algorithms on Graphs: Let’s talk Depth-First Search (DFS) and Breadth-First Search (BFS)» автора Try Khov.

Что такое обход графа?


Простыми словами, обход графа — это переход от одной его вершины к другой в поисках свойств связей этих вершин. Связи (линии, соединяющие вершины) называются направлениями, путями, гранями или ребрами графа. Вершины графа также именуются узлами.

Двумя основными алгоритмами обхода графа являются поиск в глубину (Depth-First Search, DFS) и поиск в ширину (Breadth-First Search, BFS).

Несмотря на то, что оба алгоритма используются для обхода графа, они имеют некоторые отличия. Начнем с DFS.
Читать дальше →

Аутентификация — CUSTOM SETUP / AWS Amplify + React Native

Время на прочтение23 мин
Охват и читатели11K

cognito


Одна из самых запрашиваемых тем, среди подписчиков моего канала Димка Реактнативный — это аутентификация и авторизация в приложении React Native. Поэтому я решил посветить этому вопросу отдельный лонгрид и перед тем как мы начнем кодить, необходимо разобраться с определением Аутентификация/Авторизация.

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

Насколько хорошо вы знаете JavaScript?

Время на прочтение1 мин
Охват и читатели9.3K


Доброго времени суток! Как известно, одной из характерных черт JavaScript, наряду c мультипарадигменностью, слабой (динамической) типизацией, автоматическим управлением памятью и прототипным наследованием, является тот факт, что JS — это однопоточный (синхронный) язык.

Что касается синхронности, то ключевым элементом здесь выступает стек вызовов (call stack). Если вы впервые о нем слышите, то настоятельно рекомендую прочитать эту статью и посмотреть это видео.

Насколько хорошо вы знакомы с тем, как работает JS под «катом»?

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

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

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

Время на прочтение6 мин
Охват и читатели6.8K
Всем привет! Меня зовут Саша, я сооснователь и по совместительству главный разработчик в Quarkly. В этой заметке я хочу рассказать о том, как концепция атомарного CSS, которой мы придерживаемся, вкупе с недостатками функционала Styled-System (и Rebass, как частного случая использования этой библиотеки) сподвигли нас к созданию своего собственного инструмента, который мы назвали Atomize.

О каждодневном совершенствовании JavaScript-программиста

Время на прочтение11 мин
Охват и читатели15K
Автор статьи, перевод которой мы публикуем сегодня, старается постоянно совершенствовать свои JavaScript-знания и навыки. Он хочет рассказать о том, как, стремясь к профессиональному росту, строит свою работу.


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

Хороший ли выбор Svelte для реализации виджета?

Время на прочтение4 мин
Охват и читатели8.8K

Привет! Меня зовут Дмитрий Усов, я фронтенд-разработчик в Ситимобил. Буквально несколько месяцев назад появилась задача создать виджет для заказа такси через сайт. В этой статье я хотел бы рассказать, почему для этой задачи был выбран Svelte, поделиться своим мнением о его достоинствах и недостатках, а также полезными ссылками, если вы решитесь изучать или применять эту технологию.


CitymobilSvelte

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

Первый взгляд на записи и кортежи в JavaScript

Время на прочтение7 мин
Охват и читатели52K

UPD от переводчика из 2025 года:


This proposal has been withdrawn #394

В этом посте мы вкратце рассмотрим предложение в стандарт ECMAScript «Record & Tuple» от Робина Рикарда и Рика Баттона. Это предложение добавляет два вида составных примитивных значений в JavaScript:


  • записи (records) — неизменяемая и сравниваемая по значению версия простых объектов;
  • кортежи (tuples) — неизменяемая и сравниваемая по значению версия массивов.

image

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

Vue.js компонент для справки/документации

Время на прочтение4 мин
Охват и читатели4.5K

VB-preview


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

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

Анонс онлайн-митапа NskTechTalks #12: куда расти фронтенд-разработчику и что делать, если ничего не выходит?

Время на прочтение1 мин
Охват и читатели1.1K
image

Если долго смотреть на разработчика, то можно увидеть, как он становится тимлидом. А иногда совсем наоборот: можно обнаружить, что разработчик решает одни и те же задачи и никуда не растёт. В этом случае, если вовремя не вмешаться, инженера настигает выгорание, увольнение или даже уход из индустрии. Так что делать, если вы узнали в описании коллегу или самого себя? Наша разработчица Вероника Самохина много лет наставничает у фронтендеров и выделяет четыре кризисных сценария в их профессиональной жизни. Разберёмся, какие бывают проблемы, и как их решать.
Читать дальше →

DataStore — CRUD (Create Read Update Delete)

Время на прочтение11 мин
Охват и читатели7.8K

Прощай Redux, MobX, Apollo! Грань между бэкендом и фронтендом сломана! Инновационый шаг эволюции стейт менеджеров.


Одна из самых сложных задачах при разработке веб и мобильных приложений — это синхронизация данных между устройствами и выполнение автономных операции. В идеале, когда устройство находится в автономном режиме, ваши клиенты должны иметь возможность продолжать использовать ваше приложение не только для доступа к данным, но также для их создания и изменения. Когда устройство возвращается в оперативный режим, приложение должно повторно подключиться к бэкэнду, синхронизировать данные и разрешить конфликты, если таковые имеются. Для правильной обработки всех крайних случаев требуется много недифференцированного кода, даже при использовании кэша AWS AppSync SDK на устройстве с автономными мутациями и дельта-синхронизацией.


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


Amplify DataStore позволяет разработчикам писать приложения, используя распределенные данные, без написания дополнительного кода для автономного или онлайн-сценария.


Вы можете использовать Amplify DataStore для автономного использования в режиме «только локальный» без учетной записи AWS или предоставить весь бэкэнд с помощью AWS AppSync и Amazon DynamoDB.


DataStore включает в себя Delta Sync с использованием вашего бэкенда GraphQL и несколько стратегий разрешения конфликтов.

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