Обновить
512K+

JavaScript *

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

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

NodeJS: 12 пакетов для продуктивности разработчика

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


Менеджер процессов для продакшна с балансировщиком нагрузки. Обёртки над отладкой и хуками Git, защита express-приложений через HTTP-заголовки, утилита в более чем 180 функциями для работы с датами и другие инструменты, которые сэкономят ваше время. Подборка особенно полезна начинающим разработчикам NodeJS, но может порадовать опытных скептиков.
Добро пожаловать под кат!

Основы настройки Webpack

Время на прочтение3 мин
Охват и читатели18K
Для начала установим webpack, делается это с помощью команд:

yarn add webpack webpack-cli -D, если используете менеджер пакетов yarn
npm i webpack webpack-cli --save-dev, для менеджера пакетов npm

Настраивается Webpack с помощью конфигурационного файла webpack.config.js, который хранится в корневой директории проекта.

Пример конфигурационного файла:

const path = require('path')
module.exports = {
   watch: true,
   entry: "./src/index.js",
   output: {
       filename: "bundle.js",
       path: path.resolve(__dirname,'build'),
       publicPath: "/"
   }
};

Начальная конфигурация представляет собой следующее:

  • watch — заставляет webpack отслеживать изменения в файлах и заново выполнять сборку;
  • entry — Указывает на точку входа в проект, и откуда нужно начать построение графа внутренних зависимостей проекта;
  • output — Указывает путь, где будет располагаться создаваемый файл и как он будет называться;

Так же необходимо установить webpack-dev-server, который понадобится для разработки и отладки приложения.

yarn add webpack-dev-server для менеджера пакетов yarn или
npm i webpack-dev-server если используется npm

Для настройки webpack-dev-server добавим devServer в нашем конфигурационном файле.

Параметры для webpack-dev-server:

module.exports = {
    //...
    devServer: {
        port: 8000,
        historyApiFallback: true,
        hot: true,
    },
};

Также нам нужно добавить/заменить в нашем package.json файле скрипт запуска проекта:

"start": "webpack-dev-server --mode development",

и скрипт для сборки билда:

"build": "webpack --mode production"

Загрузчики


Загрузчики (loaders) — это специальные модули, которые используются для «загрузки» других модулей. Так же они позволяют предварительно обрабатывать файлы по мере их импорта или «загрузки».
Читать дальше →

5 советов для прокачки своих навыков в Angular

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

Этим летом мы с Ромой запустили серию твитов с полезными советами и приемами по Angular. Сообщество тепло встретило эту инициативу, и я решил написать обобщающую статью.

Вот мои 5 рекомендаций, которыми хочется поделиться с разработчиками. Эти советы будут подкреплены конкретными примерами из моего твиттера. Они помогут вам поднять свои навыки или как минимум дадут пару практических приемов.

Читать далее

Опыт создания нескольких 3д сцен без перезагрузки страницы (three.js)

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

Что делаю


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


Небольшой опыт работы с three.js у меня был, поэтому, после ознакомления с примерами GLTFLoader, была выбрана именно эта библиотека.


Данные о сценах хранятся в отдельном json файле и содержат информацию о пути к сцене, освещении, маршруте камеры и т.д. но в данном материале они нас интересуют в меньшей мере.


В теории было необходимо рисовать подряд несколько сцен. На практике все оказалось несколько сложней.

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №432 (7 — 13 сентября 2020)

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

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

11 инструментов для разработки микрофронтендов, о которых стоит знать

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



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

Дэн Абрамов, в мае прошлого года, писал в своём Твиттере о том, что он не понимает микрофронтенды. Он полагает, что задачи, которые они должны решать, уже решены средствами хороших компонентных моделей. «Может, микрофронтенды — это решение организационных проблем, а не технических? Например, когда две команды разработчиков не могут ни о чём договориться, в том числе — об инфраструктуре проекта», — размышляет он.

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

От небольшого вики-портала до хостинга

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

Предыстория


Я как-то пытался создать статью на паре вики-проектов, но их потерли так как они не имеют энциклопедической ценности, и вообще походу если ты пишешь о чем-то новом и неизвестном — это принимается за пиар. Через некоторое время моя статья была удалена. Я сначала расстроился, но в обсуждении для меня было приглашение на другой небольшой вики проект обо всем (а потом мне предложили написать статью еще для одного сайта). Я о нем никогда не слышал, но все равно был рад написать статью для сайта, которым кто-то занимается. Кстати оба проекта обновляются, есть в поиске и их читают — для меня это было достаточно чтобы написать обзор на свой проект. Оба сайта кажется были на движке MediaWiki или каком-то похожем, и внешне походили на любой другой популярный вики-портал.

От вики-сайта до вики-движка


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

Почему я разочаровался в хуках

Время на прочтение9 мин
Охват и читатели10K
Перевод статьи подготовлен в преддверии старта курса «React.js Developer».





Чем полезны хуки?


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

Я часто слышу, что хуки создали для замены классовых компонентов. К сожалению, пост «Введение в хуки», опубликованный на официальном сайте React, рекламирует это нововведение, прямо скажем, неудачно:

Хуки — нововведение в React 16.8, которое позволяет использовать состояние и другие возможности React без написания классов.
Читать дальше →

Готовимся к собеседованию по фронтенду: 15 вопросов

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


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

Микросервисы во фронтенде

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

image


Привет, Хабр!


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

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

Компоновщик в JavaScript

Время на прочтение5 мин
Охват и читатели5.7K
Перевод статьи подготовлен в преддверии старта курса «JavaScript Developer. Basic».




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

Главная задача компоновщика — объединение множества объектов в единую древовидную структуру. Эта древовидная структура представляет иерархию, построенную по принципу от частного к целому.

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

TypeScript. Продвинутые типы

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

Привет, Хаброжители! Мы сдали в типографию очередную новинку
"Профессиональный TypeScript. Разработка масштабируемых JavaScript-приложений". В этой книге программисты, которые уже знакомы с JavaScript на среднем уровне, узнают, как освоить TypeScript. Вы поймете, как TypeScript поможет масштабировать код в 10 раз лучше и снова сделать программирование увлекательным.

Вашему вниманию представлен отрывок одной главы из книги «Продвинутые типы».
Читать дальше →

Frontend Live 2020: новый формат — новые возможности

Время на прочтение10 мин
Охват и читатели2.4K
В этом году на Frontend Live мы снова обсуждаем самые актуальные в разработке темы: будет 4 трека по архитектуре, производительности, тестированию и дизайну. Но будем обсуждать и смежные вопросы, так как frontend продолжает развиваться и расширяться, появляются интересные решения старых (и новых) проблем, и, конечно, новинки для изучения.

Как всегда, кроме докладов, будут ещё интенсивы, мастер-классы и воркшопы, и, конечно, открытые обсуждения (это может каждый — предложите тему для обсуждения и приглашайте участников).



Для расширения вашего горизонта мы снова выбрали только креативные и практичные доклады о реально работающих проектах. Будут доклады и о новых идеях, и демонстрации на тему, как это всё устроено и работает. На мастер-классах расскажем, как команды решают внезапно возникшие трудности, какие новые ноу-хау изобрели и что получили на выходе. А еще мы поговорим о красоте.
Читать дальше →

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

Путь к Федеративному GraphQL

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

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

[Если вы спешите, проскрольте ниже к урокам и гляньте на открытый код graphql-schema-registry]

Читать далее

Безопасность npm-проектов, часть 2

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

Безопасность npm-проектов, часть 2


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

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

Работа с непредвиденными данными в JavaScript

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


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

function foo (mustExist) {
  if (!mustExist) throw new Error('Parameter cannot be null')
  return ...
}

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

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

React: слоты как у сына маминой подруги

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

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

Для решения подобных задач в каждой популярной технологии сегодня применяется концепция "слотов". У Angular есть ngContent, во Vue, Svelte и WebComponents есть слоты.

А как же React?

6 рекомендаций по разработке масштабируемых React-проектов

Время на прочтение7 мин
Охват и читатели9.7K
В начале работы над новым React-проектом рекомендуется сформулировать инструкции, следуя которым можно будет создать приложение, хорошо поддающееся масштабированию.



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

Как перенести на TypeScript большую кодовую базу React UI-компонентов

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

Привет! Меня зовут Иван Греков, я работаю UI-разработчиком в frontend-команде Badoo. Главные задачи нашей команды — создание новых и поддержка существующих пользовательских интерфейсов для сайтов и приложений Badoo и Bumble. 

Когда в конце 2019 года мы начали параллельно работать над несколькими проектами, мы задумались над повышением стабильности кода и возможностью его многократного использования. Для этого мы решили переписать наши 630 React UI-компонентов на TypeScript. Я расскажу о том, как мы работали над ними без перерыва в доставке фич и как организовали поэтапный переход на TypeScript для UI-разработчиков, которым этот язык был в новинку.

Читать далее

JavaScript: полное руководство по классам

Время на прочтение10 мин
Охват и читатели126K
Доброго времени суток, друзья!

В JavaScript используется модель прототипного наследования: каждый объект наследует поля (свойства) и методы объекта-прототипа.

Классов, используемых в Java или Swift в качестве шаблонов или схем для создания объектов, в JavaScript не существует. В прототипном наследовании есть только объекты.

Прототипное наследование может имитировать классическую модель наследования от классов. Для этого в ES6 было представлено ключевое слово class: синтаксический сахар для прототипного наследования.

В данной статье мы научимся работать с классами: определять классы, их частные (приватные) и открытые (публичные) поля и методы, а также создавать экземпляры.
Читать дальше →