Обновить
256K+

JavaScript *

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

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

Отображение и оптимизация вывода на терминал в вебе

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

Не так давно я столкнулся с довольно простой и одновременно интересной задачей: реализация read-only терминала в веб приложении. Интереса задаче придавали три важных аспекта:


  • поддержка основных ANSI Escape sequences
  • поддержка минимум 50 000 строк данных
  • отображение данных по мере их поступления.


В данной статье я расскажу о том, как это реализовывал и как потом всё это оптимизировал.

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

Ответственный подход к JavaScript-разработке, часть 1

Время на прочтение12 мин
Охват и читатели30K
Цифры говорят нам о том, что рост объёмов JavaScript-кода плохо влияет на производительность веб-проектов. Если так будет продолжаться и дальше, то уже очень скоро при загрузке средней страницы будет передаваться как минимум 400 Кб JS-кода. И это — всего лишь объём передаваемых данных. Как и другие текстовые ресурсы, JavaScript-код практически всегда передаётся в сжатом виде. Пожалуй, сжатие — это единственное, что обычно делается правильно при передаче кода с сервера на клиент.

image

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

Как устроен ReactJS. Пакет React

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

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


В этой серии статей мы почитаем код и попробуем разобраться за что отвечают пакеты, которые лежат у реакта под капотом, для чего они используются и как они работают. Самые основные, которые мы используем в браузере, – это react, react-dom, events и react-reconciler.


Будем двигаться по порядку и сегодня у нас статья про пакет react. Кому интересно, что же есть в этом пакете, – заходите под кат.

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

Компилятор Ангуляр в 200 строчек кода

Время на прочтение3 мин
Охват и читатели5.2K
Привет. Меня зовут Роман, и я не изобретатель велосипедов. Мне нравится фреймворк Angular и экосистема вокруг него, и я разрабатываю с его помощью свои веб-приложения. С моей точки зрения, основное преимущество Angular в долгосрочной перспективе базируется на разделении кода между HTML и TypeScript, что подробно было описано одним из его разработчиков why-angular-renders-components-with.html Это преимущество имеет и обратную сторону: необходимость компиляции в принципе и сложность динамической компиляции компонентов в runtime. А так хочется использовать уже знакомый синтаксис шаблонов Angular, чтобы дать пользователю своих приложений возможность настраивать шаблоны писем, генерировать отчеты и таблицы для печати или задавать формат экспорта xml файлов! Чтобы узнать, как это сделать — добро пожаловать под кат!
Читать дальше →

Разбираемся в Angular Ivy: Incremental DOM и Virtual DOM

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

Angular — наш основной инструмент для написания приложения TestMace. В одной из прошлых статей мы затронули тему Ivy рендерера. Самое время поподробнее узнать, чем Ivy отличается от предыдущего движка.




В нашей компании Nrwl мы уже какое-то время находимся в предвкушении возможностей, которые откроет нам и нашим клиентам Ivy. Angular Ivy — это новый движок рендеринга Angular, кардинально отличающийся от всех аналогичных технологий популярных фреймворков тем, что он использует Incremental DOM.

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

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

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

Кстати, на днях этому дайджесту исполнилось 7 лет. Спасибо всем причастным :)


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

Сверхпростое логгирование в Javascript — два декоратора, и готово

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


Вам еще не надоело писать logger.info('ServiceName.methodName.') и logger.info('ServiceName.methodName -> done.') на каждый чих? Может вы, так же как и я, неоднократно задумывались о том, чтобы это дело автоматизировать? В данной статье рассказ пойдет о class-logger, как об одном из вариантов решения проблемы с помощью всего лишь двух декораторов.

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

Основы движков JavaScript: оптимизация прототипов. Часть 1

Время на прочтение6 мин
Охват и читатели7.4K
Всем привет. Все меньше времени остается до запуска курса «Безопасность информационных систем», поэтому сегодня мы продолжаем делиться публикациями, приуроченными к запуску данного курса. Кстати, нынешняя публикация является продолжением вот этих двух статей: «Основы движков JavaScript: общие формы и Inline кэширование. Часть 1», «Основы движков JavaScript: общие формы и Inline кэширование. Часть 2».

В статье описаны ключевые основы. Они являются общими для всех движков JavaScript, а не только для V8, над которым работают авторы (Бенедикт и Матиас). Как JavaScript разработчик могу сказать, что более глубокое понимание того, как работает движок JavaScript поможет разобраться в том, как писать эффективный код.

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

Фракталы в иррациональных числах. Часть 2

Время на прочтение5 мин
Охват и читатели14K
Часть 0: Фракталы в простых числах.
Часть 1: Фракталы в иррациональных числах.



В статье присутствуют Gif и контрастные картинки. У эпилептиков может случиться эпилептический припадок.
Читать дальше →

Вы не сможете решить эту задачу на собеседовании

Время на прочтение5 мин
Охват и читатели132K
Привет, Habr. Хочу поделиться с вами одной интересной задачей, которую многие из нас получали на собеседовании, но, вероятно, даже и не догадывались о том, что решаем ее неправильно.

Прежде всего — немного истории. Работая на должностях тимлида и техлида мне порой приходилось проводить собеседования, соответственно нужно подготовить несколько теоретических вопросов, ну и пару несложных задач, на решение которых не должно было бы уйти больше 2х-3х минут. Если с теорией все просто — мой любимый вопрос это: «чему равен typeof null?», по ответу сразу можно понять, кто сидит перед тобой, джун — просто правильно ответит, а претендент на сеньера, еще и объяснит почему. То с практикой — сложнее. Я долго не мог придумать нормальное задание, не изъезженное, типа fizz-buzz, а что-нибудь свое. Поэтому я на собеседованиях давал задания, которые сам проходил, устраиваясь на текущую работу. О первом из них и пойдет речь.
Читать дальше →

Обзор новых функций NestJS 6

Время на прочтение4 мин
Охват и читатели7.9K
Мы в TestMace активно используем NestJS для разработки наших сервисов. Сегодня вашему вниманию представляется перевод статьи, посвященной обзору фич новой мажорной версии NestJS.



Сегодня я рад представить официальный релиз Nest 6 — прогрессивного Node.js фреймворка для создания эффективных корпоративных серверных приложений.


Для нашего сообщества последний год не прошёл бесследно: популярность выросла почти на 300%, что в 4 раза больше, чем у какой-либо из существующих HTTP-библиотек. О Nest рассказывали на большом количестве конференций по всему миру, было создано множество статей и видеоматериалов. 2018 год был невероятным, а 2019 будет ещё лучше!

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

Перенос сайта на статику: мотивация, стоимость, работа

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

Недавно мы сделали то, о чём грезят все программисты и дизайнеры — переписали всё с нуля: полный редизайн нашего сайта и написание «движка» с чистого листа. Ниже поведаем о мотивации и процессе миграции с онлайн-CMS на статику.





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

С чего лучше начать проект или как сделать так, что бы не было потом мучительно больно

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

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

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

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

Принципы построения REST JSON API

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

Эта памятка писалась для внутренних нужд (открыть глаза менее опытным в вебе коллегам). Но, т.к. я насмотрелся велосипедов от довольно уважаемых, казалось бы, контор, — выкладываю на хабр. Мне кажется, многим будет полезно.


Зачем


Надеюсь, читающий уже понимает, зачем ему вообще нужен именно REST api, а не какой-нибудь монстр типа SOAP. Вопрос в том, зачем соблюдать какие-то стандарты и практики, если браузеры вроде бы позволяют делать что хочешь.


  • Стандарт HTTP это стандарт. Его несоблюдение вредно для кармы и ведёт к постоянным проблемам с безопасностью, кэшированием и прочими "закидонами" браузеров, которые совсем не закидоны, а просто следование стандарту.
  • Велосипеды со всякими {error: "message","result":...} невозможно нормально тестировать и отлаживать
  • Поддержка большим количеством готовых клиентских библиотек на все случаи жизни. Те, кто будет вашим api пользоваться, скажут большое человеческое спасибо.
  • Поддержка автоматизированного интеграционного тестирования. Когда сервер на любые запросы отдаёт 200 ОК — ну, это такое себе развлечение.
Читать дальше →

Лучшее из опыта создания чистых и быстрых Angular приложений

Время на прочтение4 мин
Охват и читатели19K
На написание этой статьи сподвигли поиски JavaScript front-end разработчиков в свою компанию в Ставрополе. Т.к. длительное время не удавалось найти толкового программиста и тогда мы решили запустить программу стажировки с большим количеством обучающего материала по Angular & JS.

Это перевод статьи Vamsi Vempati про его опыт работы над крупномасштабным приложением для компании Trade Me, написанным на Angular.



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

В статье в общих чертах описываются методы, которые мы используем в нашем проекте. Текст по большей части связан с Angular, TypeScript, RxJs и @ngrx/store.

Кроме того, будут рассмотрены некоторые общие рекомендации по написанию кода, которые помогут сделать приложение более «чистым» и читаемым.
Читать дальше →

Ускоряем сайт с JivoSite. Отложенная загрузка онлайн-консультанта

Время на прочтение3 мин
Охват и читатели20K
При оценке скорости загрузки сайта сервисом Google, обратил внимание, что довольно много очков теряем из-за установленного онлайн-консультанта JivoSite. При удалении кода онлайн-консультанта с сайта, проект набирает на 16 очков больше для мобильной версии и на 19 очков больше для ПК версии.

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

Учимся общаться между микросервисами на Node.js через RabbitMQ

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

Это продолжение статьи «Пишем первый микросервис на Node.js с общением через RabbitMQ», которая была неплохо принята пользователями хабра.


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

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

Основы движков JavaScript: общие формы и Inline кэширование. Часть 2

Время на прочтение3 мин
Охват и читатели9.4K
Всем привет! Курс «Безопасность информационных систем» стартует уже через 2 недели, поэтому сегодня мы хотим опубликовать вторую часть статьи, публикация которой приурочена к его запуску. Прочитать первую часть можно тут. Итак, начнем.

Inline Caches (ICs)

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


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

Учебный курс по React, часть 26: архитектура приложений, паттерн Container/Component

Время на прочтение12 мин
Охват и читатели34K
В этой части перевода учебного курса по React мы поговорим об архитектуре React-приложений. В частности, обсудим популярный паттерн Container/Component.

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

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

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


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