Обновить
256K+

JavaScript *

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

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

JavaScript: Публичные и приватные поля классов

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

Несколько предложений расширяют существующий синтаксис классов в JavaScript новой функциональностью. Эта статья объясняет новый синтаксис публичных полей классов в V8 v7.2 и Chrome 72, а также грядущих приватных полей.


Вот пример кода, который создает экземпляр класса IncreasingCounter:


const counter = new IncreasingCounter();
counter.value;
// logs 'Getting the current value!'
// → 0
counter.increment();
counter.value;
// logs 'Getting the current value!'
// → 1

Отметим, что обращение к value выполняет некоторый код (вывод сообщения в лог) перед тем, как вернуть значение. Теперь спросите себя: как бы Вы реализовали этот класс на JavaScript?

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

Создание своего jsfiddle, часть 2

Время на прочтение4 мин
Охват и читатели3.4K
Привет всем читателем Habr. В данной статье мы будем продолжать писать свой онлайн редактор кода.

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

Изменения кода с первой части


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

Композиция против наследования, паттерн Команда и разработка игр в целом

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

Дисклеймер: По-моему, статья об архитектуре ПО не должна и не может быть идеальной. Любое описанное решение может покрывать необходимый одному программисту уровень недостаточно, а другому программисту — слишком усложнит архитектуру без надобности. Но она должна давать решение тем задачам, которые поставила перед собой. И этот опыт, вместе со всем остальным багажом знаний программиста, который обучается, систематизирует информацию, оттачивает новыки, и критикует сам себя и окружающих — этот опыт превращается в отличные програмные продукты. Статья будет переключаться между художественой и технической частью. Это небольшой эксперимент и я надеюсь, что он будет интересным.
— Слушай, я тут придумал отличную идею игры! — гейм-дизайнер Вася был взъерошен, а глаза — красные. Я ещё попивал кофе и холиварил на Хабре, чтобы убить время перед стенд-апом. Он выжидательно посмотрел на меня, пока я закончу писать в комментариях человеку, в чем он не прав. Вася знал, что пока справедливость не восторжествует, а правда не будет защищена — смысла продолжать со мной разговор нету. Я дописал последнее предложение и перевел на него взгляд.

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

Он убежал по своим гейм-дизайнерским делам, а я — открыл IDE.
Читать дальше →

Neutralinojs — что ты такое? Или UNIX way там, где не ждали

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

Недавно я совершенно случайно наткнулся на простую рекламную заметочку "Neutralinojs — альтернатива Electron, потребляющая меньше памяти", рассказывающую о том, что есть такая крутая вещь как Neutralinojs. Заметочка, как и следует ей быть, совсем короткая и не несёт никакой полезной информации, кроме рекламного лозунга "Лучше чем <что-то популярное>!"


Примерно понимая как работает Electron и NW.js и не найдя совершенно никакого упоминания о принципе работы этого нового и суперкрутого "чудо-зверя" в заметке, я начал исследования.


Собственно представляю вниманию результаты своего микро-исследования!



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


  • Почему оно ест в разы меньше памяти?
  • Какие даёт ещё плюшки?
  • Для чего мне это чудо использовать?

Почему не жрём память?


Покопавшись в исходниках и двух достаточно информативных картинках об архитектуре, я понял, что этот проект работает именно по тому самому UNIX Way, который любят все линуксоиды. Философия проекта проста: зачем придумывать новый велосипед, если можно использовать уже готовый?

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

ReactJS + MobX — опыт использования DI

Время на прочтение6 мин
Охват и читатели7.6K
Мне кажется, настало время поделится подходом для написания ReactJS App, я не претендую на уникальность.

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

Задачи которые мы будем решать:

  • подключение di для компонентов
  • серверный рендеринг с асинхронной загрузкой данных
Читать дальше →

Цена композиции в Javascript-мире

Время на прочтение7 мин
Охват и читатели16K
Мысль о том, что в разработке любой более-менее сложной бизнес-логики приоритет должен отдаваться композиции объектов, нежели наследованию популярна в среде разработчиков программных продуктов самых разных типов. На очередной волне популярности функциональной парадигмы программирования, запущенной состоявшимся успехом ReactJS, разговоры о преимуществах композиционных решений пришли и во фронтенд. В данном посте есть немного раскладки по полкам теории о композиции объектов в Javascript, конкретный пример, его разбор и ответ на вопрос сколько стоит смысловая элегантность для пользователя (спойлер: немало).

В.Кандинский - Композиция X
Василий Кандинский — «Композиция X»
Читать дальше →

Сервер push сообщений

Время на прочтение7 мин
Охват и читатели23K
В любом современном интернет сервисе можно выделить всего две основные функции:

  • Первая — это авторизация пользователей.
  • Вторая — это моментальная отправка некоего события с сервера на клиент.

Первый пункт, думаю, в пояснении не нуждается.

Второй пункт, это клиент серверная технология, но наоборот. Клиент не делает периодически запрос на сервер — есть ли новые сообщения. Сервер, при появлении некоего события, отравляет сообщение сразу клиенту.

Для лучшего понимания сервис не некий сферичный в вакууме. Сервис можно представить как:

  • Папка с файлами в облаке. Информация о изменении, добавлении и удалении пересылается другим пользователям или текущему пользователю, но на другие устройства.
  • Компьютерная программа чтения логов сервера, при появлении записей «error» отсылающая содержимое записи пользователю на мобильный телефон.
  • Видео-глазок (камера), делающий снимки при движении около двери квартиры.
  • Сервис получающий телеметрию из приложения android-auto.
  • Похожий на предыдущий пункт сервис, позволяющий узнать дошел ли ребенок до школы или пришел из школы домой.

Список можно расширять до бесконечности, приведены, как пример, лишь наиболее известные варианты использования.

Практически все приведенные примеры сервисов можно представить в виде «мессенджера». Часть из примеров именно так и описывалась, видел статьи, как подключить камеру и отправлять снимки в один известный мессенджер.

Не так давно была статья что за сервисом камер в дверных глазках, вместо искуственного интелекта наблюдали посторонние люди. Не буду заострять внимание на бесплатных сервисах от больших «добрых» корпораций. Как говориться в известной пословице «Бесплатный сыр бывает в мышеловке» и руководствуясь другой пословицей «Своя рубашка ближе к телу», свой «сервис» лучше.

Код скриптов сервера открыт и бесплатен


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

EcmaScript 10 — JavaScript в этом году (ES2019)

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

Стандартизация JS перешла на годичный цикл обновлений, а начало года — отличное время для того чтобы узнать, что нас ждёт в юбилейной — уже десятой редакции EcmaScript!


ES9 — актуальная версия спецификации.


ES10 — всё ещё черновик.


На сегодняшний день в Stage 4 # — всего несколько предложений.


А в Stage 3 # — целая дюжина!


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


 
КДПВ: Жёлтый магнит с надписью «JS ES10» на экране монитора —  от kasper.green & elfafeya.art
        Автор фото: kasper.green; Жёлтый магнит: elfafeya.art & kasper.green

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

Как освоить синтаксис async/await: реальный пример

Время на прочтение6 мин
Охват и читатели15K
Перед вами перевод статьи Adrian Hajdin, которая была опубликована на сайте freeCodeCamp. Под катом автор понятно и лаконично объясняет, в чем преимущество async/await, и на конкретном примере показывает, как использовать этот синтаксис.

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

Учебный курс по React, часть 13: компоненты, основанные на классах

Время на прочтение5 мин
Охват и читатели20K
Сегодня мы публикуем перевод очередного занятия учебного курса по React. Оно посвящено компонентам, основанным на классах. Такие компоненты создают с использованием ключевого слова class.

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: курсовой проект
Читать дальше →

Neutralinojs — альтернатива Electron, потребляющая меньше памяти

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

Neutralinojs — фреймворк с открытым исходным кодом для создания кроссплатформенных приложений на HTML/CSS/JS. Отличие от Electron в том, что для запуска приложения на Neutralinojs не нужно устанавливать nodejs и сотни зависимостей, тянущихся из package.json. Давайте сравним Hello World приложение на Neutralinojs и Electron. Приложение на Neutralinojs можно запустить на Windows или Linux (на данный момент MacOS не поддерживается, но это планируется исправить в ближайшем будущем). Я запускал на Ubuntu 17.10.

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

Piter GraphQL: видеозаписи с митапа в Wrike

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


24 января в офисе Wrike прошел первый в Петербурге митап по GraphQL. Чтобы разобраться в жизнеспособности хайповой технологии мы, во-первых, суммировали результаты своих исследований в этой теме, во-вторых, позвали в гости Павла Черторогова, опенсорс-мейнтейнера, который с конца 2015 года разрабатывает изоморфные приложения. Летом 2016 Павел начал разработку graphql-compose в опенсорсе.

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

Многопоточность в Node.js: модуль worker_threads

Время на прочтение13 мин
Охват и читатели85K
18 января было объявлено о выходе платформы Node.js версии 11.7.0. Среди заметных изменений этой версии можно отметить вывод из разряда экспериментальных модуля worker_threads, который появился в Node.js 10.5.0. Теперь для его использования не нужен флаг --experimental-worker. Этот модуль, с момента появления, оставался достаточно стабильным, поэтому и было принято решение, отражённое в Node.js 11.7.0.

Автор материала, перевод которого мы публикуем, предлагает обсудить возможности модуля worker_threads, в частности, он хочет рассказать о том, зачем нужен этот модуль, и о том, как в JavaScript и в Node.js, по историческим причинам, реализована многопоточность. Здесь же речь пойдёт и о том, какие проблемы сопряжены с написанием многопоточных JS-приложений, о существующих способах их решения, и о будущем параллельной обработки данных с использованием так называемых «потоков воркеров» (worker threads), которые иногда называют «рабочими потоками» или просто «воркерами».
Читать дальше →

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

Под капотом Screeps — виртуализация в MMO-песочнице для программистов

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

В этой статье я расскажу про одну малоизвестную технологию, которая нашла ключевое применение в нашей онлайн-игре для программистов. Чтобы долго не тянуть резину, сразу спойлер: кажется, что такого шаманства в нативном коде Node.js, к которому мы пришли после нескольких лет разработки, до нас еще никто не делал. Движок изолированных виртуальных машин (опенсорсный), который работает под капотом проекта, был написан специально для его нужд, и на данный момент используется в продакшене нами и еще одним стартапом. А возможности изоляции, которые он дает, не имеют аналогов и заслуживают, чтобы о них рассказали.


Но давайте обо всем по порядку.


Предыстория


Вы любите программирование? Не тот рутинный энтерпрайз-кодинг, которым многие из нас вынуждены заниматься 40 часов в неделю, борясь с прокрастинацией, вливая в себя литры кофе и профессионально выгорая; а программирование — ни с чем не сравнимый волшебный процесс трансформирования мыслей в работающую программу, получение наслаждения от того, что только что написанный тобой код воплощается на экране и начинает жить той жизнью, которой велит ему создатель. В такие моменты слово "Создатель" хочется написать с большой буквы — настолько чувство, возникающее в процессе, иногда бывает близко к благоговению.



Жаль лишь, что совсем немного реальных проектов, связанных с каждодневным заработком, могут предложить своим разработчикам такие чувства. Чаще всего для того, чтобы не терять страсть к программированию, энтузиастам приходится затевать интрижку на стороне: программистское хобби, пет-проект, модный open-source, просто скрипт на питоне по автоматизации своего умного дома… или поведения персонажа в какой-нибудь популярной онлайн-игре.

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

Учебный курс по React, часть 12: практикум, третий этап работы над TODO-приложением

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

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: курсовой проект
Читать дальше →

Почему в основе каждого нового веб-приложения в PayPal лежит TypeScript?

Время на прочтение9 мин
Охват и читатели15K
Недавно мы опубликовали материал, в котором Эрик Эллиот критиковал TypeScript. Сегодня мы представляем вашему вниманию перевод статьи Кента Доддса. Тут он рассказывает о том, почему в PayPal перешли с Flow на TypeScript.

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

JSON API – работаем по спецификации

Время на прочтение23 мин
Охват и читатели196K
В последнее время веб-разработка разделилась. Теперь мы все не full-stack программисты — мы фронтендеры и бэкендеры. А самое сложное в этом, как и везде, это проблема взаимодействия и интеграции.

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

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


Дайджест свежих материалов из мира фронтенда за последнюю неделю №349 (21 — 27 января 2019)

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


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

Обзор Vue.js 2.6

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

Совсем скоро должна выйти новая версия Vue.js — 2.6. Под катом вы найдете обзор новых фич следующей версии, включая новый синтаксис слотов, Vue.observable() и много чего еще!

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

opencv4arts: Нарисуй мой город, Винсент

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

OpenCV — библиотека с историей непрерывной разработки в 20 лет. Возраст, когда начинаешь копаться в себе, искать предназначение. Есть ли проекты на ее основе, которые сделали чью-то жизнь лучше, кого-то счастливее? А можешь ли ты сделать это сам? В поисках ответов и желании открыть для себя ранее неизвестные модули OpenCV, хочу собрать приложения, которые "делают красиво" — так, чтобы сначала было "вау" и только потом ты скажешь "о да, это компьютерное зрение".


Право первой статьи получил эксперимент с переносом стилей мировых художников на фотографии. Из статьи вы узнаете, что является сердцем процедуры и об относительно новом OpenCV.js — JavaScript версии библиотеки OpenCV.


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