Обновить
278.69

JavaScript *

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

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

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

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

Что делаю


Для личного проекта потребовалось найти решение, для работы с некоторым количеством разных 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 мин
Охват и читатели92K
Автор статьи, перевод которой мы сегодня публикуем, приводит 15 вопросов, которые задавали на собеседованиях ему, и которые он задавал соискателям на должности фронтенд-разработчиков сам.


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

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

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

image


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


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

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

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

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




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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

Читать далее

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

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

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


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

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

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

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


Одна из основных проблем в работе с динамически типизированными языками заключается в том, что невозможно всегда гарантировать правильность потока данных, так как невозможно принудительно задать для параметра или переменной значение, например отличное от 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 мин
Охват и читатели123K
Доброго времени суток, друзья!

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

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

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

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

Прототипы в JS и малоизвестные факты

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

Лирическое вступление 


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


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

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

Картинка, которая одновременно является кодом на Javascript

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

Изображения обычно хранятся как двоичные файлы, а файл Javascript по сути является обычным текстом. Оба типа файлов должны следовать собственным правилам: изображения имеют конкретный формат файла, определённым образом кодирующий данные. Для того, чтобы файлы Javascript можно было исполнять, они должны следовать определённому синтаксису. Я задался вопросом: можно ли создать файл изображения, одновременно являющийся допустимым синтаксисом Javascript, чтобы его можно было исполнять?

Прежде чем вы продолжите чтение, крайне рекомендую изучить эту песочницу кода с результатами моих экспериментов:

https://codesandbox.io/s/executable-gif-8yq0j?file=/index.html

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

https://executable-gif.glitch.me/image.gif
Читать дальше →

О реализации структуры данных Map в V8

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

В стандарте ECMAScript 2015, известном как ES6, появилось много новых JavaScript-коллекций, таких, как Map, Set, WeakMap и WeakSet. Они, судя по всему, стали отличным дополнением к стандартным возможностям JavaScript. Они получили широкое применение в различных библиотеках, в приложениях, в ядре Node.js. Сегодня мы поговорим о коллекции Map, попытаемся разобраться с особенностями её реализации в V8 и сделаем некоторые практические выводы, основанные на полученных знаниях.

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

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

Как видно, спецификация даёт тем, кто создаёт JS-движки, большую свободу. Но при этом здесь нет определённых указаний, касающихся конкретного подхода, используемого для реализации Map, его производительности, характеристик потребления памяти. Если в критически важной части вашего приложения используются структуры данных Map, и если вы записываете в такие структуры данных большие объёмы информации, то основательные знания о реализации Map, определённо, принесут вам большую пользу.
Читать дальше →