JavaScript *

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

Ниже вы увидите однострочную функцию, которая возвращает свойство lastName переданного аргумента. Просто добавив одно свойство к каждому объекту, мы получим падение производительности более чем на 700%!

Объясню подробнее почему так происходит. Отсутствие статической типизации в JavaScript приводит к такому поведению. Если рассматривать это как преимущество перед другими языками, такими как C# или Java, то в данном случае получается скорее "Faustian bargain" ("Фаустовская сделка". Жертвование духовных ценностей ради материальных выгод; происхождение выражения связано с именем Дж. Фауста).

Эта статья - часть серии статей "Составляя ПО" про функциональное программирование и различные техники создания программ на JavaScript ES6+, начиная с азов. Оставайтесь на связи, много нового впереди!

Композиция: "Действие, заключающееся в составлении единого целого из частей или элементов."

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

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

Каждый разработчик JavaScript должен знать, что такое замыкание (closure). Во время собеседования по кодированию JavaScript есть большая вероятность, что вас спросят о концепции замыкания.

Я составил список из 7 интересных и наиболее сложных вопросов по замыканиям в JavaScript.

Возьмите карандаш, лист бумаги и постарайтесь ответить на вопросы, не глядя на ответы и не запуская код. По моим подсчетам, вам понадобится около 30 минут.

Развлекайтесь!

Если вам нужно освежить свои знания о замыкании, я рекомендую ознакомится с публикацией A Simple Explanation of JavaScript Closures (Простое объяснение замыканиям в JavaScript).

Содержание

Вопрос 1: Замыкания развязывают твои руки 

Вопрос 2: Утерянные параметры

Вопрос 3: Кто есть кто

Вопрос 4: Хитроумное замыкание

Вопрос 5: Правильное или неправильное сообщение

Вопрос 6: Восстановление инкапсуляции (Restore encapsulation)

Вопрос 7: Умное перемножение

Резюме

Основная цель - обнаружение лица и маски в браузере, не используя бэкенд на Python. Это простое приложение WebApp / SPA, которое содержит только JS-код и может отправлять некоторые данные на серверную часть для следующей обработки. Но начальное обнаружение лица и маски выполняется на стороне браузера и никакой реализации Python для этого не требуется.

На данный момент приложение работает только в браузере Chrome.

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

Я много раз читал, как кто-то попробовал MobX, у него код получился запутанным с не контролируемыми изменениями, после чего он продолжил писать на Redux. Для MobX нет рекомендованной архитектуры. Но при использовании и соблюдении в MobX строгой и однообразной (имеется ввиду одинаковой в различных участках проекта) архитектуры, можно получить понятный код с контролируемыми изменениями в сколь угодно большом проекте. Я опишу один из вариантов, как этого добиться.

Когда я приходил на конференции и видел презентации на тему веб-компонентов, я всегда думал, что это не только изящно, но и довольно сложно. Тысяча строк JavaScript, чтобы сохранить всего 4 строки HTML. Докладчик или неизбежно скрывал за простыми вещами огромное количество JS кода, или погружался в сложные детали, тогда мои глаза начинали закрываться от скуки, и я начинал думать о том, покрывают ли мои суточные выплаты расходы на закуски.

Однако в недавнем проекте, созданном для легкого изучения HTML (Конечно, путем добавления зомби и глупых шуток), я решил, что необходимо описать каждый элемент HTML в спецификации. Не считая той конференции, я впервые начинал знакомство с <slot> и <template> элементами, и, когда я захотел написать что-то интересное о них в проекте, мне пришлось углубиться в тему.

И в процессе углубления я понял: веб-компоненты проще, чем я думал.

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

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

Учитывая насколько hype-driven является разработка софта в наше время, можно быть уверенным в том что через несколько лет будут существовать новые модные фреймворки для фронтенд разработки. В момент когда фреймворк на базе которого построено приложение выходит из моды — вы вынуждены либо поддерживать устаревшую (legacy) кодовую базу либо стартовать процесс перевода приложения на новый фреймворк.

Оба варианта сопряжены с ущербом для бизнеса. Поддержка устаревшей кодовой базы означает проблемы с наймом новых и мотивацией текущих разработчиков. Перевод приложения на новый фреймворк стоит времени (следственно — денег) но не несет никакой пользы для бизнеса.

Данная статья является примером построения SPA с использованием высокоуровневых принципов дизайна архитектуры. При этом конкретные библиотеки и фреймворки выбираются для удовлетворения ответственностей, определённых желаемой архитектурой.

Одни умные люди говорят: "эксепшены - это зло, используйте монады!", другие кричат: "коды ошибок ещё никто не отменял!", а третьи включают механизм исключений в языки программирования.. Однако, у большинства статей, который попадались мне на глаза есть две относительные проблемы (при всём уважении к авторам!):

Некоторая... академичность. Разобрано множество идей и концепций, но заканчивается всё стандартным: "ваш выбор зависит от вашей ситуации".

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

Цель этого поста - поделиться выработанным практическим рецептом. В конкретном фреймворке и с конкретными границами применимости. Без претензий на уникальность, универсальность, идеальность и, тем более, академическую "правильность".

Кому интересно, прошу под кат.

Существует довольно популярный сайт https://custom-elements-everywhere.com где показывается как работают веб-компоненты в разных фреймворках. Почти у всех фреймворков там красивый 100% результат, но у React там очень настораживающие 71%.

Многие пользователи смотрят на эту страничку и делают вывод, что React плохо поддерживает не только веб-компоненты, но и DOM API в принципе. Так ли это? Действительно ли все плохо?

Давайте разбираться!

Эта часть статьи будет об осмыслении составляющих Redux. Так ли они необходимы, что является их аналогом. Также будет предложена более удобная альтернатива хука useReducer.

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

В этой части статьи я хочу показать, что:

— редьюсеры - это аналог обычных чистых функции для получения нового состояния.

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

— dispatch + action + action creators - это аналог обычных вызовов функций, и разбиение на dispatch, action, action creators является зачастую ненужным и используются не к месту.

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

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

Сейчас мы с вами напишем простой WebSocket-сервер на node.js. При подключении к этому серверу в ответ придёт приветственное сообщение. А так же будет доступна к выполнению пара не сложных команд.

Вы помните далёкие дни из детства, когда вы, проводили целый день, а иногда даже не ели целый день, чтобы поиграть в игры на Nintendo? (Ах, дни Mario и Contra!!!)

С того времени игры претерпели гигантские преобразования и сфера стала более обширной. Это уже не просто хобби. Сейчас в Интернете доступно множество игр, связанных с программированием, и вы можете использовать их чтобы изучить и отточить свои скилы в увлекательной форме. Более того, эти игры могут помочь вам улучшить навыки решения задач, поскольку вам нужно будет решать задачи различной сложности, а также соревноваться с другими опытными программистами по всему миру. Специально к старту новых потоков курсов Fullstack-разработчик на Python, разработка на C# и разработка на Java, в этой статье мы отобрали несколько таких игр, играя в которые можно параллельно качать и себя самого.

Главный миф о Дэне Абрамове — что он «создал React». Но хотя это и не так, сейчас он имеет самое прямое отношение к фреймворку, так что поговорить с ним про React очень интересно. Обычно Дэна не увидеть на российских конференциях, но нам помог онлайн-формат, и на HolyJS его подробно расспросили Наталия Теплухина (член core team Vue.js) и Наталия Короткова (занимается веб-проектами с 2010 года).

Тут получился не поверхностный разговор о погоде, а обсуждение технической конкретики для тех, кто вдается в детали. Но под конец были и более общие вопросы: когда появится новая документация React, переписанная с нуля? Что не так с Redux? Как Дэн воспринимает холивары о фреймворках? Что он может рассказать о релокации?

Так что, если не осилите все технические детали в первой половине интервью, переходите ко второй, там попроще. Под катом — и видеозапись разговора, и текстовая расшифровка.

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

Мы ведь теперь пишем "прямо на ассемблере" - значит, все будет супербыстро! Правда ведь?

Весной 2020 года KTS вместе с командой спецпроектов ВКонтакте придумали концепцию и механику игры к 5-летию Oreo в России.

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

В этой статье мы расскажем про визуальную составляющую (почти)бесконечной башни на TS + React + MobX + react-spring + styled-components и как мы решали задачи отображения и оптимизаций, чтобы добиться максимально плавного игрового взаимодействия.

В этой статье я покажу, как для React-компонентов реализовать один из подходов на основе сущностей и их составляющих. Описываемый подход используется для решения той же проблемы, что HOC и Custom hooks – повторно использовать код между множеством однотипных объектов/функций и разбивать сложные объекты (такие как компоненты в веб-разработке) на более простые составляющие.

Даже если этот подход вам не интересен, как минимум вы увидите, как можно переделать структуру функциональных компоненты и компонентов-классов под свои нужды. Узнаете нестандартные приемы, которые можно использовать при разработке компонентов.
Те, кто пишет компоненты-классы, узнает, как повторно использовать код более эффективным способом, чем HOC, не создавая лишние компоненты-обертки.