Обновить
149.85

JavaScript *

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

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

5 приемов по разделению «бандла» и «ленивой» загрузке компонентов в React

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

image


Разделение Javascript-кода на несколько файлов называется разделением «бандла» или сборки (bundle splitting). Это позволяет загружать только тот код, который который используется приложением в данный момент, другие части загружаются по необходимости (по запросу пользователя).


Распространенные случаи разделения сборки и «ленивой» или отложенной загрузки (lazy loading) включают в себя следующее:


  • Загрузка дополнительного кода при переходе пользователя к новому представлению (view — слой, отвечающий за визуальное отображение)


  • Загрузка такого кода может быть связана с определенным действием, таким как прокрутка или нажатие кнопки


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


  • Это приводит к тому, что когда пользователь захочет получить доступ к определенной функциональности, она уже будет готова

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

Как Лёня с React на Swift переезжал

Время на прочтение7 мин
Охват и читатели11K
Всем привет! Меня зовут Лёня, я фронтенд-разработчик в компании KOTELOV и выпускник курса «Мидл фронтенд-разработчик» в Яндекс.Практикуме. Общаясь с коллегами, которые занимаются мобильной разработкой, я понял, что у них всё гораздо сложнее, чем в вебе. Я взял свой телефон в руки, посмотрел на известные приложения типа телеги или Яндекс.Музыки с точки зрения человека, который их пишет, и подумал: «Вау, как круто! Я тоже хочу так уметь!»

Тогда я принял твёрдое решение изучить iOS-разработку и написать собственное приложение. На выбор было два языка: Objective-C и Swift. К динозаврам моё отношение подозрительное, поэтому я принял решение набивать шишки обо что-то помягче и посвежее.

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



Готовимся к переходу — изучаем SwiftUI


Два года назад Apple выпустила SwiftUI — новый фреймворк для своего языка. До этого разработчики писали на UI Kit, но это дело прошлого. Думаю, что на нём до сих пор пишут лишь потому, что сложно в один день переписать весь легаси-код на новый лад. Для себя я уже давно вынес правило: никогда не изучай старое, если есть новое. Но на всякий случай я изучил различия между старым UI Kit Storyboard и SwiftUI, а также мнения людей, которые в теме.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №468 (17 — 23 мая 2021)

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

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

Использование ECMAScript-модулей в Node.js

Время на прочтение6 мин
Охват и читатели30K
ECMAScript-модули (кратко их называют ES-модулями) — это модули, формат которых описан в стандарте ECMAScript, при работе с которыми используются инструкции import и export:

// ECMAScript-модуль

// инструкция import
import myFunc from './my-func';

//инструкция export
export myOtherFunc(param) {
  const result = myFunc(param);
  // ....
  return otherResult;
}

В Node.js, начиная с версии 13.2.0, имеется стабильная поддержка ES-модулей.



Этот материал посвящён особенностям работы с ES-модулями в Node.js.
Читать дальше →

Полное руководство по инкрементной регенерации статических сайтов с помощью Next.js

Время на прочтение10 мин
Охват и читатели22K
Год назад во фреймворке Next.js 9.3 появилась поддержка генерирования статических сайтов (Static Site Generation, SSG), что сделало его первым гибридным фреймворком. Я к тому моменту уже несколько лет с удовольствием пользовался Next.js. Но тот релиз сделал Next.js моим новым стандартным инструментом. После того, как я много и серьёзно поработал с Next.js, я присоединился к Vercel для того чтобы помогать компаниям, вроде Tripadvisor и Washington Post, в деле внедрения Next.js и расширения того, что у них получилось.

В этом материале мне хотелось бы исследовать новый виток эволюции Jamstack — механизм инкрементной регенерации статических сайтов (Incremental Static Regeneration, ISR). Здесь вы найдёте руководство по ISR, а так же — практические примеры использования этой технологии, демонстрационные проекты и рассказ о сопутствующих внедрению ISR компромиссах.



Если в двух словах описать ISR, то окажется, что эта технология позволяет, при внесении каких-то изменений в материалы сайта, мгновенно обновлять статический контент. Полная пересборка проекта при этом не нужна. Гибридный подход Next.js позволяет использовать ISR в сфере электронной коммерции, при подготовке маркетинговых и рекламных страниц, при организации работы блогов и во многих других случаях.
Читать дальше →

CS Cart или через терни к черной дыре костылей и оптимизаций

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

Совсем недавно, я стал разработчиком модулей для CS Cart. Случилось это по воле случая: меня взяли на работу в Петербургскую сеть интернет магазинов, торгующих вейпами и всякими интересными штуками для удовлетворения потребностей физического характера страждущих пар и одиночек (кто не понял - еще не дорос ). Оба интернет магазина развернуты на двух витринах с разными доменами, но одной админкой и общей базой данных. Что же с ней не так? Думаю о CMS написано много, но я добавлю свою ложку дегтя в бочку с дегтем .

Читать далее

Кросс-браузерный трекинг на основе перебора обработчика внешних протоколов

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

Два месяца назад, в процессе исследования браузера Safari, я случайно наткнулся на уязвимость, позволяющую проверять наличие конкретного приложения на компьютере пользователя прямиком из браузера с использованием JavaScript.

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

Читать далее

Модульные frond-end блоки — пишем свой пакет. Часть 2

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

В первой части я поделился своим взглядом на то, какими могут быть переиспользуемые front-end блоки, получил конструктивную критику, доработал пакет и теперь хотел бы поделиться с вами новой версией. Она позволит легко организовать использование модульных блоков для любого проекта с бекендом на php.

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

Читать далее

DINS JS EVENING (online): параллелизм в вебе и есть ли жизнь после закрытия вкладки

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

Дмитрий Злыгин из DINS расскажет, как на фронтенде выполнять несколько задач параллельно и какие инструменты для этого нужны. Максим Сальников из Microsoft поделится возможностями API из семейства сервис-воркеров, позволяющих продлить жизнь приложения.

Участие бесплатное по предварительной регистрации. Программа и подробная информация о спикерах — под катом.

Читать далее

Битва Java-разработчиков Tech Monsters Night от «М.Видео-Эльдорадо»

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


4 июня состоится Tech Monsters Night. Специалисты уровня middle&senior Java Script, Java 15, Reactive Java, Spring Framework 5, Spring Boot 2, Kafka других и фреймворков эта битва для вас!

5 часов эпичного файта: нетривиальные задачки от лидов «М.Видео-Эльдорадо» и скиловые противники. Сразу после боя — лидерборд, вы увидите рейтинг, ники победителей и призы.

Практическое руководство по TypeScript для разработчиков

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

Представляю вашему вниманию перевод статьи "Working With TypeScript: A Practical Guide for Developers".


Что такое TypeScript?


TypeScript — это популярный статический типизатор (static type checker) или типизированное надмножество (typed superset) для JavaScript, инструмент, разработанный Microsoft и добавляющий систему типов к гибкости и динамическим возможностям JavaScript.


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


Установка TypeScript


Для того, чтобы начать работу с TypeScript, нужно либо установить специальный интерфейс командной строки (command line interface, CLI), либо воспользоваться официальной онлайн-песочницей или другим похожим инструментом.

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

Трасси… что? Доклад Яндекса

Время на прочтение15 мин
Охват и читатели15K
Отладка приложения занимает бо́льшую часть нашего времени. Кто-то пользуется DevTools, кто-то обходится обычным console.log, кто-то использует профайлеры. Зачастую этих инструментов более чем достаточно. Но есть еще один, не такой известный и популярный в JavaScript-мире. О нем я и рассказал в докладе.

— Всем привет! Надеюсь, вы бодры, веселы, перекусили, заварили себе кофейку, потому что сейчас будет очень интересная и при этом доступная тема: «Трасси… что?». Правильнее было бы называть доклад «Трасси… что-о-о?!», но не будем так.

Cypress и его место в нашей тестовой пирамиде

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

Стабильность и скорость ― это то, что ожидается от автотестов. В этой статье я расскажу о нашей стратегии по оптимизации тестовой пирамиды, о том, почему мы сделали выбор в пользу Cypress и какие выработали подходы к написанию тестов, а также о запуске тестов на инфраструктуре AWS.

Читать далее

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

Швейцарский нож отладки JavaScript

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


Кажется, что все в начале пути разработчика отлаживали код при помощи console.log(). Я уверен, что и сейчас среди читателей найдётся человек, который сможет отладить код любой сложности при помощи вывода информации в консоль.

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

Паттерн «Импорт при взаимодействии» (часть 1)

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

Ссылка на оригинал

Паттерн заключается в отложенной загрузке ресурсов, то есть только тогда, когда пользователю нужна какая-либо часть интерфейса.

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

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

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

Это может негативно отразиться на таких метриках как:

Продолжение следует...

TypeScript: Раскладываем tsconfig по полочкам. Часть 2 — Всё про строгость

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

В данной статье я хочу предоставить переработанную и упорядоченную выжимку документации по настройке "флагов строгости" tsconfig.json. Статья будет полезна как тем, кто только начинает работать с TypeScript, так и тем кто уже давно работает, но при этом использует конфиг по умолчанию. Для разработчиков, которые хорошо ориентируются в вопросах строгости в TypeScript статья может открыть некоторые тонкости работы флагов и послужить шпаргалкой.

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №467 (10 — 16 мая 2021)

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

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

Современный Javascript: всё, что вы пропустили за последние 10 лет

Время на прочтение7 мин
Охват и читатели16K
JavaScript прошел долгий путь с тех пор, как я знал его как букву «D» в DHTML. Для всех, кто, как я, не хотел использовать новейший синтаксис, который может потребовать полифиллов или транспилятора, я написал эту шпаргалку, чтобы вы познакомились со всеми достоинствами, которые широко поддерживаются в современных браузерах.

Содержание

  • Array functions
  • const/let
  • Nullish coalescing ?? and Optional chaining?.. operators
  • Async/Await
  • Стрелочные функции ()=>{}
  • for...of
  • for await...of
  • Classes
  • get/set
  • function default parameters
  • function named parameters
  • function rest… parameter
  • Destructuring
  • Shorthand functions aka Methods
  • Promise.all
  • Template literals
  • Proxy
  • Module import/export
  • Читать ещё

(Исправления по качеству перевода, пожалуйста, присылайте в личку)
Читать дальше →

Паттерны отложенной инициализации свойств объектов в JavaScript

Время на прочтение6 мин
Охват и читатели13K
Автор статьи, перевод которой мы публикуем сегодня, хочет рассказать о нескольких JavaScript-паттернах, направленных на отложенную инициализацию свойств объектов, для выполнения которой требуется произвести вычисления, создающие серьёзную нагрузку на систему. В основе всех этих паттернов лежит использование дескрипторов доступа — свойств объектов, описываемых парой функций — геттером и сеттером.


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

Кэш или стэйт, пробуем React-query

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

Популярная библиотека для работы с состоянием веб-приложений на react-js это redux.  Однако у нее есть ряд недостатков такие как многословность(даже в связке с redux-toolkit), необходимость выбирать дополнительный слой(redux-thunk, redux-saga, redux-observable). Возникает ощущение, что как-то это все слишком сложно и уже давно появились хуки и в частности хук useContext.. Так что я попробовал другое решение.

Читать далее

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