Обновить
256K+

JavaScript *

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

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

Iodide: интерактивный научный редактор от Mozilla

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

Изучение аттрактора Лоренца, а затем редактирование кода в Iodide

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

Но на сегодняшний день очень немногие научные инструменты используют полный коммуникационный потенциал современных браузеров. Результаты дата-майнинга не очень удобно просматривать в браузере. Поэтому сегодня Mozilla представляет Iodide — экспериментальный инструмент, который помогает учёным составлять красивые интерактивные документы с использованием веб-технологий, всё в рамках итеративного рабочего процесса, который многим знаком.

Как система типов улучшает ваш код на JavaScript

Время на прочтение3 мин
Охват и читатели7.5K
Вот так не успеешь обернуться, а месяц уже стремится к своему завершению. Считанные дни остаются до запуска нового потока по курсу «Разработчик JavaScript», по традиции перед запуском курса делимся с вами переводом полезного материала.

Vanilla JavaScript не типизирован по своей натуре. Можно даже назвать его «умным», поскольку он способен вычислить, что является числом, а что строкой.

Это упрощает запуск JavaScript кода в браузере или при работе Node.js. Однако он уязвим для многочисленных ошибок во время исполнения (рантайм), которые могут испортить ваш пользовательский опыт использования.



Если с вами когда-либо случалось то, что будет описано далее, то вы только выиграете, если будете применять систему типов.
Читать дальше →

Разработка простых современных JavaScript-приложений с использованием Webpack и прогрессивных веб-технологий

Время на прочтение19 мин
Охват и читатели36K
Думали ли вы о том, чтобы воспользоваться при разработке своего очередного веб-проекта простейшим из существующих набором технологий? Если это так — значит материал, перевод которого мы публикуем сегодня, написан специально для вас.

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

image

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

Тестирование на примере ReactJS: насколько глубока кроличья нора

Время на прочтение14 мин
Охват и читатели33K
Всем привет, меня зовут Ярослав Астафьев, и сегодня я хотел бы провести обзорную экскурсию в тестирование ReactJS. Я не буду углубляться в сложности тестирования веб приложений с использованием определенных библиотек (руководствуясь подходом «сложно тестировать только плохой код»), взамен постараюсь разнообразить ваш кругозор. Так что в этой статье React — скорее повод собрать воедино подходы к тестированию, отправная точка, объединяющая хипстеров и технологии. Корректнее будет даже сказать, что речь пойдет о принципах тестирования вообще с иллюстрациями на ReactJS (и не только).

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



Если введение не вызвало приступ синестезии — добро пожаловать под кат.
Читать дальше →

Основы реактивного программирования с использованием RxJS. Часть 2. Операторы и пайпы

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


В предыдущей статье мы рассмотрели, что такое потоки и с чем их едят. В новой части мы познакомимся с тем, какие методы RxJS предоставляет для создания потоков, что такое операторы, пайпы(pipes) и как с ними работать.

Серия статей «Основы реактивного программирования с использованием RxJS»:



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

Вступление в архитектуру React Fiber

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

Привет, Хабр! Предлагаю вашему вниманию перевод статьи "React Fiber Architecture" автора Andrew Clark.


Вступление


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


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


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

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

27 марта, Москва — JavaScript MeetUP

Время на прочтение1 мин
Охват и читатели2.1K
Очередной JavaScript MeetUP мы собираем уже в следующую среду, 27 марта, в 19.00 на площадке Corporate Innovations Hub (ул. Большая Полянка, д.2/10, стр. 1).

В программе будет 3 доклада от наших сотрудников. Вход бесплатный (но зарегистрироваться надо заранее), будет и онлайн-трансляция.



Список докладов и полезные ссылки — под катом.

Учебный курс по React, часть 23: первое занятие по работе с формами

Время на прочтение7 мин
Охват и читатели16K
В этой части перевода учебного курса по React мы поговорим о работе с формами. В частности, сегодняшнее занятие посвящено организации взаимодействия компонентов и текстовых полей.

image

Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
Часть 2: функциональные компоненты
Часть 3: файлы компонентов, структура проектов
Часть 4: родительские и дочерние компоненты
Часть 5: начало работы над TODO-приложением, основы стилизации
Часть 6: о некоторых особенностях курса, JSX и JavaScript
Часть 7: встроенные стили
Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
Часть 9: свойства компонентов
Часть 10: практикум по работе со свойствами компонентов и стилизации
Часть 11: динамическое формирование разметки и метод массивов map
Часть 12: практикум, третий этап работы над TODO-приложением
Часть 13: компоненты, основанные на классах
Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
Часть 15: практикумы по работе с состоянием компонентов
Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
Часть 18: шестой этап работы над TODO-приложением
Часть 19: методы жизненного цикла компонентов
Часть 20: первое занятие по условному рендерингу
Часть 21: второе занятие и практикум по условному рендерингу
Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
Часть 23: первое занятие по работе с формами
Часть 24: второе занятие по работе с формами
Часть 25: практикум по работе с формами
Часть 26: архитектура приложений, паттерн Container/Component
Часть 27: курсовой проект
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №356 (11 — 17 марта 2019)

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


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

Chrome Audit на 500: Часть 1. Лендинг

Время на прочтение16 мин
Охват и читатели22K
В инструментах разработчика браузера хром есть вкладка «Audit». На ней расположился инструмент который называется Lighthouse, служит он для анализа насколько хорошо сделано веб приложение.

image

Недавно я решил протестировать одно приложение и ужаснулся результатам. Сразу по нескольким разделам оценка находилась в красной зоне. Я принялся изучать что же с моим приложением не то. И нашел в результатах анализа большой список очень полезных рекомендаций, выполнил их и получил 500 баллов. В результате приложение стало запускаться значительно быстрее, а я пересмотрел несколько концепций относительно метода построения приложений. А в этой статье я хочу поделиться самыми интересными решениями к которым я пришел.
Читать дальше →

Как реализовать язык программирования на JavaScript. Часть 3: CPS-интерпретатор

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

Здравствуйте! Представляю вам третью часть моего перевода руководства реализации своего языка программирования на JavaScript — PL Tutorial.


От переводчика


Мы создадим свой язык программирования — λзык (в оригинале — λanguage). В процессе создания мы будем использовать достаточно много интересных техник, таких как рекурсивный спуск, стиль передачи управления, базовые техники оптимизации. Будет создано две версии интерпретатора — обычный и CPS-интерпретатор, транс-компилятор в JavaScript.


Автор оригинала — Mihai Bazon, автор известной библиотеки UglifyJS (инструмент для минимизации и форматирования JS-кода).

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

Как реализовать язык программирования на JavaScript. Часть 2: Интерпретатор

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

Здравствуйте! Представляю вам вторую часть моего перевода руководства реализации своего языка программирования на JavaScript — PL Tutorial.


От переводчика


Мы создадим свой язык программирования — λзык (в оригинале — λanguage). В процессе создания мы будем использовать достаточно много интересных техник, таких как рекурсивный спуск, стиль передачи управления, базовые техники оптимизации. Будет создано две версии интерпретатора — обычный и CPS-интерпретатор, транс-компилятор в JavaScript.


Автор оригинала — Mihai Bazon, автор известной библиотеки UglifyJS (инструмент для минимизации и форматирования JS-кода).

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

Решаем задачу из интервью Google на JavaScript: 4 разных способа

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


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

Эта статья — своеобразное сопровождение к видео. В ней я даю комментарии ко всем показанным решениям плюс собственную версию решения на JavaScript. Также обсуждаются нюансы каждого алгоритма.

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

Анализ и оптимизация React-приложений

Время на прочтение22 мин
Охват и читатели44K
Люди, вроде меня, которые борются за высокую производительность сайтов, часто тратят на это много времени. Поэтому сейчас я собираюсь раз и навсегда решить проблему низкого быстродействий веб-ресурсов, интерфейс которых написан на React. А именно, я предлагаю всем, кто это читает, сегодня же прекратить пользоваться React.



Автор материала, перевод которого мы сегодня публикуем, конечно же, шутит. Здесь речь пойдёт о том, как оптимизировать производительность React-приложений. Кстати, прежде чем начать, подумаем о том, зачем вообще нужна оптимизация сайтов. Пожалуй, можно сказать, что нужна она для того, чтобы сайтом могло бы пользоваться больше людей, чем до оптимизации.

Google Plus прекращает работу. И что?

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

Google объявила о закрытии социальной сети Google+. Трудно найти техническое издание, которое бы не упомянуло хотя бы вскользь о конце амбиций Google в области социальных сетей. Но, увы, вниманием обходится высокая связность сервисов компании добра. В этой статье я хотел бы выразить свои размышления на тему того, как взаимодействуют сервисы гугла внутри и что может означать закрытие G+ для пользователей API сервисов Google.

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

Как реализовать язык программирования на JavaScript. Часть 1: Парсер

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

Здравствуйте! Представляю вам любительский перевод руководства реализации своего языка программирования на JavaScript — PL Tutorial.


От переводчика


Мы создадим свой язык программирования — λзык (в оригинале — λanguage). В процессе создания мы будем использовать достаточно много интересных техник, таких как рекурсивный спуск, стиль передачи управления, базовые техники оптимизации. Будет создано две версии интерпретатора — обычный и CPS-интерпретатор, транс-компилятор в JavaScript.


Автор оригинала — Mihai Bazon, автор известной библиотеки UglifyJS (инструмент для минимизации и форматирования JS-кода).

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

Учебный курс по React, часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников

Время на прочтение8 мин
Охват и читатели20K
В сегодняшней части перевода учебного курса по React мы завершим работу над Todo-приложением и поговорим о том, как, пользуясь внутренними механизмами компонентов и стандартными возможностями JavaScript, загружать данные из внешних источников.

image

Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
Часть 2: функциональные компоненты
Часть 3: файлы компонентов, структура проектов
Часть 4: родительские и дочерние компоненты
Часть 5: начало работы над TODO-приложением, основы стилизации
Часть 6: о некоторых особенностях курса, JSX и JavaScript
Часть 7: встроенные стили
Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
Часть 9: свойства компонентов
Часть 10: практикум по работе со свойствами компонентов и стилизации
Часть 11: динамическое формирование разметки и метод массивов map
Часть 12: практикум, третий этап работы над TODO-приложением
Часть 13: компоненты, основанные на классах
Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
Часть 15: практикумы по работе с состоянием компонентов
Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
Часть 18: шестой этап работы над TODO-приложением
Часть 19: методы жизненного цикла компонентов
Часть 20: первое занятие по условному рендерингу
Часть 21: второе занятие и практикум по условному рендерингу
Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
Часть 23: первое занятие по работе с формами
Часть 24: второе занятие по работе с формами
Часть 25: практикум по работе с формами
Часть 26: архитектура приложений, паттерн Container/Component
Часть 27: курсовой проект
Читать дальше →

arkit — архитектурные диаграммы для JavaScript, TypeScript и Flow

Время на прочтение1 мин
Охват и читатели7.8K
arkit (швед. arkitektur)

Дамы и господа, представляю вашему вниманию arkit — инструмент, который анализирует файлы вашего проекта и генерирует диаграмму зависимостей между ними и внешними модулями. Наверное, проще показать на примере самого arkit:

архитектурная диаграмма
Читать дальше →

DevProject Award: Моя речь на DeveloperWeek 2019

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

Всем привет


Меня зовут Дмитрий Голев. Я основатель и технический директор Veliov Group. Сегодня я расскажу о сервисе, который был награжден "Dev Project" award от DeveloperWeek. По данному случаю нам предложили рассказать о проекте со сцены DevExec World, ниже текстовая версия моей речи.


ostr.io логотип

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

Функциональные компоненты с React Hooks. Чем они лучше?

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

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


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


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

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